讓Jenkins幫你自動布署Vue項目
實現(xiàn)目標
本地push代碼到GitHub，Webhook自動觸發(fā)jenkins上的構建動作,完成安裝node插件并且打包，然后通過Publish Over SSH插件，將打包出來的文件，部署到目標服務器上。
前期準備
github 賬號和項目 centos 服務器; 服務器安裝 Java SDK; 服務器安裝 nginx + 啟動； 服務器安裝jenkins + 啟動；
jenkins介紹
Jenkins是開源的,使用Java編寫的持續(xù)集成的工具，在Centos上可以通過yum命令行直接安裝。Jenkins只是一個平臺，真正運作的都是插件。這就是jenkins流行的原因，因為jenkins什么插件都有。
首先登錄服務器更新系統(tǒng)軟件
$ yum update
安裝Java和git
$ yum install java
$ yum install git
安裝nginx
$ yum install nginx //安裝
$ service nginx start //啟動
出現(xiàn)Redirecting to /bin/systemctl start nginx.service
說明nginx已經(jīng)啟動成功了，訪問http://你的ip/，如果成功安裝會出來nginx默認的歡迎界面
安裝Jenkins
$ wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
$ yum install jenkins //完成之后直接使用 yum 命令安裝 Jenkins
$ service jenkins restart //啟動 jenkins
jenkins啟動成功后默認的是8080端口，瀏覽器輸入你的服務器 ip 地址加8080 端口就可以訪問了。
輸入 cat /var/lib/jenkins/secrets/initialAdminPassword 查看初始密碼
這里我們選擇推薦通用插件安裝即可，選擇后等待完成插件安裝以及初始化賬戶
然后安裝兩個推薦的插件 Rebuilder
SafeRestart
在jenkins中安裝nodeJs插件
因為我們的項目是要用到node打包的，所以先在jenkins中安裝nodeJs插件，安裝后進入全局工具配置，配置一個我們要用到的node版本。
創(chuàng)建任務
點擊創(chuàng)建一個新任務
jenkins關聯(lián) GitHub項目地址
選擇構建環(huán)境并編寫shell 命令
配置完成后點擊立即構建，等待構建完，點擊工作空間，可以發(fā)現(xiàn)已經(jīng)多出一個打包后的dist目錄。點擊控制臺輸出可以查看詳細構建log
到這里已經(jīng)實現(xiàn)了本地代碼提交到github，然后在jenkins上點擊構建，可以拉取代碼并且打包，下一步實現(xiàn)打包后的dist目錄放到目標服務器上。
安裝Publish Over SSH 插件，我們將通過這個工具實現(xiàn)服務器部署功能。
安裝完成后在系統(tǒng)管理-> 系統(tǒng)設置->Publish over SSH
里設置服務器信息
Passphrase：密碼（key的密碼，沒設置就是空）
Path to key：key文件（私鑰）的路徑
Key：將私鑰復制到這個框中(path to key和key寫一個即可)
SSH Servers的配置：
SSH Server Name：標識的名字（隨便你取什么）
Hostname：需要連接ssh的主機名或ip地址（建議ip）
Username：用戶名
Remote Directory：遠程目錄（上面第二步建的testjenkins文件夾的路徑）
高級配置：
Use password authentication, or use a different key：勾選這個可以使用密碼登錄，不想配ssh的可以用這個先試試
Passphrase / Password：密碼登錄模式的密碼
Port：端口（默認22）
Timeout (ms)：超時時間（毫秒）默認300000
這里配置的是賬號密碼登錄，填寫完后點擊test，出現(xiàn)Success說明配置成功
在剛才的testJenkins工程中配置構建后操作，選擇send build artificial over SSH， 參數(shù)說明：
Name:選擇一個你配好的ssh服務器
Source files ：寫你要傳輸?shù)奈募窂?br style="max-width: 100%;box-sizing: border-box !important;overflow-wrap: break-word !important;">Remove prefix ：要去掉的前綴，不寫遠程服務器的目錄結構將和Source files寫的一致
Remote directory ：寫你要部署在遠程服務器的那個目錄地址下，不寫就是SSH Servers配置里默認遠程目錄
Exec command ：傳輸完了要執(zhí)行的命令，我這里執(zhí)行了進入test目錄,解壓縮,解壓縮完成后刪除壓縮包三個命令
注意在構建中添加壓縮dist目錄命令
填完后執(zhí)行構建。成功后登錄我們目標服務器發(fā)現(xiàn)test目錄下有了要運行的文件
訪問域名發(fā)現(xiàn)項目可以訪問了
接下來實現(xiàn)開發(fā)本地push代碼到github上后，觸發(fā)Webhook，jenkins自動執(zhí)行構建。
jenkins安裝Generic Webhook Trigger 插件 github添加觸發(fā)器
配置方法
1.在剛才的testJenkins工程中點擊構建觸發(fā)器中選擇Generic Webhook Trigger，填寫token
2.github配置Webhook
選擇github項目中的Settings->Webhooks>add webhook
配置方式按上圖紅框中的格式，選擇在push代碼時觸發(fā)webhook，成功后會在下方出現(xiàn)一個綠色的小勾勾
測試一下，把vue項目首頁的9900去了，然后push代碼去github，發(fā)現(xiàn)Jenkins中的構建已經(jīng)自動執(zhí)行，
查看頁面也是ok的
一套簡單的前端自動化工作流就搭建完成，是選擇代碼push后在Jenkins中手動構建，還是push后自動構建，看公司情況使用。
<b id="afajh"><abbr id="afajh"></abbr></b>