前端er，Jenkins持續化集成Webpack項目

時間 2019-11-15

標籤前端 jenkins 持續集成 webpack 項目欄目自動化構建简体版

原文原文鏈接

本篇已 GitHub 上的項目爲例，經過 hook 方式來監聽分支代碼合併並完成打包發佈。前端

⚠️⚠️⚠️多圖警告：非戰鬥人員請緊張的往下看⚠️⚠️⚠️node

前言

上一篇前端er，Jenkins持續化集成環境搭建，咱們已經搭建完了持續化集成的環境。webpack

下面咱們開始用這個環境，來爲咱們本身或者公司的前端項目效力吧！git

目標

監聽 GitHub 項目分支代碼變化，自動執行打包
上傳打包後的代碼到指定服務器
在服務器上重啓 Node 服務，完成發佈（若是存在 Node 服務）

主要流程:github

配置服務器環境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服務，能夠略過本步驟。web

安裝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
複製代碼

增長環境變量shell

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版本。npm

測試用，我安裝的是最新版本 v11.12.0。json

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
複製代碼