Github配合Jenkins握玛，實現(xiàn)vue等前端項目的自動構(gòu)建與發(fā)布

本篇文章前端項目以vue為例（其實前端工程化項目的操作方法都相同）荧关，部署在Linux系統(tǒng)上（centos）溉奕。
之前做前端項目的部署，一直都是手動運行打包命令忍啤，打包完加勤。再使用FTP、Xshell等這類的工具上傳到服務(wù)器同波。這種方式不僅效率不高鳄梅，而且容易出錯，一不小心就放錯地方了参萄∥乐Γ或者公司有運維，只需要打包前端項目代碼后發(fā)給運維就不管了讹挎，但是一般的小公司是沒有運維的校赤。所以呢，就在找有沒有什么工具可以自動幫我完成這些操作筒溃，于是就找到了下面這貨马篮，名字叫做Jenkins。隨著用的越來越多怜奖，越來越順心浑测，這小老頭也是越看越順眼了！Ｍ崃帷迁央！

Jenkins.jpg

這篇文章的主要目的，就是實現(xiàn)往`github` `push`代碼或者合并代碼到項目的`master`或者其他分支滥崩，`jenkins`就自動部署代碼到對應(yīng)服務(wù)器岖圈。

一、Jenkins的安裝與配置

Jenkins是一個開源軟件項目钙皮，是基于Java開發(fā)的一種持續(xù)集成工具蜂科，用于監(jiān)控持續(xù)重復(fù)的工作顽决，旨在提供一個開放易用的軟件平臺，使軟件的持續(xù)集成變成可能导匣。（摘自百度百科）

1. java環(huán)境的搭建

因為它是依賴于Java環(huán)境的才菠，所以必須先安裝java環(huán)境，否則啟動Jenkins服務(wù)的時候會報錯哦贡定。
執(zhí)行以下命令安裝JDK赋访，一步到位。建議安裝版本1.8以上的

yum install java-1.8.0-openjdk

2. 安裝Jenkins

我一般習(xí)慣使用yum安裝軟件厕氨。由于yum的repo中默認(rèn)沒有Jenkins进每，所以需要先將Jenkins庫添加到yum repos中，依次執(zhí)行下面的命令：

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在網(wǎng)站根目錄的讀寫權(quán)限命斧，我這邊網(wǎng)站的根目錄為/usr/share/nginx/hxkj

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

啟動Jenkins

service jenkins start

因為jenkins默認(rèn)使用8080端口田晚，如果使用的是云服務(wù)器，還需要在安全組中開放8080端口（如果不想使用8080端口国葬，或者端口被占用了贤徒，可以在Jenkins的配置文件里修改默認(rèn)端口）

3. Jenkins的初始化使用

3.1、在瀏覽器輸入`http://服務(wù)器IP:8080` 打開`jenkins`汇四，首次打開需要獲取管理員的密碼接奈，如圖：

unlock.jpg

可以根據(jù)頁面提示在服務(wù)器中找到該密碼，輸入如下命令：（cat命令后面的路徑為頁面上顯示的標(biāo)紅文字通孽，每個人的可能不一樣）

cat /var/lib/jenkins/secrets/initalAdminPassword

3.2序宦、安裝默認(rèn)插件：輸入密碼，提交完成之后會跳轉(zhuǎn)到插件安裝頁面背苦，選擇第一個然后進行安裝互捌，如圖：

plugin.jpg

這一步，啥都不用做行剂，慢慢等吧秕噪。。厚宰。

installing.jpg

接下來默認(rèn)插件安裝完成之后腌巾，創(chuàng)建一個管理員賬戶，完成配置后铲觉，就可以登錄 Jenkins 了

create.png

3.3澈蝙、安裝 NodeJs插件，用于vue項目打包構(gòu)建撵幽。

打開系統(tǒng)管理 => 管理插件 搜索 NodeJs然后勾選安裝
打開系統(tǒng)管理 => 全局工具配置 拉到底部配置 node 版本碉克，如圖：

node.jpg

4. 配置自動部署任務(wù)

4.1、新建任務(wù)：點擊`新建任務(wù)` => `輸入任務(wù)名稱`并齐，選擇`構(gòu)建一個自由風(fēng)格的軟件項目`然后確定

create_task.jpg

4.2漏麦、配置git，進入`任務(wù)配置`况褪，選擇`源碼管理` 撕贞，因為我的項目是開源的，所以無需填寫賬號密碼

git.jpg

4.3测垛、設(shè)置構(gòu)建環(huán)境捏膨，選擇 `Provide Node & npm bin/ folder to PATH` 然后選擇之前安裝插件時候配置的node版本

build_env.jpg

4.4、配置項目自動化打包食侮，選擇 `增加構(gòu)建步驟` => `Excute shell` 這個是運行相關(guān)的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源設(shè)置為淘寶源（這個你懂的）
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    #刪除壓縮包

步驟分離之后链快，如下圖