Github配合Jenkins，實現vue等前端項目的自動構建與發佈

本篇文章前端項目以vue爲例（其實前端工程化項目的操做方法都相同），部署在Linux系統上（centos）。
以前作前端項目的部署，一直都是手動運行打包命令，打包完。再使用FTP、Xshell等這類的工具上傳到服務器。這種方式不只效率不高，並且容易出錯，一不當心就放錯地方了。或者公司有運維，只須要打包前端項目代碼後發給運維就無論了，可是通常的小公司是沒有運維的。因此呢，就在找有沒有什麼工具能夠自動幫我完成這些操做，因而就找到了下面這貨，名字叫作Jenkins。隨着用的愈來愈多，愈來愈順心，這小老頭也是越看越順眼了！！！

這篇文章的主要目的，就是實現往github push代碼或者合併代碼到項目的master或者其餘分支，jenkins就自動部署代碼到對應服務器。

1、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.一、在瀏覽器輸入http://服務器IP:8080 打開jenkins，首次打開須要獲取管理員的密碼，如圖：

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

cat /var/lib/jenkins/secrets/initalAdminPassword

3.二、安裝默認插件：輸入密碼，提交完成以後會跳轉到插件安裝頁面，選擇第一個而後進行安裝，如圖：

這一步，啥都不用作，慢慢等吧。。。

接下來默認插件安裝完成以後，建立一個管理員帳戶，完成配置後，就能夠登陸 Jenkins 了

3.三、安裝 NodeJs插件，用於vue項目打包構建。

打開系統管理 => 管理插件 搜索 NodeJs而後勾選安裝
打開系統管理 => 全局工具配置 拉到底部 配置 node 版本，如圖：

4. 配置自動部署任務

4.一、新建任務：點擊新建任務 => 輸入任務名稱，選擇構建一個自由風格的軟件項目而後肯定

4.二、配置git，進入任務配置，選擇源碼管理 ，由於個人項目是開源的，因此無需填寫帳號密碼

4.三、設置構建環境，選擇 Provide Node & npm bin/ folder to PATH 而後選擇以前安裝插件時候配置的node版本

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    #刪除壓縮包

步驟分離以後，以下圖

4.五、保存後點擊當即構建查看任務是否可以成功構建，控制檯輸出 菜單能夠查看構建日誌。

到如今爲止，Jenkins構建已經配置完畢，接下來就是配合github來完成騷操做了！

2、GitHub+Jenkins聯動配置

1. 建立 github AccessToken

進入 github 設置頁，選擇Developer settings

選擇 Personal access tokens => Generate new Generate

勾選以下配置，而後點擊Generate Generate，必定要保存好這個token哦，它只顯示一次。

2. Jenkins添加github插件

打開系統管理 => 管理插件 搜索 Github Plugin而後勾選安裝

而後進入 系統管理 => 系統設置 => Github Server 添加信息

憑據 那裏再點擊 添加 添加以下信息

添加完畢以後記得選擇咱們剛剛添加的憑據信息

最後點擊 鏈接測試 若是以下顯示，說明配置是正確的

3、Git push測試

Git的push操做，這邊就不演示了

當完成push操做以後，回到Jenkins管理頁面，就會看到在構建隊列中，新增了一條記錄。

並且，查看構建日誌，也提示成功！！！

At last，看完以後有什麼不懂的，能夠留言反饋。

轉載請註明出處：https://www.jianshu.com/p/4c4f92209dd1
做者：TSY
我的空間：https://hxkj.vip