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