使用Jenkins持續整合前端專案並自動化部署到Nginx伺服器

SHERlocked93發表於2019-03-03

上午折騰了一下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盤根目錄有些外掛安裝會出錯

使用Jenkins持續整合前端專案並自動化部署到Nginx伺服器

這裡會讓你去某個地方找一個初始密碼檔案開啟並填到下面的密碼框裡,驗證成功之後進入頁面,選擇Install suggested plugins推介安裝的外掛

使用Jenkins持續整合前端專案並自動化部署到Nginx伺服器

外掛都安裝完成之後進入使用者登入介面,設定使用者名稱、密碼及郵箱。

然後提示 Jenkins is ready! → Start using Jenkins ~

使用Jenkins持續整合前端專案並自動化部署到Nginx伺服器

注意這裡因為要使用node的命令來執行建立後操作,所以還需要安裝外掛:NodeJS PluginDeploy to containerGithubPost build task

這裡順便記錄一下啟動和關閉Jenkins服務的命令列:

net start jenkins            // 啟動Jenkins服務
net stop jenkins             // 停止Jenkins服務
複製程式碼

2. 建立svn專案的Jenkins任務

2.1 新建

左邊欄新建一個任務,輸入一個任務名稱,這裡隨便寫一個

使用Jenkins持續整合前端專案並自動化部署到Nginx伺服器

2.2 配置

General

這裡才是重頭戲,進入剛剛建立的任務的配置頁面的General

使用Jenkins持續整合前端專案並自動化部署到Nginx伺服器

丟棄舊的構建就是檢測到新的版本之後把舊版本的構建刪除

原始碼管理

這裡採用的是svn來管理程式碼,

使用Jenkins持續整合前端專案並自動化部署到Nginx伺服器

構建觸發器

使用Jenkins持續整合前端專案並自動化部署到Nginx伺服器

這裡的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 textBuild 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持續整合前端專案並自動化部署到Nginx伺服器

稍等片刻去本地Jenkins地址http://localhost:8080/job/vue-element-template/就能看到Jenkins已經在構建中了

使用Jenkins持續整合前端專案並自動化部署到Nginx伺服器

50秒之後

使用Jenkins持續整合前端專案並自動化部署到Nginx伺服器

構建成功!構建用時54秒,現在訪問本地地址http://localhost:8282/vue-element-template,已經能看到編譯後的釋出版本啦~如果你希望釋出的是測試版本,可以自行修改構建後操作的script


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

參考:

  1. 使用Jenkins自動編譯部署web應用
  2. Jenkins+github 前端自動化部署
  3. 配置Jenkins郵件通知
  4. jenkins部署maven專案構建後部署前執行shell指令碼

PS:歡迎大家關注我的公眾號【前端下午茶】,一起加油吧~

使用Jenkins持續整合前端專案並自動化部署到Nginx伺服器

相關文章