整合 Jenkins 來自動做前端效能測試

Jenkins

本文會從基本的 Jenkins 安裝、設定開始,然後再說明如何整合 Jenkins 來自動做前端效能測試。

Jenkins 安裝、設定

Step 1:在這裡依相對應的作業系統找下載連結。我是用 MAC 就選 macOS…

Jenkins download and deployment

Step 2:點進去以後選用 homebrew 下載 Jenkins brew install jenkins-lts

Step 3:接著啟動 Jenkins brew services start jenkins-lts,然後瀏覽器打開 http://localhost:8080 稍等一下就可看到準備畫面。

Starting Jenkins

備註,其他指令還有…

看到歡迎畫面,就表示成功了一半了?

讓我們繼續看下去

Step 4:輸入密碼,紅框表示密碼所在的檔案,趕快到這裡找出密碼然後輸入進去。

Welcome Jenkins

Step 5:選擇要安裝的 plugin,我選擇安裝預設的 plugin,也就是左邊藍框的「Install suggested plugins」。

Jenkins Install Plugins

開始安裝…有標記正在安裝的項目與進度真的滿貼心的。

Jenkins Start to Install Plugins

Step 6:裝完以後,建立 admin 帳號。

Jenkins 建立 admin 帳號

Step 7:設定 Jenkins URL,在這裡就用預設的 http://localhost:8080/

設定 Jenkins URL

完工!

Jenkins 設定完成

導到首頁,準備來建立一個簡單的任務吧。

Jenkins 設定首頁

準備工作

在建立新任務之前,有一些準備工作要做…由於稍等會用到 Node.js 環境,那就來裝一下吧。

到 Jenkins 安裝新的 plugin 入口「管理 Jenkins > 管理外掛程式」。

Jenkins 安裝新的 plugin 入口

從「可用的」直接搜尋 NodeJS,勾起來並按直接安裝按鈕。

Jenkins 安裝 Node.js

通常我會把這個勾起來,在安裝完後自動幫我重啟。

重啟 Jenkins

裝完以後要設定給 Jenkins 使用,因此要到 Manage Jenkins > Global Tool Configuration > Add NodeJS 指定 Node.js 要安裝的版本,可參考這裡

指定 Node.js 要安裝的版本

像我需要用到版本 10.18.1,因此我會這樣填寫欄位

這樣稍等在任務裡面就可以指定要建置的環境了。

執行一個簡單的任務:使用 Jenkins 來自動做前端效能測試

點「新增作業」。

Jenkins 新增作業

為這個 job 取個名字,並選擇 free style,點「OK」按鈕送出。

Jenkins 取名、選 free style

注意,如果之後新增的作業跟之前設定過的作業類似,下方「copy from」可把其他作業當成樣板喔,就不用從零開始了,很方便的。

在設定頁

選擇先前加入的 Node.js 版本

npm install
npm run perf-prod
cp reports/* $JENKINS_HOME/userContent/next-meal-fe-performance-testing-reports/*
echo 'http://localhost:8080/userContent/next-meal-fe-performance-testing-reports/lighthouse-report-index.html'

如上程式碼中,用到的這個 repo,是我幫自己的小專案所做的效能測試工具,說明可參考這篇文章

安裝 HTML Publisher,設定印出 summary,設定如下圖。

HTML Publisher

按下 Apply 按鈕就完成設定了,以上設定之後在「組態」都可以再編輯。

在列表點右邊的地球或在專案裡面點「立即建置」,就會開始排程、執行。

Jenkins 排程、執行

執行完成後,可在「Console Output」查看執行訊息。

Jenkins Console Output

HTML Publisher 幫我們產出報告了,點下圖連結。

HTML Publisher

點連結會連到 Lighthouse 所產生的報告喔。

HTML Publisher

或是到這個連結 http://localhost:8080/userContent/next-meal-fe-performance-testing-reports/lighthouse-report-index.html 就可以看到產出的報告目錄。

上述使用 HTML Publisher 產出報告的做法需要注意 js file 因權限被 block 的問題,所以後來我就改將產出的報告直接 push 到 repo 上,用產出的 GitHub Pages 來分享和閱讀結果。注意,我設定 GitHub Pages 要讀的檔案是放在 docs 資料夾。

也就是說,shell script 改為

npm install
npm run perf-prod
cp reports/* docs/
git add docs/
git commit -m "update reports by jenkins"

並設定「建置後動作」

還有設定其他建置後動作,像是寄通知信…因此跑完之後就會有封信告訴我測試跑完了沒、去哪裡看報告了!

打完收工

打完收工 d(`・∀・)b

疑難雜症


comments powered by Disqus