小程式的持續整合方案

PatrickSR發表於2018-07-31

半年前，有機會開始接觸微信小程式開發。卻因為只是接觸而並沒投入開發小程式的過程中，因此對很多小程式的細節並未有充分的理解，僅僅停留在瞭解類似的理論層面，比如mpvue修改了 Vue.js 的 runtime 和 compiler 實現了編譯及執行在原生小程式能力，比如原生小程式不支援npm包的使用及管理等，當然那時候的技術細節難點都是由非常給力的好同事解決消化了，所以也沒多去細究。

最近，我開始投入到完成的小程式開發迭代裡，卻發現一個頭痛的問題，如何準確並快速的的把小程式上傳去後臺，並讓測試人員進行測試。

問題

當遇到多個開發人員並行開發不同功能模組的同一小程式，往往就會遇到測試人員需要進行測試的時候，讓開發人員切換至測試分支後，進行構建編譯和上傳，最終把上傳後生產的二維碼提供出來進行測試使用。

若當前開發人員在認真coding，為某個功能正在奮鬥。突然被別人打斷並告訴你需要為他提供一個測試環境的二維碼….

因為為了這個二維碼，需要做的事情是：

git stash
git checkout branch
npm install
npm run build
點選“預覽”，生成二維碼，或點選上傳，更新體驗版

提供二維碼出去後，恢復剛剛的工作狀態

git checkout branch
git stash pop
npm install
npm run dev
不斷回想剛剛的開發思路

理想流程

上面所說的，只是一個常見的場景，但是思考一下，這個場景的重複率是否很高，重複這類操作的價值究竟有多少？

為了解決不讓開發人員為了一個測試環境的二維碼而痛苦，我嘗試把gitlab ci 和微信開發者工具的能力進行對接嘗試。

在理想的流程裡，開發人員只需要針對對應的分支進行合併或提交即可，無需關心如何把專案編譯及版本分發交付到測試或體驗人員手上。

接下來，對專案分支的管理不展開過多的說明，只設定develop分支是自動觸發小程式持續整合（安裝依賴、構建、上傳至體驗版本）的目標。

微信開發者工具

微信開發者工具有提供5個介面能力，並且提供cli 和 http方式呼叫：

命令列啟動工具
命令列登入
命令列提交預覽
命令列上傳程式碼
支援自動化測試

由於這次目標只需要把對應develop分支的程式碼上傳微信更新為體驗版本，所以微信開發者工具的介面能力最主要的是第4個（命令列上傳程式碼）。

如果是功能分支也需要建立預覽二維碼，可以通過第3個介面能力實現

cli和http的呼叫有什麼區別

cli方式

通過命令列呼叫安裝完成的工具可執行檔案，完成登入、預覽、上傳、自動化測試等操作。呼叫返回碼為 0 時代表正常，為 -1 時錯誤。命令列工具所在位置： macOS: <安裝路徑>/Contents/Resources/app.nw/bin/cli Windows: <安裝路徑>/cli.bat

http 方式

http 服務在工具啟動後自動開啟，HTTP 服務埠號在使用者目錄下記錄，可通過檢查使用者目錄、檢查使用者目錄下是否有埠檔案及嘗試連線來判斷工具是否安裝/啟動。埠號檔案位置： macOS : ~/Library/Application Support/微信web開發者工具/Default/.ide Windows : ~/AppData/Local/微信web開發者工具/User Data/Default/.ide

說白了，cli可以直接通過呼叫命令列工具，而http需要先尋找埠再進行介面呼叫，更適合跨機器呼叫。根據我當前情況，選擇了cli方式。

設定構建機器

公司的Mac mini 類似的機器暫時沒有資源，不得不回到Windows上進行構建機的設定。但是坑還是挺多，可能一方面也是對windows的不熟悉吧。最後還是選擇在Windows上裝vmware，在vmware上執行Mac os。

在Mac上面，安裝微信開發者工具，如何下載安裝就沒必要多說了。

接下來還需要安裝gitlab runner，gitlab runner是用來執行你定製的任務（jobs）並把結果返回給 GitLab。 GitLab Runner 配合GitLab CI（GitLab 內建的持續整合服務）協調完成任務。詳情可以檢視後面的引用文章。

在Mac上安裝gitlab runner最簡單的是用brew，當然另外下載應用包也是可以的

brew install gitlab-runner # 安裝gitlab runner
brew services start gitlab-runner # 開機自動執行
gitlab-runner start # 只需要直接執行（不需要開機自動執行）
複製程式碼

安裝完成後，可以進行runner的配置，主要需要提供gitlab url，專案倉庫的token，runner tags等，詳細資訊請參考Registering Runners | GitLab 中文文件

gitlab-runner register 
複製程式碼

編寫CI檔案

CI檔案編寫，最主要是專案根目錄上建立一個名為.gitlab-ci.yml，每一行的

stages:
  - build # 總體CI的過程，暫時只有一個job：build

before_script:
  - shopt -s expand_aliases # 開啟擴充套件aliases功能 issue https://gitlab.com/gitlab-org/gitlab-runner/issues/1083
  - alias wxcli="/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli" # 指定微信開發者工具cli命名為wxcli
  - type wxcli # 驗證wxcli命令是否存在
  - wxcli # 啟動微信開發者工具（其實好像有點多餘，因為如果當前沒啟動微信開發者工具，在wxcli -u的時候也會啟動）
  - source ~/.bash_aliases # 讀取特點的alias，比如配置的nvm，issue https://gitlab.com/gitlab-org/gitlab-runner/issues/1958 
  - npm install # 安裝依賴

# 測試環境
test-build:
  stage: build # 對應stages上的job名稱
  script:
    - npm run build
    - curr_commit_content=`git log -1 --pretty=format:%s` # 獲取最近提交的git內容
    - curr_version=`node -p "require('./package.json').version"` # 獲取package的版本號
    - curr_proj_path=`pwd` # 當前專案路徑
    - wxcli -u $curr_version@$curr_proj_path --upload-desc $curr_commit_content # 提交微信開發者
	  - # 上傳成功後，你可以嘗試傳送一些通知提醒大家可以去開啟新版本了，比如釘釘的webhook
  only:
    - develop
  tags:
    - xxx_mp

複製程式碼