我要投稿

小程序打包网站-基于SAAS原生小程序自动部署上传的方案初审

bendan520 网站程序

2023-08-21 0 7,987 百度已收录

进不了网站？换个网络试试！

今年我们还在开发一号系统的SAAS小程序。租户太多（一号乳业、肉联帮，未来可能还有一号土猪、一号海龟、天地一号巴拉巴拉）。是因为害怕发送错误的环境配置。花了三天时间捣鼓了陌陌小程序的自动部署方案（如有不准确之处还请强调）。那么废话就不多说了，直接进入明天的题外话。

一、背景

随着业务的快速发展，小程序的体积和逻辑也日益增大，以及各种工具和预编译命令的后期执行，使得小程序的部署越来越复杂和缓慢。，效率极低。而且，在复杂的发布操作过程中，如果稍有不慎或疏忽，生产环境就可能存在车祸隐患。

因此，我们团队去年分配了一部分时间和精力，很快制作了一套简单的小程序后端应用自动化部署方案，将原本复杂的操作汇聚到单台服务器上执行。开发者只需要关心自己业务代码的编译和提交，不需要过多关注代码测试后如何上传和提交审批。试图通过这套标准化的工程流程来有效提高工作效率和发布部署的基本稳定性。

2. 准备工作

环境：服务器

工具：Gitlab、微信开发者工具、Node相关、小程序-ci、cross-env

编码要求：有基本的Node脚本编写能力，熟悉Momo开发者的Cli命令调用的文档

三、实现思路 1、何时打包

通过发布平台实现业务代码的Git推送与打包服务器的互联（无需自带集成即可使用Gitlab Runner）。节目平台。

简单来说，就是通知你希望为你打包的服务器对你的本地推送代码及其相关附加信息的一次操作，最后服务器将执行结果反馈给你。

2. 如何包装

上一步中，服务器收到需要执行打包任务的信号后，开始从仓库拉取本次推送的代码，调用本地打包脚本，完成打包及后续操作。

微信为我们提供了一套比较完整的CI命令库，支持我们通过调用命令来实现这些日常的自动点击操作，比如打开工具、点击预览、上传代码、关闭工具等等。我们需要实现一次代码打包和在线部署，需要调用upload命令进行代码上传操作。

微信近期更新了命令库，增加和修改了一些API调用方法。当然，我们也需要同步进行一些代码修改，提取出名为miniprogram-ci的编译模块，以支持开发者独立使用小程序 -ci 进行小程序代码上传、预览等操作，这样的话，Linux机器也可以用于部署 applet 应用程序。

3、后续操作

从社区文章来看小程序打包网站，很多小程序开发团队都在做上述同样的事情，但我们团队始终认为，小程序上传成功后，需要打开浏览器扫码登录开发者。在后台，进入刚才提到的版本号，点击按钮，扫描二维码，即可完成试用版或评测版的选择。因为我们会使用Puppeteer来设置试用版/审核版的自动化（实际上是半自动化）脚本功能小程序打包网站，以进一步提高效率。因为我们是基于SASS的产品，需要发布的租户小程序太多了。手动发布是否需要太多点击？它们都成为了陌陌的第三方平台。通过平台代理的方式，为其旗下所有小程序、版本发布等提供业务支持。

四、具体步骤1、本地打包测试并安装miniprogram-ci

npm i miniprogram-ci -S

安装跨环境

npm i cross-env -S

因为我们是SAAS商城，所以根据不同的驻留环境，封装了不同的小程序。使用cross-env结合node可以自定义环境变量进行打包

准备上传密钥

只有小程序的管理员才有权限生成密钥文件。具体位置在小程序管理平台，开发->开发设置->小程序代码上传->小程序代码上传秘钥。将生成的密钥文件放入项目配置中。这里还可以启用ip白名单，指定的ip就可以执行上传脚本（在我们的解决方案中，是发布平台所在机器的ip）。

ci.js 发布脚本

在项目根目录下创建ci.js文件

const ci = require('miniprogram-ci')
const fs = require('fs');
const merchants = require('./config/merchant');
var version = '2.2.2.3'
var desc = 'desc'
const mid = process.env.NODE_ENV
// const version = process.env.VERSION

console.log('version',version)

//根据不同环境租户命令来创建mid
let writeContent = `export const mid = '${mid}'`
fs.writeFile('./config/mid.js',writeContent,function(err){
    console.log('write file error',err);
})

//创建成功后获取对应租户信息
const merchant = merchants[mid]

// appid 和privateKeyPath需要设置下
const project = new ci.Project({
  appid: merchant.appid,
  type: 'miniProgram',
  projectPath: './',
  privateKeyPath: `./config/key/${mid}.key`,
  ignores: ['node_modules/**/*']
})

/** 构建npm */
async function packNpm() {
  // 在有需要的时候构建npm
  const warning = await ci.packNpm(project, {
    ignores: ['pack_npm_ignore_list'],
    reporter: (infos) => { console.log(infos) }
  })
  console.warn(warning)
}

/** 上传 */
async function upload({ version = '0.0.0', desc = 'test', robot = 1 }) {
  await ci.upload({
    project,
    version: mid,
    desc: `发布${mid}租户`,
    setting: {
      es7: true,
      minify: true,
      autoPrefixWXSS: true
    },
    onProgressUpdate: console.log
  })
}

async function done () {
  await packNpm()
  await upload({ version, desc })
}

done()

写脚本

//package.json
  "scripts": {
    "9t9fw": "cross-env NODE_ENV=9t9fw node ./ci.js",
  },

运行脚本

npm run 9t9fw

在微信公众平台上可以查到，ci机器人已经帮我们搭建并上传成功了。当然，如果只是本地测试，不创建也可以上传

2. 部署平台集成版本

当部署平台点击发布时，也会让服务器执行shell脚本处理相应的命令，将最新的代码仓库发送到服务器进行打包、构建和上传。当然目前还没有自集成的部署平台可以使用gitlab ci等进行部署，原理就是执行相应的服务器打包。

对应执行的shell脚本

PROJECT_NAME=商家端小程序

#项目文件夹
PROJECT_FOLDER=XXX
#项目仓库
PROJECT_REPO=XXX

#待发布分支
BRANCH_TO_RELEASE=cl
#工作目录
WORKSPACE=XXX


echo "${PROJECT_NAME}项目上传中..."

cd ${WORKSPACE}
if [ ! -d ${PROJECT_FOLDER} ]; then
        echo "项目不存在，创建中..."
        git clone -b ${BRANCH_TO_RELEASE} ${PROJECT_REPO}
        if [ $? -ne 0 ]; then
                echo "项目创建异常"
                exit 1
        fi
        echo "项目创建成功"
fi

cd ${PROJECT_FOLDER}

#更新ERP项目
git pull origin ${BRANCH_TO_RELEASE}
echo "项目更新成功"

#编译项目
echo "开始上传项目..."
cnpm install

cnpm run 9t9fw

if [ $? -ne 0 ]; then
        echo "编译项目异常"
        exit 1
fi

echo "项目上传成功"