Github配合Jenkins，實現vue等前端專案的自動構建與釋出

Hudson GitHub Vue · 發表 2019-03-24 00:54:34

摘要：本篇文章前端專案以vue為例（其實前端工程化專案的操作方法都相同），部署在Linux系統上（centos）。之前做前端專案的部署，一直都是手動執行打包命令，打包完。再使用 FTP 、 Xshell 等這類的工具上傳到伺服器。這種方式不僅效率不高，而且容易出錯，一不小心就放錯地方了。或者...

本篇文章前端專案以vue為例（其實前端工程化專案的操作方法都相同），部署在Linux系統上（centos）。

之前做前端專案的部署，一直都是手動執行打包命令，打包完。再使用 FTP 、 Xshell 等這類的工具上傳到伺服器。這種方式不僅效率不高，而且容易出錯，一不小心就放錯地方了。或者公司有運維，只需要打包前端專案程式碼後發給運維就不管了，但是一般的小公司是沒有運維的。所以呢，就在找有沒有什麼工具可以自動幫我完成這些操作，於是就找到了下面這貨，名字叫做 Jenkins 。隨著用的越來越多，越來越順心，這小老頭也是越看越順眼了！！！

Jenkins.jpg

這篇文章的主要目的，就是實現往 `github` `push` 程式碼或者合併程式碼到專案的 `master` 或者其他分支， `jenkins` 就自動部署程式碼到對應伺服器。

一、Jenkins的安裝與配置

Jenkins 是一個開源軟體專案，是基於 Java 開發的一種持續整合工具，用於監控持續重複的工作，旨在提供一個開放易用的軟體平臺，使軟體的持續整合變成可能。（摘自百度百科）

1. java環境的搭建

因為它是依賴於 Java 環境的，所以必須先安裝 java 環境，否則啟動 Jenkins 服務的時候會報錯哦。

執行以下命令安裝JDK，一步到位。建議安裝版本1.8以上的

yum install java-1.8.0-openjdk

2. 安裝Jenkins

我一般習慣使用 yum 安裝軟體。由於 yum 的 repo 中預設沒有 Jenkins ，所以需要先將 Jenkins 庫新增到 yum repos 中，依次執行下面的命令：

cd /etc/yum.repos.d/
wget http://pkg.jenkins.io/redhat/jenkins.repo
rpm --import http://pkg.jenkins.io/redhat/jenkins.io.key
yum install -y jenkins

賦予 Jenkins 在網站根目錄的讀寫許可權，我這邊網站的根目錄為 /usr/share/nginx/hxkj

chown -R jenkins.jenkins /usr/share/nginx/hxkj

啟動 Jenkins

service jenkins start

因為 jenkins 預設使用 8080 埠，如果使用的是雲伺服器，還需要在安全組中開放 8080 埠（如果不想使用 8080 埠，或者埠被佔用了，可以在 Jenkins 的配置檔案裡修改預設埠）

3. Jenkins的初始化使用

3.1、在瀏覽器輸入 `http://伺服器IP:8080` 開啟 `jenkins` ，首次開啟需要獲取管理員的密碼，如圖：

unlock.jpg

可以根據頁面提示在伺服器中找到該密碼，輸入如下命令：（ cat 命令後面的路徑為頁面上顯示的標紅文字，每個人的可能不一樣）

cat /var/lib/jenkins/secrets/initalAdminPassword

3.2、安裝預設外掛：輸入密碼，提交完成之後會跳轉到外掛安裝頁面，選擇第一個然後進行安裝，如圖：

plugin.jpg

接下來預設外掛安裝完成之後，建立一個管理員賬戶，完成配置後，就可以登入 Jenkins 了

create.jpg

3.3、安裝 NodeJs外掛，用於vue專案打包構建。

開啟 系統管理 => 管理外掛 搜尋 NodeJs 然後勾選安裝

開啟 系統管理 => 全域性工具配置 拉到底部配置 node 版本，如圖：

node.jpg

4. 配置自動部署任務

4.1、新建任務：點選 `新建任務` => `輸入任務名稱` ，選擇 `構建一個自由風格的軟體專案` 然後確定

create_task.jpg

4.2、配置git，進入 `任務配置` ，選擇 `原始碼管理` ，因為我的專案是開源的，所以無需填寫賬號密碼

git.jpg

4.3、設定構建環境，選擇 `Provide Node & npm bin/ folder to PATH` 然後選擇之前安裝外掛時候配置的node版本

build_env.jpg

4.4、配置專案自動化打包，選擇 `增加構建步驟` => `Excute shell` 這個是執行相關的sh命令（這一步建議耗時操作分離步驟）

所有命令

cd /var/lib/jenkins/workspace/hxkj #進入Jenkins工作空間下hxkj專案目錄
node -v #檢測node版本（此條命令非必要）
npm -v #檢測npm版本（此條命令非必要）
npm config set registry https://registry.npm.taobao.org #把npm源設定為淘寶源（這個你懂的）
npm config get registry #檢測npm是否切換成功（此條命令非必要）
npm install #安裝專案中的依賴
npm run build #打包
cd dist
rm -rf hxkj.tar.gz #刪除上次打包生成的壓縮檔案（一般建議備份，不要直接刪除，這邊測試就無所謂啦）
tar -zcvf hxkj.tar.gz * #把生成的專案打包成壓縮包，方便移動到專案部署目錄
cd /usr/share/nginx/hxkj #進入web專案根目錄
mv /var/lib/jenkins/workspace/hxkj/dist/hxkj.tar.gz ./#移動剛剛打包好的專案到web專案根目錄
tar -zxvf hxkj.tar.gz -C dist/#解壓專案到dist目錄
rm -rf hxkj.tar.gz#刪除壓縮包

步驟分離之後，如下圖