主要是通過小程序提供的miniprogram-ci，然后結合gitlab-ci，docker實現(xiàn)

解決測試，開發(fā)頻繁找開發(fā)編譯二維碼導致開發(fā)效率低，測試到生產(chǎn)因人為導致配置錯誤等問題

1.需要了解miniprogram-ci

npm install miniprogram-ci --save
miniprogram-ci 目前提供以下能力：
1.上傳代碼，對應小程序開發(fā)者工具的上傳
2.預覽代碼，對應小程序開發(fā)者工具的預覽
3.構建 npm，對應小程序開發(fā)者工具的: 菜單-工具-構建npm
4.上傳云開發(fā)云函數(shù)代碼，對應小程序開發(fā)者工具的上傳云函數(shù)能力
5.代理，配置 miniprogram-ci 的網(wǎng)絡請求代理方式
6.支持獲取最近上傳版本的 sourceMap
7.支持 node 腳本調(diào)用方式和 命令行 調(diào)用方式

要使用這些功能需要在微信公眾平臺-開發(fā)-開發(fā)設置，獲取代碼上傳秘鑰，以及配置IP白名單，這里需要注意一下IP白名單暫時只能配置兩個，建議配置測試和生產(chǎn)兩個服務器IP

2.需要了解前端項目部署方式

可查看此篇：https://blog.csdn.net/qq_31930427/article/details/108849049

3.編寫miniprogram-ci腳本，通過node方式調(diào)用

這里是通過在gitlab-ci中執(zhí)行 node ci.js腳本方式調(diào)用，可傳環(huán)境參數(shù)進來對應環(huán)境配置，測試環(huán)境會生成預覽圖片在項目目錄下，然后DOCKERFILE文件中通過COPY命令將圖片考到docker容器內(nèi)形成靜態(tài)資源。

// 小程序自動打包上傳和預覽腳本

const mpenv = {

dev: `import configEnv from './config-dev.js'\n//import configEnv from './config-test.js'\n// import configEnv from './config-prod.js'\nconst config = configEnv\nexport default config`,

test: `//import configEnv from './config-dev.js'\nimport configEnv from './config-test.js'\n// import configEnv from './config-prod.js'\nconst config = configEnv\nexport default config`,

prod: `//import configEnv from './config-dev.js'\n//import configEnv from './config-test.js'\nimport configEnv from './config-prod.js'\nconst config = configEnv\nexport default config`

}

const dockerfile = {

dev: `FROM nginx:alpine\n#COPY ./qrcode-test.jpg /var/www/html/\nCOPY ./mp.conf /etc/nginx/conf.d/\nRUN rm /etc/nginx/conf.d/default.conf\nEXPOSE 80\nCMD ["nginx","-g","daemon off;"]`,

test: `FROM nginx:alpine\nCOPY ./qrcode-test.jpg /var/www/html/\nCOPY ./mp.conf /etc/nginx/conf.d/\nRUN rm /etc/nginx/conf.d/default.conf\nEXPOSE 80\nCMD ["nginx","-g","daemon off;"]`,

prod: `FROM nginx:alpine\n#COPY ./qrcode-test.jpg /var/www/html/\nCOPY ./mp.conf /etc/nginx/conf.d/\nRUN rm /etc/nginx/conf.d/default.conf\nEXPOSE 80\nCMD ["nginx","-g","daemon off;"]`

}

const mpPreviewDesc = {

dev: '開發(fā)環(huán)境二維碼',

test: '測試環(huán)境二維碼',

prod: '生產(chǎn)環(huán)境二維碼'

}

const miniprogramRoot = './'

const ci = require('miniprogram-ci')

const projectConfig = require('./project.config.json')

const versionConfig = require('./version.js')

const args = process.argv.splice(2)

if (args.length == 0) {

throw new Error('node ci.js 缺少對應的環(huán)境參數(shù)！');

}

const fs = require("fs")

try {

fs.writeFileSync('./config.js', mpenv[args[0]])

fs.writeFileSync('./Dockerfile', dockerfile[args[0]])

} catch (error) {

throw error;

}

// new ci實例

const project = new ci.Project({

appid: projectConfig.appid,

type: 'miniProgram',

projectPath: miniprogramRoot,

privateKeyPath: './ci-private.key',

ignores: ['node_modules/**/*'],

});

/** 上傳 */

async function upload({version, desc}) {

await ci.upload({

project,

version,

desc,

setting: {

es6: true,

minify: true,

autoPrefixWXSS: true

}

})

}

/** 預覽 */

async function preview({desc}) {

await ci.preview({

project,

desc,

setting: {

es6: true,

minify: true,

autoPrefixWXSS: true

},

qrcodeFormat: 'image',

qrcodeOutputDest: './qrcode-test.jpg'

})

}

if (args[0] == 'test') {

preview({desc: mpPreviewDesc[args[0]]})

}

if (args[0] == 'prod') {

upload({version: versionConfig.version, desc: versionConfig.desc})

}

4.可編寫通知腳本，結合企業(yè)微信機器人等進行發(fā)版通知等

#!/bin/bash

messageurl="xxx"

version=`grep 'version:' ./version.js | sed -r 's/.*'\''(.+)'\''.*/\1/'`

desc=`grep 'desc:' ./version.js | sed -r 's/.*'\''(.+)'\''.*/\1/'`

contentStr=""

people=""

if [ "$1" == "success" ];then

if [ "$2" == "dev" ];then

contentStr="小程序開發(fā)環(huán)境二維碼已更新，地址：http://47.115.170.133/mp/qrcode-test.jpg"

elif [ "$2" == "test" ];then

contentStr="小程序測試環(huán)境二維碼已更新，地址：https://tcmvc.kwmzy.com/mp/qrcode-test.jpg"

elif [ "$2" == "prod" ];then

contentStr="小程序$version已上傳到體驗版，備注：$desc"

people="@all"

else

contentStr="sh notify.sh缺少環(huán)境參數(shù)！"

fi

elif [ "$1" == "fail" ];then

contentStr="小程序CI失敗，請前去查看原因！"

else

contentStr="sh notify.sh缺少狀態(tài)參數(shù)！"

fi

curl "$messageurl" \

-H 'Content-Type: application/json' \

-d '

{

"msgtype": "text",

"text": {

"content": "'"$contentStr"'",

"mentioned_list":["'"$people"'"]

}

}'

5.設置gitlab日程表

因小程序二維碼有時效限制，在gitlab項目的CICD的日程表中進行配置，

6.若因小程序CI導致內(nèi)存不足，可采用定時調(diào)度進行清理

可在小程序項目的gitlab-ci配置中執(zhí)行成功后執(zhí)行docker rm $(docker ps -a | grep node | grep Exited | awk '{print $1}')命令進行指定清除，docker rm刪除 括號中的docker ps進行篩選出容器ID 這里是篩選出 名稱帶node,然后狀態(tài)已停止的容器，對應的清理鏡像的 一樣docker rmi $(docker images | grep test | awk '{print $3}')