微信小程序持续集成方案

主要是通过小程序提供的miniprogram-ci，然后结合gitlab-ci，docker实现

解决测试，开发频繁找开发编译二维码导致开发效率低，测试到生产因人为导致配置错误等问题

1.需要了解miniprogram-ci

npm install miniprogram-ci --save
miniprogram-ci 目前提供以下能力：
1.上传代码，对应小程序开发者工具的上传
2.预览代码，对应小程序开发者工具的预览
3.构建 npm，对应小程序开发者工具的: 菜单-工具-构建npm
4.上传云开发云函数代码，对应小程序开发者工具的上传云函数能力
5.代理，配置 miniprogram-ci 的网络请求代理方式
6.支持获取最近上传版本的 sourceMap
7.支持 node 脚本调用方式和 命令行 调用方式

要使用这些功能需要在微信公众平台-开发-开发设置，获取代码上传秘钥，以及配置IP白名单，这里需要注意一下IP白名单暂时只能配置两个，建议配置测试和生产两个服务器IP

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

可查看此篇：https://blog.youkuaiyun.com/qq_31930427/article/details/108849049

3.编写miniprogram-ci脚本，通过node方式调用

这里是通过在gitlab-ci中执行  node  ci.js脚本方式调用，可传环境参数进来对应环境配置，测试环境会生成预览图片在项目目录下，然后DOCKERFILE文件中通过COPY命令将图片考到docker容器内形成静态资源。

// 小程序自动打包上传和预览脚本

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: '开发环境二维码',

    test: '测试环境二维码',

    prod: '生产环境二维码'

}

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 缺少对应的环境参数！');

}

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.可编写通知脚本，结合企业微信机器人等进行发版通知等

#!/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="小程序开发环境二维码已更新，地址：http://47.115.170.133/mp/qrcode-test.jpg"

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

        contentStr="小程序测试环境二维码已更新，地址：https://tcmvc.kwmzy.com/mp/qrcode-test.jpg"

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

        contentStr="小程序$version已上传到体验版，备注：$desc"

        people="@all"

    else

        contentStr="sh notify.sh缺少环境参数！"

    fi

 

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

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

else

    contentStr="sh notify.sh缺少状态参数！"

fi

curl "$messageurl" \

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

    -d '

    {

            "msgtype": "text",

            "text": {

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

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

            }

    }'

5.设置gitlab日程表

因小程序二维码有时效限制，在gitlab项目的CICD的日程表中进行配置，

6.若因小程序CI导致内存不足，可采用定时调度进行清理

可在小程序项目的gitlab-ci配置中执行成功后执行docker rm $(docker ps -a | grep node | grep Exited | awk '{print $1}')命令进行指定清除，docker rm删除  括号中的docker ps进行筛选出容器ID  这里是筛选出 名称带node,然后状态已停止的容器，对应的清理镜像的 一样docker rmi $(docker images | grep test | awk '{print $3}')