前端 Jenkins 自動化部署


這兩天折騰了一下 Jenkins 持續集成,由於公司使用自己搭建的 svn 服務器來進行代碼管理,因此這里 Jenkins 是針對 svn 服務器來進行的配置,Git 配置基本一致,后面也介紹了下針對 Github 管理的項目的 Jenkins 配置

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

聲明:

  1. 后面的項目地址與打包地址都是使用 my-demo,自行修改;

  2. 另外還有路徑等,根據自己情況自行修改;

1. 安裝

1.1 安裝 Nginx

可以直接去官網下直接下載,解壓縮 start nginx就可以使了,常用命令:

start nginx # 啟動

nginx -s reload # 修改配置后重新加載生效

nginx -s reopen # 重新打開日志文件

nginx -t # 配置文件檢測是否正確

 

1.2 安裝Jenkins

 

 

 

從官網下載文件安裝之后,我這里安裝到 C:\Jenkins(Mac 不用在意),默認端口 8080,這時候瀏覽器訪問 localhost:8080 就能訪問 Jenkins 首頁,這里注意如果不安裝到 C 盤根目錄有些插件安裝會出錯

這里會讓你去某個地方找一個初始密碼文件打開並填到下面的密碼框里,驗證成功之后進入頁面,選擇 Installsuggested plugins 推介安裝的插件

 

 

插件都安裝完成之后進入用戶登錄界面,設定用戶名、密碼及郵箱。

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

 

 

注意這里因為要使用node的命令來執行創建后操作,所以還需要安裝插件:NodeJSPluginDeployto containerGithubPostbuild task

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

  1. net start jenkins // 啟動Jenkins服務

  2. 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

我這里的 LogtextBuildcomplete

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


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

參考:

  1. 使用Jenkins自動編譯部署web應用

  2. Jenkins+github 前端自動化部署

  3. 配置Jenkins郵件通知

  4. jenkins部署maven項目構建后部署前執行shell腳本

 

 文章來源: SHERlocked93


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM