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

Guakin_Huang 發布于2019-08-21 16:26 / 543人閱讀

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

原博客地址: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。歡迎來這里和大家一起暢聊大前端的一切~

GPU云服務器云服務器 Jenkins自動化部署 maven項目打包部署到云服務器 web項目打包部署到服務器上 jenkins持續集成

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88545.html

使用Jenkins持續集成前端項目并自動化部署到Nginx服務器

摘要：上午折騰了一下持續集成，由于公司使用自己搭建的服務器來進行代碼管理，因此這里是針對服務器來進行的配置，后面稍微介紹了下針對管理的項目的配置之前項目每次修改之后都需要本地一次手動發布到服務器上方便測試和產品查看，有了持續集成之后只要或者提交之上午折騰了一下Jenkins持續集成，由于公司使用自己搭建的svn服務器來進行代碼管理，因此這里Jenkins是針對svn服務器來進行的配置，后面...

liukai90 2019-07-25 14:11 評論0 收藏0
前端開發團隊的工具鏈

摘要：官網地址推薦指數顆星推薦理由自動化部署和集成部署的好工具，操作簡單，顯示友好，具備多種插件，應有盡有，支持多類型語言的項目集成和部署。官網地址如果你有其他好用的工具，不妨也分享一下原博客鏈接前端開發團隊的工具鏈匯集前端開發團隊中經常使用的好工具，分享給大家！注：都是開源工具 showImg(https://segmentfault.com/img/remote/1460000019...

xcold 2019-08-26 10:24 評論0 收藏0
Jenkins集成Docker鏡像實現自動發布

摘要：集群環境的部署方式使用集群管理工具通過版本新增文件實現滾動升級容器等同于應用的部署 1. 思路&流程 Jenkins集成Docker鏡像實現自動發布與Jenkins發布mavne項目思路一樣總體流程為：Jenkins 拉去遠端源碼 —— gitl實現應用打包 —— jenkins本地把應用程序打包進Docker鏡像 ...

defcon 2019-06-28 17:48 評論0 收藏0
一些小團隊的自動化運維實踐經驗

摘要：行業內各巨頭的自動化運維架構都各種功能各種酷炫，如下圖，讓人可望不可及。面對這么多問題，我就想啊，如何在低成本情況下實現自動化運維。自動擴縮容通過配置告警規則，調用相應就可以實現實戰以上就是筆者關于自動化運維的一些實踐。行業內各巨頭的自動化運維架構都各種功能各種酷炫，如下圖，讓人可望不可及。現在最終的樣子大家都知道了，但問題是如何根據自己團隊當前的情況一步步向那個目標演進？筆者所在團隊，三...

princekin 2019-04-25 17:22 評論0 收藏0
fir.im weekly - 「持續集成」實踐教程合集

摘要：來這里看看的工程師如何進行持續集成與持續部署。主要介紹了豆瓣移動持續集成和測試相關實踐，用工具化自動化社會化測試來解決遇到的問題，將打包發布環節自動化。這期的持續集成實踐分享就到這里。我們常看到許多團隊和開發者分享他們的持續集成實踐經驗，本期 fir.im Weekly 收集了 iOS，Android，PHP ，NodeJS 等項目搭建持續集成的實踐，以及一些國內外公司的內部持續集成...

A Loity 2019-06-27 13:42 評論0 收藏0