小程序自動化部署方案在好大夫的落地

背靠微信這個巨大流量池，小程序以其輕量級，即用即走的特點贏得了廣大用戶的青睞，目前好大夫已經有了十多個小程序，如何在保證質量的前提下讓小程序的開發、測試、上線流程高效、快捷的運轉是每一個開發者應該考慮的問題。本文主要介紹小程序自動化部署方案在好大夫的開展及落地。

初期小程序測試上線流程及問題

初期流程依賴於手工操作，一不留神就會出現紕漏：

1、效率低：小程序提測時將代碼包給測試，測試各自開啓開發者工具、配置參數運行，此過程中約10分鐘已被浪費掉；

2、易出錯：人爲改環境變量+上傳代碼包，上線完後手動合master到開發分支，出現過漏改及漏合分支的情況，也是此契機使我們反思需要做一套機器自動化機制；

3、流程複雜：測試同學需熟悉開發者工具、及代碼中參數配置過程，手動運行。

好大夫小程序自動化部署方案

好大夫自動化部署方案實現開發測試可視化操作，關鍵流程程序自動執行，複雜流程實現一鍵操作：

1、可視化操作：開發測試同學只需在運維平臺通過交互式的操作，即可完成整個部署過程，有效的提高了工作效率並降低了學習成本；

2、自動化配置：上傳小程序只在運維平臺上進行，機器自動調整線上參數並上傳（避免人爲因素出錯），發佈完成後自動合併代碼到master分支；

3、一鍵操作：測試前自動檢測是否合併過master分支，在好大夫運維平臺（以下簡稱運維平臺）直接生成二維碼，測試同學真機掃碼測試，過程約2分鐘，簡單高效。

使用效果

3.1 發佈測試版

測試同學只需要在好大夫運維平臺通過可視化操作配置相應的測試環境域名（核心代碼見下文），一鍵生成小程序二維碼，此外也滿足測試推送入口、公衆號菜單跳轉等需求。

3.2 發佈體驗版

線下通過後，一鍵上傳小程序包到微信公衆平臺，此時機器會自動配置線上參數，用程序代替手工操作，有效的避免了由於人的因素而出現問題的可能。

技術方案

目前微信開發者工具只有 windows 版本以及 mac 版本，公司內用4臺MAC MINI作爲小程序打包機，每臺機器各自運行同樣node服務，開發者工具開啓服務端口(設置-安全-服務端口)後支持http及命令行調用，公司使用的是命令行模式。執行修改參數、生成預覽碼、上傳小程序等。

4.1 生成測試預覽碼

//更改ENV爲TEST
let cmdENV = `sed -i "" s#"const ENV = [^;]*"#"const ENV = '${args.ENV}'"# config.js`;
//更改小程序appid
let testAppid = args.minipAppid || wxMinipPrdParams.appid;
cmdResult += `sed -i "" s#'"appid[^,]*"'#'"appid": "${testAppid}"'# project.config.json && `;
// 更改小程序版本號
cmdResult += `sed -i "" s#"const APP_VER[^;]*"#"const APP_VER = '${args.VER}'"# config.js && `;
//更改其他公衆號相關參數-略
//生成預覽
let sourcePath = `${CODE_PATH}${wxMinip}/${opsCode}`;
let condition = ` --compile-condition '{}'`;
if (pagePath) {
    let path = pagePath.split('?')[0];
    let query = pagePath.split('?')[1] ? pagePath.split('?')[1] : '';
    condition = ` --compile-condition '{"pathName":"${path}","query":"${query}"}'`;
}
//
let qroutPath = `${CODE_PATH}${wxMinip}/qrout${opsCode}.txt`;
let qroutCmd = `--preview-qr-output base64@${qroutPath}`;
let preview = await cmd(`sh ${CLI_PATH} -p ${sourcePath} ${qroutCmd} ${condition}`);

4.2 上傳小程序

