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

上午折騰了一下Jenkins持續集成，因爲公司使用本身搭建的svn服務器來進行代碼管理，所以這裏Jenkins是針對svn服務器來進行的配置，後面稍微介紹了下針對Github管理的項目的Jenkins配置

以前項目每次修改以後都須要本地npm run build一次手動發佈到服務器上方便測試和產品查看，有了Jenkins持續集成以後只要svn或者git提交以後就會自動打包，很方便，這次記錄以備後詢。

聲明：

1. 後面的項目地址與打包地址都是使用em-mes，自行修改；
2. 另外還有路徑等，根據本身狀況自行修改；

1. 安裝

1.1 安裝Nginx

能夠直接去官網下直接下載，解壓縮start nginx就可使了，經常使用命令：

start nginx  # 啓動
nginx -s reload  # 修改配置後從新加載生效
nginx -s reopen  # 從新打開日誌文件
nginx -t  # 配置文件檢測是否正確

教程網上很多，就不贅述了

1.2 安裝Jenkins

從官網下載文件安裝以後，我這裏安裝到C:\Jenkins，默認端口8080，這時候瀏覽器訪問localhost:8080就能訪問Jenkins首頁，這裏注意若是不安裝到C盤根目錄有些插件安裝會出錯

這裏會讓你去某個地方找一個初始密碼文件打開並填到下面的密碼框裏，驗證成功以後進入頁面，選擇Install suggested plugins推介安裝的插件

插件都安裝完成以後進入用戶登陸界面，設定用戶名、密碼及郵箱。

而後提示 Jenkins is ready！ → Start using Jenkins ~

注意這裏由於要使用node的命令來執行建立後操做，因此還須要安裝插件： NodeJS Plugin、Deploy to container、Github、Post build 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\em-mes
node -v
npm -v
cnpm i
npm run build

構建後操做

安裝插件 Post build task 後，能夠在 增長構建後操做步驟中選擇 Post build task 選項，增長構建後執行的script，具體能夠參考文章：jenkins部署maven項目構建後部署前執行shell腳本

我這裏的 Log text 是 Build complete

Script：

rmdir /q/s C:\nginx-1.14.0\html\em-mes
xcopy /y/e/i C:\Jenkins\workspace\em-mes\em-mes C:\nginx-1.14.0\html\em-mes

複製生成好的文件到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

---

網上的帖子大多深淺不一，甚至有些先後矛盾，在下的文章都是學習過程當中的總結，若是發現錯誤，歡迎留言指出~

參考：

1. 使用Jenkins自動編譯部署web應用
2. Jenkins+github 前端自動化部署
3. 配置Jenkins郵件通知
4. jenkins部署maven項目構建後部署前執行shell腳本

PS：歡迎你們關注個人公衆號【前端下午茶】，一塊兒加油吧~

另外能夠加入「前端下午茶交流羣」微信羣，長按識別下面二維碼便可加我好友，備註加羣，我拉你入羣～