前端 Jenkins 自動化部署
這兩天折騰了一下 Jenkins 持續整合，因為公司使用本身搭建的 svn 伺服器來進行程式碼管理，所以這裡 Jenkins 是針對 svn 伺服器來進行的配置，Git 配置基本一致，後面也介紹了下針對 Github 管理的專案的 Jenkins 配置html
以前專案每次修改以後都須要本地npm run build一次手動釋出到伺服器上方便測試和產品檢視，有了Jenkins持續整合以後只要 svn 或者 git 提交以後就會自動打包，很方便，這次記錄以備後詢。前端
宣告：vue
-
後面的專案地址與打包地址都是使用
my-demo，自行修改；node -
另外還有路徑等，根據本身狀況自行修改；nginx
1. 安裝
1.1 安裝 Nginx
能夠直接去官網下直接下載，解壓縮start nginx就可使了，經常使用命令：git
start nginx # 啟動
nginx -s reload # 修改配置後從新載入生效
nginx -s reopen # 從新開啟日誌檔案
nginx -t # 配置檔案檢測是否正確1.2 安裝Jenkins
從官網下載檔案安裝以後，我這裡安裝到C:\Jenkins（Mac 不用在乎），預設埠 8080，這時候瀏覽器訪問localhost:8080就能訪問 Jenkins 首頁，這裡注意若是不安裝到 C 盤根目錄有些外掛安裝會出錯github
這裡會讓你去某個地方找一個初始密碼檔案開啟並填到下面的密碼框裡，驗證成功以後進入頁面，選擇Installsuggested plugins
外掛都安裝完成以後進入使用者登陸介面，設定使用者名稱、密碼及郵箱。shell
而後提示 Jenkins is ready！→ Start using Jenkins ~npm
注意這裡由於要使用node的命令來執行建立後操做，因此還須要安裝外掛：NodeJSPlugin、Deployto container、Github、Postbuild task
這裡順便記錄一下啟動和關閉Jenkins服務的命令列：
-
net start jenkins//啟動Jenkins服務 -
net stop jenkins//中止Jenkins服務
2. 建立svn專案的Jenkins任務
2.1 新建
左邊欄新建一個任務，輸入一個任務名稱，這裡隨便寫一個
2.2 配置
General
這裡才是重頭戲，進入剛剛建立的任務的配置頁面的General
丟棄舊的構建就是檢測到新的版本以後把舊版本的構建刪除
原始碼管理
這裡採用的是 svn 來管理程式碼，
構建觸發器
這裡的 Poll SCM 表示去檢測是否更新構建的頻率，*****表示每分鐘，H****表示每小時
構建
cd cd C:\Jenkins\workspace\my-demo
node -v
npm -v
cnpm i
npm run build構建後操做
安裝外掛Postbuild task後，能夠在 增長構建後操做步驟中選擇Postbuild task選項，增長構建後執行的script，具體也能夠參考文章：jenkins部署maven專案構建後部署前執行shell指令碼 - https://blog.csdn.net/minebk/article/details/73294785
我這裡的Logtext是Buildcomplete
Script：
rmdir /q/s C:\nginx-1.14.0\html\my-demo
xcopy /y/e/i C:\Jenkins\workspace\my-demo\my-demo C:\nginx-1.14.0\html\my-demo複製生成好的檔案到Nginx的目錄下，路徑自行修改
3. 建立Github專案的Jenkins任務
Jenkins 不只能夠持續整合 svn 專案，Git 專案也是能夠的，這裡以 Github 上的專案為例：
其餘配置和上面一章同樣
這樣若是 github 有新的 push 請求，都會自動化部署到以前的伺服器上，能夠說很方便了。
試一試
配置好了咱們試一試，在剛剛 github 專案中隨便 commit 一版到 github ：
稍等片刻去本地 Jenkins 地址http://localhost:8080/job/vue-element-template/就能看到 Jenkins 已經在構建中了
50秒以後：
構建成功！構建用時 54 秒，如今訪問本地伺服器地址http://localhost:8282/vue-element-template，已經能看到編譯後的釋出版本啦~
若是你但願釋出的是測試版本，能夠自行修改構建後操做的 script