使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

allan_hx發表於2019-12-25

以前我們在釋出專案時都要手動進行打包,然後使用FTP或者其他方式同步到伺服器上,這種方式非常繁瑣和低效,而且容易出現環境釋出錯誤,為了解決這些問題我們可以使用jenkins來進行自動化釋出。

我使用的系統是CentOS 7.5,在安裝環境的時候其他系統會有區別。

jenkins釋出工作流程

  • 本地push程式碼
  • 服務端jenkins拉取程式碼
  • 將程式碼移到web服務工作目錄
  • 傳送郵件通知

準備

  • git倉庫(可以是gitlab,github,碼雲或者其他帶web hooks的git倉庫)
  • 伺服器一臺(windows或者Linux都可以,本文使用的是CentOS 7.5 64位)
  • 伺服器安裝git,java,jenkins

安裝java

yum install java
複製程式碼

驗證是否安裝成功

java -version
複製程式碼

如果有版本號輸出表示安裝成功

安裝git

yum install git
複製程式碼

驗證是否安裝成功

git --version
複製程式碼

安裝jenkins

提示:作業系統不一樣下載的包也不一樣,安裝命令也不一樣

  • 開啟jenkins.io/zh/download…,選擇對應系統的安裝檔案

  • 安裝 (安裝包目錄下執行)

    sudo rpm -ih jenkins-2.121.3-1.1.noarch.rpm

  • 啟動

    service jenkins start

如果啟動成功,我們在瀏覽器輸入http://伺服器地址:8080就能訪問到入門頁面了,如果不能訪問檢查8080埠是否被佔用。

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

在伺服器上輸入cat /var/lib/jenkins/secrets/initialAdminPassword檢視管理員密碼,輸入密碼後點選繼續。

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

然後選擇安裝推薦的外掛等待安裝完成

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

安裝完成後我們點選右下角使用admin賬號繼續

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

然後點選儲存並完成

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

點選開始使用 jenkins就會跳轉到首頁

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

建立任務

點選開始建立一個新任務,輸入名稱,選擇構建一個自由風格的軟體專案,然後點選確定

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

配置原始碼管理

  • 點選原始碼管理
  • 選擇GIT
  • Repository URL填寫我們git倉庫地址

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

  • Branches to build輸入我們需要拉取的分支

構建配置

git拉取完成後,我們需要將程式碼複製到web服務的目錄下,這裡我們可以使用sshell命令來進行操作

  • 點選構建
  • 點選增加構建步驟,選擇執行sshell

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

  • 輸入複製檔案命令 cp -r ./dist/* /var/project/test (注意路徑和資料夾名稱,需要改成你專案的路徑)

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

然後點選儲存,現在我們可以點選左邊選單中的立即構建來發布專案。

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

web hooks 自動釋出

到此我們構建就配置好了,但是還是需要我們提交程式碼後開啟jenkins點選構建,接下來我們實現git push程式碼之後自動進行構建

安裝Generic Webhook Trigger外掛

  • 回到首頁,點選系統管理 -> 外掛管理

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

  • 點選可選外掛,搜尋Generic Webhook Trigger,然後點選直接安裝

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

  • 安裝完成後返回首頁,點選專案名稱,選擇配置

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

  • 點選構建觸發器,選擇Generic Webhook Trigger

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

  • Token處填寫一個token (不能與其他專案token重複),然後點選儲存

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

git配置hooks(github新增方法類似,在設定中新增)

  • 開啟git專案頁面,選擇配置 -> WebHook -> 新增

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

  • URL處填寫地址你的jenkins伺服器地址:埠/generic-webhook-trigger/invoke?配置的token,例如我的地址就是http://192.168.3.18:8080/generic-webhook-trigger/invoke?token=test-project
  • 點選儲存,後續只要push程式碼,jenkins便會自動釋出

郵件提醒

構建完成後將結果和log傳送到郵箱,以qq郵箱為例,其他郵箱類似

  • jenkins外掛中搜尋Email Extension Plugin安裝 (如果搜尋不到就去以安裝裡面搜尋下是否已經安裝了)
  • 安裝完成後,回到首頁,點選系統管理 -> 系統配置

使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

  • 系統管理員郵件地址:填寫配置的郵箱地址

  • 找到Extended E-mail Notification選項,填寫以下配置

    • SMTP server:郵箱的SMTP地址,qq郵箱是smtp.qq.com 163郵箱是 smtp.163.com,其他郵箱可以自行查詢
    • Default user E-mail suffix:郵箱字尾
    • 點選右下角高階,填寫下圖配置

    使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

    使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

    配置中User Name為你的郵箱,Password為你的smtp密碼,可以去郵箱設定中檢視

    使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

    • Default Content Type:選擇HTML(text/html)
    • Default Recipients:填寫預設收件人
  • 配置完成後返回專案設定,選擇構建後操作,點選增加構建後操作步驟,選擇Editable Email Notification

  • Project Recipient List選項填寫你通知的郵箱

  • Attach Build Log選擇Attach Build Log,傳送郵件的時候附帶構建日誌

  • 點選Add Trigger選擇Always然後點選儲存

    使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

    使用Jenkins實現前端自動化釋出和通知,讓你的釋出只需要git push

  • 配置完成後點選儲存,然後點選立即構建就可以測試我們的郵件通知是否能傳送成功

結尾

到此我們就完成了jenkins的自動化釋出,但是這還只是簡單的配置,後續我還會繼續寫如何釋出到遠端伺服器正是環境和測試環境區分, nodegolang的構建釋出。

ps: flutter-weui是使用flutter實現的一個weui元件庫,支援安卓,ios(web和桌面也可以)現在已經實現了將近30多個元件,喜歡的賞賜個Star✨✨

相關文章