本篇已 GitHub 上的專案為例，通過 hook 方式來監聽分支程式碼合併並完成打包釋出。
⚠️⚠️⚠️多圖警告：非戰鬥人員請緊張的往下看⚠️⚠️⚠️
前言
上一篇前端er，Jenkins持續化整合環境搭建，我們已經搭建完了持續化整合的環境。
下面我們開始用這個環境，來為我們自己或者公司的前端專案效力吧！
目標
- 監聽 GitHub 專案分支程式碼變化，自動執行打包
- 上傳打包後的程式碼到指定伺服器
- 在伺服器上重啟 Node 服務，完成釋出（如果存在 Node 服務）
主要流程:
- 配置伺服器環境1.jpg
- 配置 Jenkins 環境
- 測試專案準備
- 配置 GitHub Hook
- 新建任務
- 測試
軟體
伺服器環境軟體
- nvm：Node版本管理軟體，用來管理不同的 Node 版本。
- Node：v11.12.0 基礎環境，不做介紹。
- pm2：Node 服務守護程式管理工具。
Jenkins 外掛
- GitHub plugin：GitHub整合的必要外掛
- NodeJS Plugin：Node 專案打包必要外掛
- Publish Over SSH：通過SSH操作伺服器的必要外掛
專案伺服器環境搭建
⚠️注意：如果是單純的靜態專案，不牽扯Node服務，可以略過本步驟。
安裝Node環境
安裝nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
# 或者
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
複製程式碼增加環境變數
vi ~/.zshrc
# 檔案末尾新增
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
複製程式碼安裝 Node
# 檢視當前存在的所有Node版本
nvm list-remote
複製程式碼
根據自己需要安裝相應的Node版本。
測試用，我安裝的是最新版本 v11.12.0。
nvm install v11.12.0
複製程式碼安裝 pm2
對於需要Node服務支援的可以選擇安裝，也可以安裝同型別的軟體。
npm install pm2 -g
複製程式碼Jenkins 配置 Node 環境
此項需要依賴
NodeJS外掛，配置前請確定外掛已經安裝。
我們專案使用了Node環境，所以需要在 Jenkins 中配置我們打包需要的 Node 環境。
開啟 系統管理 => 全域性工具配置 選中 NodeJS 欄， 點選 NodeJs 安裝 按鈕。
命名，選自動安裝，選擇一個使用的Node版本。
測試專案準備
測試專案已 Webpack4 + Vue2 + Vue-Router + Vuex 為例，簡單搭建用於測試。
測試專案不做過多介紹，感興趣的可以參照JenkinsTest。
需要注意的地方為 package.json 中的相關的命令。
"dev": "cross-env ENV=dev webpack-dev-server --hot",
"build-dev": "cross-env ENV=dev webpack --config webpack.config.js",
"prod": "cross-env ENV=prod webpack-dev-server --hot",
"build-prod": "cross-env ENV=prod webpack --config webpack.config.js"
複製程式碼專案存在三個分支：master 、 dev 、 prod。
以 prod 分支為我們的釋出分支， dev 分支為開發分支做演示。
增加GitHub的授權
生成GitHub授權token
開啟GitHub的設定，選擇 Developer settings 。
選擇 Personal access tokens 選單，點選 Generate new token 生成一個新的 token。
選中 repo 和 admin:repo_hook 兩項，填入一個名字，生成 token。
複製剛生成的token，備用。
Jenkins 配置 GitHub 全域性授權
配置GitHub的授權前提是安裝了
GitHub API Plugin外掛，沒有安裝的可以安裝後再嘗試。
開啟Jenkins配置頁面，選擇 系統管理 => 系統設定。
找到 GitHub 條目，選擇 新增GitHub伺服器 。
命名，然後選擇新增憑據。
型別選擇 Secret text ，Secret 中填入上一步獲得的 GitHub 授權token。
儲存後，在憑據欄 選擇剛才新增的 Secret text，然後點選 連線測試 ，測試是否能用。
為了能夠正常使用hook，需要生成一個web_hook的連結。
點選 高階 勾選 為 Github 指定另外一個 Hook URL 然後會生成一個url，複製這個url備用。
開啟我們的測試專案JenkinsTest，選擇 Settings 。
選擇 Webhooks 標籤，點選 Add webhook 按鈕新增一個url。
在 Payload URL 項中填入我們剛才複製的url，點選新增，就會生成上邊圖片中的連結。
如果連結可用，連結的字首會是一個綠色的✔️。
⚠️注意事項
由於虛擬機器是內網，無法在 GitHub 上正確新增hook配置，所以需要開啟內網穿透。
客官可以根據自己的經驗來設定內網穿透，保證在外網能夠訪問伺服器即可。
下邊是我提供的簡單的內網穿透，本方法在本機可用，但是在虛擬機器無法使用。
開啟內網穿透
安裝 localtunnel ，用來做內網穿透。
# 安裝依賴庫
npm install -g localtunnel
# 開啟穿透
lt --subdomain jenkins --port 8080
複製程式碼為了麻煩，我使用的是我自己的伺服器搭建的 Jenkins ，所以可以直接配置一個線上地址就行了，如果有自己的伺服器也可以這麼用。
測試通過後，就可以開心 ?的使用了呢~~~
配置ssh服務
此設定需要依賴
Publish over SSH外掛，請確保設定前安裝了外掛。
為了方便線上程式碼打包後的分發、釋出流程，需要我們配置相應的伺服器。
開啟 系統管理 => 系統設定 ，選擇 Publish over SSH 項，填寫相應的名字，伺服器地址，使用者名稱，跳轉目錄等。
儲存使用。
新建Jenkins任務
到目前為止，我們的環境已經配置完成，下面就可以開始建立任務，開啟自動化流程了。
點選 新建任務 來建立一個任務。輸入專案名稱，然後選擇 構建一個自由風格的軟體專案 ，確定。
基礎配置
勾選 GitHub 專案 ，填入我們的測試專案的地址：https://github.com/BingKui/JenkinsTest。
為了不產生資源浪費，我們勾選丟棄到舊的構建，具體數值可根據自己的需求填寫。
原始碼管理
原始碼管理選擇 Git ，填入我們的專案，選擇我們上邊新增的全域性憑證 GitHub Token ，設定分支為 prod ，程式碼瀏覽器為 githubweb ，填入地址。
構建觸發器
順應自動化，我們的觸發器選擇為 GitHub hook trigger for GITScm polling 。
構建環境
我們使 Webpack 專案，所有選擇構建環境為 Provide Node & npm bin/ folder to PATH ，選擇我們前邊新增的 Node 環境。
構建
下面就是我們的構建主要流程了，點選 增加構建步驟 ，選擇 執行 shell ，然後編寫我們的指令碼。
#!/bin/bash
# 輸出當前環境
echo '開始專案構建命令'
echo $PATH
node -v
npm -v
echo '當前分支'
git branch
# 切換拉取程式碼
echo '拉取程式碼'
git pull origin prod
# 安裝依賴庫
echo '安裝依賴庫'
npm install
# 執行打包
echo '開始打包'
npm run build-prod
# 打包構建後的檔案
tar -cvf demo.tar ./dist
複製程式碼
這一步完成，我們的程式碼就已經構建打包完畢，接下來就是把程式碼上傳到我們需要的伺服器了。
繼續，然後選擇我們上邊新增的伺服器，填入執行的命令。
到目前為止，作為靜態專案，我們的釋出已經完成。如果是有 Node 服務的專案，還需要我們執行另外的操作。
⚠️注意：以下步驟為存在 Node 服務的專案的額外步驟。
點選 增加構建步驟 ，選擇 Send files or execute commands over SSH ，選擇伺服器，填寫我們的服務檔案和需要執行的命令。
測試
我們的可持續整合環境已經完成，現在對我們的環境測試一下是否能夠正常完成。
修改測試專案 prod 分支的檔案，提交程式碼到倉庫，push 到遠端倉庫，檢視我們的環境是否正常執行。
提交程式碼後，自動生成了一個打包任務，並自己執行了。✌️搞定！！！