微信小程序持續集成

時間  2021-08-15
標籤 html 前端 node linux nginx git github web docker shell 欄目 HTML 简体版
原文   原文鏈接

做者 | 週週醬html

本文寫於2019年12月，可能有部份內容過期。首發於週週醬我的博客，轉載請註明出處。前端

微信小程序的發佈流程和常規web項目不太同樣，它比較依賴微信開發者工具和開發者，在咱們迭代的過程當中，暴露了一些問題，和一些能夠改進的流程。因此咱們想要合理地運用現有工具，減小重複工做，解決發佈流程以及開發和產品環境差別的問題，提高研發效率。node

問題背景

在沒有持續集成方案的狀況下，咱們經常會遇到幾個場景：linux

  1. 測試環節頻繁須要發佈小程序，小程序項目衆多，發佈操做繁瑣且工做內容重複，形成研發思路打斷，時間的浪費。
  2. 測試同窗沒法本身構建上傳測試版本的小程序，須要依賴開發同窗提供測試二維碼。
  3. 由開發者在本地上傳的體驗版小程序可能會出現攜帶本地開發中的代碼、或未及時拉取分支形成的差別問題。

因此咱們須要達到的目的是，研發只需提交代碼到git，剩下的時候都交由機器來完成，研發同窗就能夠專心地搬磚了。nginx

知識儲備

持續集成

持續集成是一種軟件開發實踐，即團隊開發成員常常集成他們的工做，一般每一個成員天天至少集成一次，也就意味着天天可能會發生屢次集成。每次集成都經過自動化的構建（包括編譯，發佈，自動化測試）來驗證，從而儘早地發現集成錯誤。（摘自百度百科） 持續集成工具備不少，最經常使用的有Jenkins和Gitlab CI，解決方案都是十分紅熟的。git

微信開發者工具能力

決定微信小程序可以實現持續集成的緣由，主要是微信開發者工具開放了http和命令行的方式來調用開發者工具。提供的接口有：1.啓動工具 2.登陸 3.預覽 4.自動預覽 5.上傳代碼 6.關閉開發者工具 須要注意的是微信開發者工具只提供了window版本和macOS版本。 HTTP調用 命令行調用github

docker基本命令

  • 新建並啓動容器

docker run [OPTIONS] IMAGE IMAGE是鏡像ID或鏡像名稱 OPTIONS說明：  --name=「容器新名字」：爲容器指定一個名稱  -d：後臺運行容器，並返回容器ID，也即啓動守護式容器  -i：以交互模式運行容器，一般與-t同時使用  -t：爲容器從新分配一個僞輸入終端，一般與-i同時使用    -v：綁定掛載目錄  -P：隨機端口映射  -p：指定端口映射web

  • 進入容器

docker exec -it containerID /bin/bashdocker

環境支持

1.搭建了Jenkins環境的機器 2.一臺Linux服務器 咱們有一臺部署測試環境node應用的linux服務器，因此打算把打包環境搭在這臺機子上。shell

開始

微信小程序CI_看圖王.png

基本流程： jenkins拉取最新代碼->構建代碼->將工做空間的dist目錄打包代碼拷貝到linux服務器->在linux服務器執行微信開發者工具發佈腳本，上傳小程序至微信後臺->釘釘機器人推送發佈結果。

1.開發者工具安裝

若使用windows或者mac做爲打包機的話，直接下載微信官方的開發者工具安裝便可。因爲官方並未提供linux版本的微信開發者工具，因此使用linux服務器做爲打包機的話，須要對開發者工具作些改造，咱們須要瞭解一些微信開發者工具的底層原理，這個能夠做爲額外的研究對象。 這裏咱們已經有了可使用的微信開發工具的docker鏡像，能夠在linux環境上使用。  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 容器內開放了兩個端口，80端口是該鏡像提供的vnc端口，訪問該端口能夠經過圖形化界面操做開發者工具。9000端口則是微信開發者工具HTTP 服務端口號的代理端口。HTTP 服務每次啓動的端口號並不固定，但會記錄在用戶目錄下，在容器內會獲取每次的端口號，並使用nginx代理到9000端口，使用-p映射到咱們的宿主機，便可在宿主環境下訪問。而後咱們會將小程序的代碼放在/var/opt/wxproject目錄下，因此將該目錄掛載到容器的/``projects目錄，在容器內部咱們就能訪問到小程序代碼，並執行相應地上傳預覽操做。

2.命令調用

容器啓動後，能夠經過命令行的方式和http方式來調用開發者工具。

  • 命令行調用：
docker exec -t wxdevtool wxdevtool exec --login
複製代碼

微信圖片_20191218160918.jpg

  • http調用：    
curl http://127.0.0.1:6666/login
複製代碼

兩種方式都能完成微信開發者工具的基本操做，根據實際的使用場景來選擇。通過後續的實踐，http調用的方式會更適合個人場景，主要是由於 1.使用http方式更容易獲取調用的結果。咱們須要在執行上傳命令後，獲取返回結果，如若上傳失敗，須要將失敗緣由同步到釘釘羣，如若登陸狀態失效，咱們會獲取最新的登陸二維碼發送到羣裏。http方式能夠更好地知足。 2.執行命令行操做，若操做失敗，會自動退出shell進程，沒法進行後面的操做，這對咱們的CI操做的流程控制和條件判斷是不利的，而http請求不管成功失敗都不會阻塞或退出後續流程。固然這也許是個人使用方式有問題，實際有應該有其餘解決方案，畢竟對shell操做我還不是很是在行。

