本篇文章前端項目以vue為例（其實前端工程化項目的操作方法都相同），部署在Linux系統上（centos）。
之前做前端項目的部署，一直都是手動運行打包命令，打包完。再使用FTP、Xshell等這類的工具上傳到服務器。這種方式不僅效率不高，而且容易出錯，一不小心就放錯地方了。或者公司有運維，只需要打包前端項目代碼后發給運維就不管了，但是一般的小公司是沒有運維的。所以呢，就在找有沒有什么工具可以自動幫我完成這些操作，于是就找到了下面這貨，名字叫做Jenkins。隨著用的越來越多，越來越順心，這小老頭也是越看越順眼了！！！
這篇文章的主要目的，就是實現往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，首次打開需要獲取管理員的密碼，如圖：
可以根據頁面提示在服務器中找到該密碼，輸入如下命令：（cat命令后面的路徑為頁面上顯示的標紅文字，每個人的可能不一樣）
cat /var/lib/jenkins/secrets/initalAdminPassword
3.2、安裝默認插件：輸入密碼，提交完成之后會跳轉到插件安裝頁面，選擇第一個然后進行安裝，如圖：
這一步，啥都不用做，慢慢等吧。。。
接下來默認插件安裝完成之后，創建一個管理員賬戶，完成配置后，就可以登錄 Jenkins 了
3.3、安裝 NodeJs插件，用于vue項目打包構建。
打開系統管理 => 管理插件 搜索 NodeJs然后勾選安裝
打開系統管理 => 全局工具配置 拉到底部 配置 node 版本，如圖：
4. 配置自動部署任務
4.1、新建任務：點擊新建任務 => 輸入任務名稱，選擇構建一個自由風格的軟件項目然后確定
4.2、配置git，進入任務配置，選擇源碼管理 ，因為我的項目是開源的，所以無需填寫賬號密碼
4.3、設置構建環境，選擇 Provide Node & npm bin/ folder to PATH 然后選擇之前安裝插件時候配置的node版本
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 #刪除壓縮包
步驟分離之后，如下圖
4.5、保存后點擊立即構建查看任務是否能夠成功構建，控制臺輸出 菜單可以查看構建日志。
到現在為止，Jenkins構建已經配置完畢，接下來就是配合github來完成騷操作了！
二、GitHub+Jenkins聯動配置
1. 創建 github AccessToken
進入 github 設置頁，選擇Developer settings
選擇 Personal access tokens => Generate new Generate
勾選如下配置，然后點擊Generate Generate，一定要保存好這個token哦，它只顯示一次。
2. Jenkins添加github插件
打開系統管理 => 管理插件 搜索 Github Plugin然后勾選安裝
然后進入 系統管理 => 系統設置 => Github Server 添加信息
憑據 那里再點擊 添加 添加如下信息
添加完畢之后記得選擇我們剛剛添加的憑據信息
最后點擊 連接測試 如果如下顯示，說明配置是正確的
三、Git push測試
Git的push操作，這邊就不演示了
當完成push操作之后，回到Jenkins管理頁面，就會看到在構建隊列中，新增了一條記錄。
而且，查看構建日志，也提示成功！！！
At last，看完之后有什么不懂的，可以留言反饋。
轉載請注明出處：http://www.lxweimin.com/p/4c4f92209dd1
作者：TSY
個人空間：https://hxkj.vip
