微信小程序持續(xù)集成

發(fā)表時間：2021-4-22

發(fā)布人：葵宇科技

瀏覽次數(shù)：90

微信小程序的發(fā)布流程和常規(guī)web項目不太一樣，它比較依賴微信開發(fā)者工具和開發(fā)者，在我們迭代的過程中，暴露了一些問題，和一些可以改進的流程。所以我們想要合理地運用現(xiàn)有工具，減少重復(fù)工作，解決發(fā)布流程以及開發(fā)和產(chǎn)品環(huán)境差異的問題，提升研發(fā)效率。

問題背景

在沒有持續(xù)集成方案的情況下，我們常常會遇到幾個場景：

測試環(huán)節(jié)頻繁需要發(fā)布小程序，小程序項目眾多，發(fā)布操作繁瑣且工作內(nèi)容重復(fù)，造成研發(fā)思路打斷，時間的浪費。
測試同學(xué)無法自己構(gòu)建上傳測試版本的小程序，需要依賴開發(fā)同學(xué)提供測試二維碼。
由開發(fā)者在本地上傳的體驗版小程序可能會出現(xiàn)攜帶本地開發(fā)中的代碼、或未及時拉取分支造成的差異問題。

所以我們需要達到的目的是，研發(fā)只需提交代碼到git，剩下的時候都交由機器來完成，研發(fā)同學(xué)就可以專心地搬磚了。

知識儲備

持續(xù)集成

持續(xù)集成是一種軟件開發(fā)實踐，即團隊開發(fā)成員經(jīng)常集成他們的工作，通常每個成員每天至少集成一次，也就意味著每天可能會發(fā)生多次集成。每次集成都通過自動化的構(gòu)建（包括編譯，發(fā)布，自動化測試）來驗證，從而盡早地發(fā)現(xiàn)集成錯誤。（摘自百度百科）持續(xù)集成工具有很多，最常用的有Jenkins和Gitlab CI，解決方案都是十分成熟的。

微信開發(fā)者工具能力

決定微信小程序能夠?qū)崿F(xiàn)持續(xù)集成的原因，主要是微信開發(fā)者工具開放了http和命令行的方式來調(diào)用開發(fā)者工具。提供的接口有：1.啟動工具 2.登錄 3.預(yù)覽 4.自動預(yù)覽 5.上傳代碼 6.關(guān)閉開發(fā)者工具需要注意的是微信開發(fā)者工具只提供了window版本和macOS版本。 HTTP調(diào)用命令行調(diào)用

docker基本命令

新建并啟動容器

docker run [OPTIONS] IMAGE IMAGE是鏡像ID或鏡像名稱 OPTIONS說明： ?--name=“容器新名字”：為容器指定一個名稱 ?-d：后臺運行容器，并返回容器ID，也即啟動守護式容器 ?-i：以交互模式運行容器，通常與-t同時使用 ?-t：為容器重新分配一個偽輸入終端，通常與-i同時使用 -v：綁定掛載目錄 ?-P：隨機端口映射 ?-p：指定端口映射

進入容器

docker exec -it containerID /bin/bash

環(huán)境支持

1.搭建了Jenkins環(huán)境的機器 2.一臺Linux服務(wù)器我們有一臺部署測試環(huán)境node應(yīng)用的linux服務(wù)器，所以打算把打包環(huán)境搭在這臺機子上。

開始

基本流程： jenkins拉取最新代碼->構(gòu)建代碼->將工作空間的dist目錄打包代碼拷貝到linux服務(wù)器->在linux服務(wù)器執(zhí)行微信開發(fā)者工具發(fā)布腳本，上傳小程序至微信后臺->釘釘機器人推送發(fā)布結(jié)果。

1.開發(fā)者工具安裝

若使用windows或者mac作為打包機的話，直接下載微信官方的開發(fā)者工具安裝即可。由于官方并未提供linux版本的微信開發(fā)者工具，所以使用linux服務(wù)器作為打包機的話，需要對開發(fā)者工具做些改造，我們需要了解一些微信開發(fā)者工具的底層原理，這個可以作為額外的研究對象。這里我們已經(jīng)有了可以使用的微信開發(fā)工具的docker鏡像，可以在linux環(huán)境上使用。 WeChat WebDevTool in Docker(With LXDE)

