實現目標
本地push代碼到GitHub，Webhook自動觸發jenkins上的構建動做,完成安裝node插件而且打包，而後經過Publish Over SSH插件，將打包出來的文件，部署到目標服務器上。前端
前期準備
-
github 帳號和項目 -
centos 服務器; -
服務器安裝 Java SDK; -
服務器安裝 nginx + 啓動； -
服務器安裝jenkins + 啓動；
jenkins介紹
Jenkins是開源的,使用Java編寫的持續集成的工具，在Centos上能夠經過yum命令行直接安裝。Jenkins只是一個平臺，真正運做的都是插件。這就是jenkins流行的緣由，由於jenkins什麼插件都有。vue
首先登陸服務器更新系統軟件
$ yum update
安裝Java和git
$ yum install java
$ yum install git
安裝nginx
$ yum install nginx //安裝
$ service nginx start //啓動
出現Redirecting to /bin/systemctl start nginx.servicejava
說明nginx已經啓動成功了，訪問http://你的ip/，若是成功安裝會出來nginx默認的歡迎界面node
安裝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 端口就能夠訪問了。nginx
輸入 cat /var/lib/jenkins/secrets/initialAdminPassword 查看初始密碼git
這裏咱們選擇推薦通用插件安裝便可，選擇後等待完成插件安裝以及初始化帳戶github
而後安裝兩個推薦的插件 Rebuilder
SafeRestartweb
在jenkins中安裝nodeJs插件
由於咱們的項目是要用到node打包的，因此先在jenkins中安裝nodeJs插件，安裝後進入全局工具配置，配置一個咱們要用到的node版本。shell
建立任務
-
點擊建立一個新任務
-
jenkins關聯 GitHub項目地址
-
選擇構建環境並編寫shell 命令
配置完成後點擊當即構建，等待構建完，點擊工做空間，能夠發現已經多出一個打包後的dist目錄。點擊控制檯輸出能夠查看詳細構建logsegmentfault
到這裏已經實現了本地代碼提交到github，而後在jenkins上點擊構建，能夠拉取代碼而且打包，下一步實現打包後的dist目錄放到目標服務器上。
安裝Publish Over SSH 插件，咱們將經過這個工具實現服務器部署功能。
安裝完成後在系統管理-> 系統設置->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，出現Success說明配置成功
在剛纔的testJenkins工程中配置構建後操做，選擇send build artificial over SSH， 參數說明：
Name:選擇一個你配好的ssh服務器
Source files ：寫你要傳輸的文件路徑
Remove prefix ：要去掉的前綴，不寫遠程服務器的目錄結構將和Source files寫的一致
Remote directory ：寫你要部署在遠程服務器的那個目錄地址下，不寫就是SSH Servers配置裏默認遠程目錄
Exec command ：傳輸完了要執行的命令，我這裏執行了進入test目錄,解壓縮,解壓縮完成後刪除壓縮包三個命令
注意在構建中添加壓縮dist目錄命令
填完後執行構建。成功後登陸咱們目標服務器發現test目錄下有了要運行的文件
訪問域名發現項目能夠訪問了
接下來實現開發本地push代碼到github上後，觸發Webhook，jenkins自動執行構建。
-
jenkins安裝Generic Webhook Trigger 插件 -
github添加觸發器
配置方法
1.在剛纔的testJenkins工程中點擊構建觸發器中選擇Generic Webhook Trigger，填寫token
2.github配置Webhook
選擇github項目中的Settings->Webhooks>add webhook
配置方式按上圖紅框中的格式，選擇在push代碼時觸發webhook，成功後會在下方出現一個綠色的小勾勾
測試一下，把vue項目首頁的9900去了，而後push代碼去github，發現Jenkins中的構建已經自動執行，
查看頁面也是ok的
一套簡單的前端自動化工做流就搭建完成，是選擇代碼push後在Jenkins中手動構建，仍是push後自動構建，看公司狀況使用。
本文分享自微信公衆號 - Vue中文社區（vue_fe）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。