前言

大家以前寫前端專案部署，可能都是手動執行命令，打包完，然後壓縮，再利用FTP、Xshell等這類的工具上傳到伺服器解壓。也或者你不會操作，你認為這些事情是運維做的，你只需要打包你的前端專案程式碼後發給運維你就不管了。這種方式確實有點low且效率也不高。

現在大家更關注的是Devops，關注如何來做持續整合，持續交付，如何來做CI/CD。

今天就拿Jenkins配合Github實現自動化整合打包部署。

系列文章：

Jenkins的安裝這裡就不在說明了，網上安裝教程很多。

Jenkins介紹

引用百度百科的一句話：Jenkins是一個開源軟體專案，是基於Java開發的一種持續整合工具，用於監控持續重複的工作，旨在提供一個開放易用的軟體平臺，使軟體的持續整合變成可能。

在工作中部署jenkins的最大好處就是每次在開發、測試環境程式碼，都無須運維部署，而是相關的開發人員，測試人員登入jenkins構建需要部署的tag或者分支即可，整個部署過程無須運維參與，解放運維勞動力。

也不用擔心部署在多個伺服器，在家寫程式碼也不用遠端公司部署專案，提交程式碼後會自動為你部署。

部署方式

jenkins的構建方式常用分為三種。

jenkins觸發式構建：push程式碼或者合併程式碼到專案的master或者其他分支，jenkins就部署程式碼到對應伺服器。

jenkins引數化構建：push程式碼或者合併程式碼到專案的master或者其他分支之後，並不會部署程式碼，而是需要登入到jenkins的web介面，點選構建按鈕，傳入對應的引數（比如引數需要構建的tag，需要部署的分支）然後才會部署。

jenkins定時構建：多用於APP、自動化用例等自動打包，定時構建是在引數化構建的基礎上新增的，開發人員可以登入jenkins手動傳入tag進行打包，如果不手動打包，那麼jenkins就定時從配置專案地址拉取最新的程式碼打包。

Jenkins + github持續整合

建立 github AccessToken

進入github 設定頁，選擇Developer settings

選擇 Personal access tokens -> Generate new token

勾選如下配置

然後點生成就行了，切記一定要儲存好這個token，只顯示一次。

配置Jenkins

進入系統管理 => 管理外掛 => 安裝外掛 Github Plugin

然後進入 系統管理 => 系統設定 => Github Server 新增資訊

Credentials 那裡再點選 Add 新增如下資訊

新增完畢之後記得選擇我們剛剛新增的資訊

最後點選 Test Connection 如果配置正確應當有如下顯示：

建立任務

建立一個自由風格的任務

勾選 Github Project 填入github倉庫url

原始碼管理選擇Git ，填寫倉庫git地址，選擇需要構建的分支，我這裡選擇master （** 為選擇所有分支）

構建觸發器，這裡你們可以根據上面所說的部署方式來選擇，這裡我選擇 GitHub hook trigger for GITScm polling ，來完成 push 後自動構建

然後就是構建 => 增加構建步驟 => 執行shell 填入你自己的構建和部署的命令 我這裡拿我的hexo部落格舉例

現在如果提交程式碼到對應的分支，就會自動觸發構建，如果構建成功，也就自動部署在你的網站上了。其實這裡就是咱們配置生效了，github監聽到咱們push後，利用webhook通知Jenkins：大爺來玩呀，Jenkins就會根據咱們的配置自動完成構建部署。

總結

配置看似很繁瑣，其實很簡單，配置過一次，再配置第二次就是手到擒來，其他專案也是如此，如 vue + webpack類的，只是構建的shell命令不一樣而已。還有，切記 rm -rf慎用慎用！233... o(╥﹏╥)o