下載鏡像并啟動容器： docker run -d --name wxdevtool -p 8080:80 -p 6666:9000 -v /var/opt/wxproject:/projects seancheung/wxdevtool:latest 容器內(nèi)開放了兩個端口，80端口是該鏡像提供的vnc端口，訪問該端口可以通過圖形化界面操作開發(fā)者工具。9000端口則是微信開發(fā)者工具HTTP 服務(wù)端口號的代理端口。HTTP 服務(wù)每次啟動的端口號并不固定，但會記錄在用戶目錄下，在容器內(nèi)會獲取每次的端口號，并使用nginx代理到9000端口，使用-p映射到我們的宿主機，即可在宿主環(huán)境下訪問。然后我們會將小程序的代碼放在/var/opt/wxproject目錄下，所以將該目錄掛載到容器的/``projects目錄，在容器內(nèi)部我們就能訪問到小程序代碼，并執(zhí)行相應(yīng)地上傳預(yù)覽操作。

2.命令調(diào)用

容器啟動后，可以通過命令行的方式和http方式來調(diào)用開發(fā)者工具。

命令行調(diào)用：

docker exec -t wxdevtool wxdevtool exec --login
復(fù)制代碼

http調(diào)用：

curl http://127.0.0.1:6666/login
復(fù)制代碼

兩種方式都能完成微信開發(fā)者工具的基本操作，根據(jù)實際的使用場景來選擇。經(jīng)過后續(xù)的實踐，http調(diào)用的方式會更適合我的場景，主要是因為 1.使用http方式更容易獲取調(diào)用的結(jié)果。我們需要在執(zhí)行上傳命令后，獲取返回結(jié)果，如若上傳失敗，需要將失敗原因同步到釘釘群，如若登錄狀態(tài)失效，我們會獲取最新的登錄二維碼發(fā)送到群里。http方式可以更好地滿足。 2.執(zhí)行命令行操作，若操作失敗，會自動退出shell進程，無法進行后面的操作，這對我們的CI操作的流程控制和條件判斷是不利的，而http請求無論成功失敗都不會阻塞或退出后續(xù)流程。當(dāng)然這也許是我的使用方式有問題，實際有應(yīng)該有其他解決方案，畢竟對shell操作我還不是非常在行。

3.jenkins job配置

我們已經(jīng)能成功使用http請求來完成開發(fā)者工具登錄，小程序上傳等操作，接下來需要結(jié)合到持續(xù)集成工具里。在開始配置之前，理下我們要的功能 1.代碼git分支可配置 2.打包版本可選（測試版和正式版），我們構(gòu)建上傳時，正式版和測試版主要是構(gòu)建命令不一樣，以及appId不一樣，其他都沒有區(qū)別，所以使用同一個job。 3.小程序版本號和備注信息可配置 4.代碼提交后自動構(gòu)建 5.釘釘機器人接入

創(chuàng)建一個自由風(fēng)格的項目

設(shè)置源碼管理，分支名使用構(gòu)建參數(shù)傳入

構(gòu)建環(huán)境配置

需要遠程訪問打包服務(wù)器，在這之前需要添加遠程服務(wù)器ssh credential，類型是ssh username with private。然后綁定private key和用戶名變量，透出參數(shù)供腳本使用。

jenkins腳本

下面進入重點的腳本部分，jenkins這邊配置的會非常簡單，主要執(zhí)行依賴安裝，代碼構(gòu)建，拷貝代碼至遠程服務(wù)器。而對開發(fā)者工具的調(diào)用則放在單獨的腳本文件中以供復(fù)用。以下是jenkins shell腳本，解讀也放在注釋中。

# set +x
#遠程服務(wù)器地址
REMOTE_HOST=XXX

#項目文件夾名稱
PROJECT="assistance"

#自定義方法 拷貝文件至遠程目錄
remote_scp()
{
  scp -rvi "$REMOTE_KEY" -o StrictHostKeyChecking=no "$1" "$REMOTE_USER"@"$REMOTE_HOST":"$2"
}