3.jenkins job配置

咱們已經能成功使用http請求來完成開發者工具登陸，小程序上傳等操做，接下來須要結合到持續集成工具裏。在開始配置以前，理下咱們要的功能 1.代碼git分支可配置 2.打包版本可選（測試版和正式版），咱們構建上傳時，正式版和測試版主要是構建命令不同，以及appId不同，其餘都沒有區別，因此使用同一個job。 3.小程序版本號和備註信息可配置 4.代碼提交後自動構建 5.釘釘機器人接入

  • 建立一個自由風格的項目

微信圖片_20191207160208.png

  • 設置源碼管理，分支名使用構建參數傳入

微信圖片_20191207160931.png

  • 構建環境配置

須要遠程訪問打包服務器，在這以前須要添加遠程服務器ssh credential，類型是ssh username with private。而後綁定private key和用戶名變量，透出參數供腳本使用。

微信圖片_20191207162134.png

  • jenkins腳本

下面進入重點的腳本部分，jenkins這邊配置的會很是簡單，主要執行依賴安裝，代碼構建，拷貝代碼至遠程服務器。而對開發者工具的調用則放在單獨的腳本文件中以供複用。如下是jenkins shell腳本，解讀也放在註釋中。

# set +x
#遠程服務器地址
REMOTE_HOST=XXX
 #項目文件夾名稱
PROJECT="assistance"
 #自定義方法 拷貝文件至遠程目錄
remote_scp()
{
  scp -rvi "$REMOTE_KEY" -o StrictHostKeyChecking=no "$1" "$REMOTE_USER"@"$REMOTE_HOST":"$2"
}
 #自定義方法 遠程執行服務器操做命令
remote_exec()
{
  ssh -i "$REMOTE_KEY" -o StrictHostKeyChecking=no "$REMOTE_USER"@"$REMOTE_HOST" "$@"
}
 # 安裝依賴
echo "--installing dependencies--"
npm i --no-progress
 # 根據環境參數構建項目
echo "--building sources--"
case "$BUILD_TYPE" in
prod)
  npm run build:dist
  ;;
*)
  npm run build:test
  ;;
esac
 # 先清空遠程項目目錄，再拷貝構建後的代碼至遠程服務器打包目錄
echo "--updating remote source--"
remote_exec rm -rf /var/opt/wxproject/$PROJECT
remote_scp ./dist /var/opt/wxproject/$PROJECT
 # 執行上傳小程序腳本（腳本放在遠程服務器上，xcx命令爲對應腳本文件的自定義命令，關於自定義shell
命令能夠查一下相關資料）
echo "--uploading package--"
sleep 2
remote_exec xcx $PROJECT $UPLOAD_VERSION $UPLOAD_DESC
複製代碼
  • 開發者工具打包腳本

執行的操做也是很簡單，打包腳本放在安裝開發者工具的機器上，因此使用http調用開發者工具的上傳接口就好了。使用upload接口，有如下參數

微信圖片_20191207164744.png

調用本機127.0.0.1下的6666端口（還記得吧，咱們在啓動時將容器內的開發者工具http服務9000端口映射到宿主機的6666端口）。幾個參數在調用時已經傳入，分別對應jenkins下的參數 P R O J E C T ， PROJECT， UPLOAD_VERSION，$UPLOAD_DESC。因爲咱們在發佈成功後想要推送當次的代碼包信息，因此使用infooutput參數將發佈信息存儲下來，以便後面使用。

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)
複製代碼

這次請求的結果在result中能夠拿到，針對不一樣的結果會作不一樣的處理。開發者工具的登陸狀態隔一段時間是會過時的，因此此時發佈失敗須要從新獲取登陸二維碼，並推送到釘釘工做羣，讓咱們及時去登陸。因爲釘釘推送圖片，須要用網絡地址，因此這邊會將二維碼文件上傳至靜態資源服務器。

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":"小程序發佈失敗",
                "text": "小程序發佈失敗\n\n >開發者工具須要從新登陸\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
複製代碼

同上，發佈成功後也能夠推送本次發佈的代碼包信息，咱們已經拿到本次上傳信息並存儲在uploadInfo.json文件中，只需使用cat命令拿到文件內容摘取想要的信息便可，可能會須要對json進行處理，shell處理解析json並非很方便，這裏推薦使用jq這個包來處理json。

  • 代碼提交後自動構建

使用gitlab Webhooks結合jenkins 構建觸發器。

  • 機器人推送結果

微信圖片_20191207173842.png

微信圖片_20191207173839.png

微信圖片_20191218160923.png

小結

到這裏已經完成微信小程序持續集成基本功能，理論上並不複雜，前端工程化的不少重複工做都應該交給自動化工具來完成。 如若本文有描述不當的地方，還請你們不吝賜教，在評論中指出。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程