Jenkins實現(xiàn)前端項目自動化集成打包部署

Guakin_Huang 發(fā)布于2019-08-21 16:26 / 557人閱讀

摘要：原博客地址實現(xiàn)前端項目自動化集成打包部署掘金地址前言以前寫前端項目打包部署，都是手動運行命令，打包完，然后壓縮，再上傳到服務(wù)器解壓。驗證提交代碼，成功自動打包部署提交代碼，觀察界面，出現(xiàn)構(gòu)建任務(wù)，構(gòu)建完成之后收到郵件通知。

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

前言

以前寫前端項目打包部署，都是手動運行命令，打包完，然后壓縮，再上傳到服務(wù)器解壓。

這種方式確實有點low并且效率也不高。
自從用了Jenkins持續(xù)集成工具，寫前端項目越來越工程化，再也不用擔(dān)心忘記部署項目，也不用煩躁每次打包壓縮后還要部署多個服務(wù)器和環(huán)境，更開心的是每次家里寫完代碼，不用遠程公司部署項目，提交代碼后自動會為你部署。
本文基于React的前端項目和GitLab的代碼倉庫以及Windows(其他系統(tǒng)平臺大同小異)，簡述Jenkins實現(xiàn)自動部署的配置。

安裝Jenkins

前提：已配置好java環(huán)境

1.下載對應(yīng)的安裝程序點我進入下載網(wǎng)站或直接下載war包

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

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

3.查看插件

點開系統(tǒng)設(shè)置的插件管理頁面，如果可選插件列表為空，點擊高級標(biāo)簽頁，替換升級站點的URL為：http://mirror.xmission.com/je...
并且點擊提交和立即獲取

4.返回可選插件，選擇如下插件安裝（如果已安裝，請忽略）

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

提前設(shè)置配置

為了方便新建任務(wù)，所以先將一些設(shè)置配置好，進入系統(tǒng)管理系統(tǒng)設(shè)置。

1.配置Publish over SSH

在Publish over SSH處點擊增加，添加SSH server，并且選擇高級設(shè)置，設(shè)置相應(yīng)的ip,用戶名和密碼等。（其他選項可不用管）

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

新建任務(wù) 1.點擊新建，輸入名稱，選擇自由風(fēng)格的項目

2.配置源碼

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

3.配置構(gòu)建觸發(fā)器

勾選Poll SCM即可，其他可忽略，默認提交代碼到相應(yīng)的分支觸發(fā)該任務(wù)

4.配置構(gòu)建

增加構(gòu)建步驟選擇Execute shell

5.配置構(gòu)建后操作

增加構(gòu)建后操作，選擇Send build artifacts over SSH。即上述操作全部完成并自動生產(chǎn)了部署文件，該步驟將部署文件上傳到之前的SSH服務(wù)器（Linux服務(wù)器），并執(zhí)行你想讓他執(zhí)行的命名，部署多個服務(wù)器及平臺，選擇添加server并完成相應(yīng)的配置

配置后再增加構(gòu)建后操作，選擇Editable Email Notification。根據(jù)提示配置需要通知的郵箱，其他可默認。然后選擇高級設(shè)置，配置失敗和成功郵件通知。

綁定GitLab Web hooks

添加web hook. http://jenkins-server/gitlab/... 需要填上的固定格式的URL地址，把jenkins-server替換成對應(yīng)的Jenkins訪問地址，注意：如果是localhost，需要換成ip地址。
添加完之后，點擊Test Hook。此時Jenkins界面構(gòu)建隊列出現(xiàn)某個任務(wù)正在執(zhí)行，表示配置成功。

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

提交代碼，觀察Jenkins界面，出現(xiàn)構(gòu)建任務(wù)，構(gòu)建完成之后收到郵件通知。

最后，推薦給大家前端交流QQ群：264591039。歡迎來這里和大家一起暢聊大前端的一切~