//更改ENV爲線上
let cmdENV = `sed -i "" s#"const ENV = [^;]*"#"const ENV = '${args.ENV}'"# config.js`;
//更改小程序appid
let testAppid = args.minipAppid || wxMinipPrdParams.appid;
cmdResult += `sed -i "" s#'"appid[^,]*"'#'"appid": "${testAppid}"'# project.config.json && `;
// 更改小程序版本號
cmdResult += `sed -i "" s#"const APP_VER[^;]*"#"const APP_VER = '${args.VER}'"# config.js && `;

//上傳小程序
let upoutPath = `${CODE_PATH}${wxMinip}/upout${opsCode}.txt`;
let upResult = await cmd(`sh ${CLI_PATH} -u ${version}@${sourcePath} --upload-desc '${desc}' --upload-info-output ${upoutPath}`);

4.3 解決機器定期退出微信開發者的問題

微信開發者工具約7-8天會退出登錄狀態(最近登錄保留時間可能長了些)，通過發佈測試時，若感知到機器已退登，則企業微信上@該機器上開發者進行掃碼重登。此時告知測試同學更換其他打包機器。後續優化爲不讓用戶感知，自動切換下一臺機器進行打包。

if(preview.appedLogs.indexOf(`需要重新登錄`) > -1){
      preview.appedLogs+= '\n已連環call通知相關大神重登，可更換測試機或稍候重打';
      resErr(ctx, preview.appedLogs);
      notify_login(qroutPath);
}

const machineName = require("os").hostname();
function notify_login(qroutPath) {
    let cmd = `sh ${CLI_PATH} -l --login-qr-output base64@${qroutPath}`;
    cp.exec(cmd, function (err, stdout, stderr) {
    });
    setTimeout(() => {
      //調用企業微信api發送消息，@某人
        sendTextToUser(USER_LIST[machineName]);
        sendImg(fsObj.readFile(qroutPath), qroutPath);
    }, 10000);
}

4.4 解決生成小程序碼接口超時

近一月有測試同學反饋生成二維碼失敗，報錯提示爲 socket hang up，經查是生成預覽碼是會請求servicewechat.com。該域名在內網偶爾超時。基於徹底方案的考慮，單獨使用dnsmasq 搭建了一臺dns服務器，通過以下方式解決：

1、優先通過指定servicewechat.com的dns解決

2、若1不理想，通過定期更新dns服務上該域名host地址解決

3、其他域名最後走內網dns地址

目前第一步已解決，未出現超時問題。

resolv-file=/usr/local/etc/resolv.dnsmasq.conf
strict-order
server=/servicewechat.com/114.114.114.114
listen-address=127.0.0.1
listen-address=`內網ip`
no-hosts
addn-hosts=/usr/local/etc/dnsmasq.hosts
conf-dir=/usr/local/etc/dnsmasq.d

未來規劃

5.1 加快打包速度

每次拉取代碼會刪除之前目錄，重新拉取，所以不會走編譯緩存，每次都是從0開始進行打包，後續進行保留編譯緩存，只重新修改配置文件打包。

5.2 無需手動選擇打包機器

目前測試同學需要在4臺機器中手動選擇，後期固定爲一臺做分發機，根據其appId最近打包過的機器、打包機器是否忙碌，是否已退出登錄進行自動分配，使用戶體驗更流暢，同時考慮使用新出的miniprogram-ci 來進行預覽上傳。

結語

該方案可能僅僅只是提供了一個思路，在實際執行的過程中開發者更需要考慮公司的具體情況，與已有工具的結合，探索出適應本公司的定製化方案，纔會事半功倍。

同時目前該方案在好大夫已運行近1年，也在不停迭代優化，實現了小程序的部署發版流程易用無誤的目標，同時內部也不斷有新的便捷工具出現。

作者介紹：

崔桂祥：好大夫前端架構師，專注混合開發、自動化部署流程等前端基礎建設，目前任醫藥事業部前端技術負責人。