簡介

Jenkins是一個開源的、提供友好操作介面的持續整合(CI)工具，起源於Hudson（Hudson是商用的），主要用於持續、自動的構建/測試軟體專案、監控外部任務的執行（這個比較抽象，暫且寫上，不做解釋）。Jenkins用Java語言編寫，可在Tomcat等流行的servlet容器中執行，也可獨立執行。通常與版本管理工具(SCM)、構建工具結合使用。常用的版本控制工具有SVN、GIT，構建工具有Maven、Ant、Gradle。

jenkins安裝

1.安裝JDK

yum install -y java

2.安裝jenkins

把Jenkins庫新增到yum庫,然後安裝

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
 rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
 yum install -y jenkins

如果yum安裝jenkins出現簽名認證失敗,再啟動命令後面加上- -nogpgcheck

yum install -y jenkins --nogpgcheck

3.配置jenkis的埠

vi /etc/sysconfig/jenkins
#此埠不衝突可以不修改 
JENKINS_PORT="8080" 

4.啟動jenkins

# start 啟動 stop停止,restart重啟
service jenkins start/stop/restart

安裝成功後Jenkins將作為一個守護程序隨系統啟動
系統會建立一個“jenkins”使用者來允許這個服務，如果改變服務所有者，同時需要修改/var/log/jenkins,/var/lib/jenkins,和/var/cache/jenkins的所有者

5.開啟jenkins

在瀏覽器中訪問
http://127.0.0.1:8080/
首次進入會要求輸入初始密碼如下圖

初始密碼在：/var/lib/jenkins/secrets/initialAdminPassword 檔案裡面

6.安裝外掛

登陸進去之後,然後就開始安裝推薦外掛了.

釋出vue專案

1.安裝外掛

如果jenkins和vue應用部署在同一臺電腦,後面2個外掛不用安裝

安裝NodeJS外掛

點選系統管理,然後點選外掛管理,在可選外掛裡面搜尋NodeJS外掛,然後安裝

安裝連線SSH的外掛

Publish Over SSH用於連線遠端伺服器

安裝把應用釋出到遠端伺服器的外掛

Deploy to container外掛用於把打包的應用釋出到遠端伺服器

2.配置git和NodeJS環境

開啟系統管理裡面的全域性工具配置

安裝配置git

如果 下載過就不需要再下載了。

#安裝git
yum install git
#檢視git的執行檔案位置,預設是在 /usr/bin/git
whereis git

配置git執行命令目錄

安裝配置NodeJS

自動下載會出現在構建任務的時候卡半天 (不推薦)

自動下載的NodeJS檔案儲存在/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/ 下面

手動下載NodeJS壓縮包上傳到伺服器指定位置

我本地開發環境用的NodeJS是 v12.18.3版本下載路徑是https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.gz,你們可以去https://nodejs.org/dist/ 頁面去找你們對應的版本檔案
建議別用網頁下載,網頁下載特別慢,開啟迅雷把檔案連結放進去幾秒鐘就下完了.

#把下載好的壓縮包上傳到伺服器的這個目錄下面
/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/
#壓縮
cd /var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/
tar zxvf node-v12.18.3-linux-x64.tar.gz

3.配置git憑證資訊

配置git賬號密碼資訊

點選系統管理下面的 Manage Credentials

點選Jenkins

點選全域性憑據

點選新增憑據

設定連線git的賬號密碼資訊,然後再設定憑據的唯一ID

4.新建任務

新建任務,然後點構建一個自由風格的軟體專案

配置git地址和憑證資訊

點選原始碼管理，然後配置程式碼倉庫和對應的憑據資訊

指定分支

設定專案的自動釋出的觸發條件

目前使用的是輪詢,
H/5 * * * * * 表示每5分鐘去檢視git程式碼有沒有更新,有更新自動釋出

配置構建環境

選中之前在全域性配置新增的NodeJS名稱

設定構建引數和執行的命令

下面2種情況,根據實際需求選擇配置

釋出專案到本機 設定構建命令

點選增加構建步驟,選擇執行shell

把構建專案的命令放進去,然後點選儲存就行

#切換目錄(我的vue專案在git原始碼根路徑的ocrweb目錄下，你們的如果是在根路徑下面,cd這個命令請忽略)
#cd ocrweb
#載入依賴
npm install 
#構建程式碼
npm run build
#複製構建後的檔案到nginx裡面專案對應的部署目錄下
cp dist/* -rf /usr/local/nginx/jenkins/www/ocrweb

由於jenkins服務預設是有jenkins使用者啟動的,所以要給vue專案釋出的目錄授權

chmod 777 /usr/local/nginx/jenkins/www/ocrweb

立即構建專案

1.點選我的檢視

2.點選剛剛新建的任務

3.點選立即構建

4.點選檢視控制檯日誌

可以看到列印了我們之前配置命令

看到下面的Finished: SUCCESS代表著已經發布成功了。

最後看到檔案已經發布到了我配置的nginx容器的目錄下面了。

釋出專案到遠端伺服器 需要先設定遠端伺服器的host,賬號,密碼

點選系統管理->點選系統配置,找到Publish over SSH選項

需要配置Name,Hostname,Username,Remote Directory
賬號認證可以使用密碼,key檔案,key內容

引數說明

欄位	描述
Passphrase	伺服器的密碼
Path to key	連線遠端伺服器金鑰檔案的路徑
Key	金鑰檔案的內容
Name	自定義伺服器名
HostName	伺服器IP外網地址
UserName	伺服器使用者名稱
Remote Directory	連線上ssh後的預設路徑

設定構建命令

比上面寫的單機部署的少了cp命令,多個打包命令

#載入依賴
npm install 
#構建程式
npm run build
#切換了編譯後的目錄
cd dist
#移除之前的壓縮包
rm -f ocrweb.tar.gz
#把當前目錄的所有檔案打包成ocrweb.tar.gz
tar -zcvf ocrweb.tar.gz *

構建後操作

點選增加構建後操作，選中Send build artifacts over SSH

#Source files
dist/ocrweb.tar.gz
#Remove prefix
dist
#Remote directory
usr/local/nginx/jenkins/www/ocrweb
#Exec command
cd /usr/local/nginx/jenkins/www/ocrweb
tar -zxvf ocrweb.tar.gz
rm -f ocrweb.tar.gz 

引數說明

欄位	描述
Source files	專案構建後在工作空間的相對目錄(我這邊構建時候打包的檔名是ocrweb,所以填寫的 dist/ocrweb.tar.gz)
Remove prefix	去字首 (如果不去除的話,會在釋出的目錄後面新增dist目錄)
Remote directoty	釋出的目錄 (系統配置的路徑/這個目錄,由於我配置ssh根路徑寫了/,所以我這裡寫的路徑是usr/local/nginx/jenkins/www/ocrweb)
Exec command	釋出完執行的命令 (先cd切換到檔案釋出的目錄,然後執行解壓操作,然後刪除壓縮包)

配置完成後,儲存,然後點選立即構建，檢視控制檯日誌,看到SSH: Transferred 1 file(s)
Finished: SUCCESS就代表檔案已經上傳到遠端服務了。

登入遠端伺服器驗證檔案是否存在。

到這裡,大概把jenkins部署vue專案步驟寫的差不多了

到此這篇關於jenkins自動構建釋出vue專案的方法步驟的文章就介紹到這了,更多相關jenkins自動構建vue內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！