Jenkins實現前端項目自動化集成打包部署

原博客地址:https://yezihaohao.github.io/2017/09/09/Jenkins實現前端項目自動化集成打包部署/
掘金地址:https://juejin.im/entry/59b40bd36fb9a00a5474c3c7

前言

之前寫前端項目打包部署，都是手動運行命令，打包完，而後壓縮，再上傳到服務器解壓。

這種方式確實有點low而且效率也不高。
自從用了Jenkins持續集成工具，寫前端項目愈來愈工程化，不再用擔憂忘記部署項目，也不用煩躁每次打包壓縮後還要部署多個服務器和環境，更開心的是每次家裏寫完代碼，不用遠程公司部署項目，提交代碼後自動會爲你部署。
本文基於React的前端項目和GitLab的代碼倉庫以及Windows(其餘系統平臺大同小異)，簡述Jenkins實現自動部署的配置。

安裝Jenkins

前提：已配置好java環境

1.下載對應的安裝程序點我進入下載網站或直接下載war包

2.根據提示安裝完成（默認端口是8080）

war包啓動方式： java -jar jenkins.war --httpPort=8080（端口自定義），而後訪問http://localhost:8080

3.查看插件

點開系統設置的插件管理頁面，若是可選插件列表爲空，點擊高級標籤頁，替換升級站點的URL爲：http://mirror.xmission.com/je...
而且點擊提交和當即獲取

4.返回可選插件，選擇以下插件安裝（若是已安裝，請忽略）

1.Publish Over SSH
2.GitLab Plugin
3.Email Extension Plugin

提早設置配置

爲了方便新建任務，因此先將一些設置配置好，進入系統管理系統設置。

1.配置Publish over SSH

在Publish over SSH處點擊增長，添加SSH server，而且選擇高級設置，設置相應的ip,用戶名和密碼等。（其餘選項可不用管）

2.配置郵件通知，可經過勾選發送郵件測試是否配置成功

新建任務

1.點擊新建，輸入名稱，選擇自由風格的項目

2.配置源碼

選擇Git，並填上gitlab項目克隆地址，用戶密鑰以及分支

3.配置構建觸發器

勾選Poll SCM便可，其餘可忽略，默認提交代碼到相應的分支觸發該任務

4.配置構建

增長構建步驟選擇Execute shell

5.配置構建後操做

增長構建後操做，選擇Send build artifacts over SSH。即上述操做所有完成並自動生產了部署文件，該步驟將部署文件上傳到以前的SSH服務器（Linux服務器），並執行你想讓他執行的命名，部署多個服務器及平臺，選擇添加server並完成相應的配置

配置後再增長構建後操做，選擇Editable Email Notification。根據提示配置須要通知的郵箱，其餘可默認。而後選擇高級設置，配置失敗和成功郵件通知。

綁定GitLab Web hooks

添加web hook. http://jenkins-server/gitlab/... 須要填上的固定格式的URL地址，把jenkins-server替換成對應的Jenkins訪問地址，注意：若是是localhost，須要換成ip地址。
添加完以後，點擊Test Hook。此時Jenkins界面構建隊列出現某個任務正在執行，表示配置成功。

驗證提交代碼，成功自動打包部署

提交代碼，觀察Jenkins界面，出現構建任務，構建完成以後收到郵件通知。

最後，推薦給你們前端交流QQ羣：264591039。歡迎來這裏和你們一塊兒暢聊大前端的一切~