小程序的持續集成方案

時間 2019-11-07

標籤程序持續集成方案简体版

原文原文鏈接

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

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

問題

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

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

由於爲了這個二維碼，須要作的事情是：github

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

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

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

理想流程

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

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

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

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

微信開發者工具

微信開發者工具備提供5個接口能力，而且提供cli 和 http方式調用：json

命令行啓動工具
命令行登陸
命令行提交預覽
命令行上傳代碼
支持自動化測試

因爲此次目標只須要把對應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

複製代碼