#自定義方法 遠程執(zhí)行服務(wù)器操作命令
remote_exec()
{
  ssh -i "$REMOTE_KEY" -o StrictHostKeyChecking=no "$REMOTE_USER"@"$REMOTE_HOST" "$@"
}

# 安裝依賴
echo "--installing dependencies--"
npm i --no-progress

# 根據(jù)環(huán)境參數(shù)構(gòu)建項目
echo "--building sources--"
case "$BUILD_TYPE" in
prod)
  npm run build:dist
  ;;
*)
  npm run build:test
  ;;
esac

# 先清空遠程項目目錄，再拷貝構(gòu)建后的代碼至遠程服務(wù)器打包目錄
echo "--updating remote source--"
remote_exec rm -rf /var/opt/wxproject/$PROJECT
remote_scp ./dist /var/opt/wxproject/$PROJECT

# 執(zhí)行上傳小程序腳本（腳本放在遠程服務(wù)器上，xcx命令為對應(yīng)腳本文件的自定義命令，關(guān)于自定義shell
命令可以查一下相關(guān)資料）
echo "--uploading package--"
sleep 2
remote_exec xcx $PROJECT $UPLOAD_VERSION $UPLOAD_DESC
復(fù)制代碼

開發(fā)者工具打包腳本

執(zhí)行的操作也是很簡單，打包腳本放在安裝開發(fā)者工具的機器上，所以使用http調(diào)用開發(fā)者工具的上傳接口就行了。使用upload接口，有以下參數(shù)

調(diào)用本機127.0.0.1下的6666端口（還記得吧，我們在啟動時將容器內(nèi)的開發(fā)者工具http服務(wù)9000端口映射到宿主機的6666端口）。幾個參數(shù)在調(diào)用時已經(jīng)傳入，分別對應(yīng)jenkins下的參數(shù) $P R O J E C T ， PROJECT，$ UPLOAD_VERSION，$UPLOAD_DESC。由于我們在發(fā)布成功后想要推送當(dāng)次的代碼包信息，所以使用infooutput參數(shù)將發(fā)布信息存儲下來，以便后面使用。

REQUEST_URL=http://127.0.0.1:6666
result=$(curl -H "Connection:keep-alive" $REQUEST_URL/upload\?projectpath\=/projects/$1\&
version\=$2\&desc\=$3\&infooutput\=/projects/$1/uploadInfo.json)
復(fù)制代碼

此次請求的結(jié)果在result中可以拿到，針對不同的結(jié)果會做不同的處理。開發(fā)者工具的登錄狀態(tài)隔一段時間是會過期的，所以此時發(fā)布失敗需要重新獲取登錄二維碼，并推送到釘釘工作群，讓我們及時去登錄。由于釘釘推送圖片，需要用網(wǎng)絡(luò)地址，所以這邊會將二維碼文件上傳至靜態(tài)資源服務(wù)器。

RELOGIN="需要重新登錄"
WEBHOOK="https://oapi.dingtalk.com/robot/send?access_token=XXX"
# 登錄二維碼cdn地址
QRCODEURL="https://XXXX"
# 圖片上傳接口
UPLOAD=""
send_ding() {
    curl $WEBHOOK -H 'Content-Type: application/json' -d '
        {
            "msgtype": "markdown",
            "markdown": {
                "title":"小程序發(fā)布失敗",
                "text": "小程序發(fā)布失敗\n\n >開發(fā)者工具需要重新登錄\n\n > ![screenshot]('$QRCODEURL')\n"
            }
        }'
}
if [ -n "$(echo ${result} | grep $RELOGIN )" ]; then 
    curl ${REQUEST_URL}/login\?format\=image\&qroutput\=/projects/login.png
    curl -F "folderName=wxdevtool" -F "file=@/var/opt/wxproject/login.png" $UPLOAD
    send_ding
    exit 1
fi
復(fù)制代碼

同上，發(fā)布成功后也可以推送本次發(fā)布的代碼包信息，我們已經(jīng)拿到本次上傳信息并存儲在uploadInfo.json文件中，只需使用cat命令拿到文件內(nèi)容摘取想要的信息即可，可能會需要對json進行處理，shell處理解析json并不是很方便，這里推薦使用jq這個包來處理json。