前言

本文的应用场景主要以小程序为例，不过其他项目也可以参考前面ci/cd的配置自己定制。

为什么要做小程序的自动化？

主要目的有两个

• 去除开发和测试时的重复提交代码这个操作，提升开发体验
• 避免在小程序提审和上线时，由于人为操作的失误带来线上事故

在接入CI/CD前有遭遇哪些问题

• 开发体验差。每次修复完bug，都需要把小程序重新提到体验版，会经历以下步骤：

  • 把自己的代码合并到测试分支，拉取别人代码合并
  • 我们使用的是uni-app，需要执行run build的命令，再等待几十秒
  • 打开另一个开发工具，找到编译好的目录，打开，再等待十几秒，填写小程序上传时的相关备注，上传完成
  • 打开小程序后台管理的网页，将小程序体验版切换成自己的，再通知到测试

• 人为操作失误导致的事故。比如忘记拉取其他人代码就直接上传了体验版，或者弄错开发/生产的环境变量
• 每个人电脑上node_modules的依赖可能不一致。目前使用的是npm，且存在公司内部提供的一些工具包
• 每当有新人入职后，还需要把这一套开发/上线的重复流程给新人培训，避免不熟悉流程的情况下容易造成线上事故
• 我们产品共有8个小程序，这一套组合拳下来，直接占用开发人员半天的时间

接入了之后改善了哪些问题

• 开发体验。直接提交完代码就完事，自动编译多个版本的小程序。平均每个人每次节省了5分钟的时间，一天下来就是半个钟了
• 上线不背锅。无需再繁琐地检查上线流程，一键提审，再也不用担心把测试环境的代码提交到线上啦

创建一个简单的CI/CD流程

gitlab CI/CD的基本工作流程

• 注册一台runner机子，填入项目地址和令牌，就可以关联到对应的仓库
• 当你推送代码的时候，会检查项目下有没有.gitlab-ci.yml文件
• 当存在.gitlab-ci.yml文件时，会触发hooks在你当前runner机所处的位置，执行yml文件中描述的任务

注册一个runner机子

这里分开windows和linux两种版本，实际业务中都是放在linux服务器，windows版可以自己用来熟悉一下yml的一些命令和ci的代码测试

windows版

• 从刚刚设置的界面点到windows的安装

• 有几步需要注意的，我简单说下（其实文档里面都有描述就不再赘述了）

  • 下载完之后，把那个.exe文件重命名为，gitlab-runner.exe方便后面跟着步骤操作
  • 完成下载之后要注册才能开始使用
    

• 开始注册

  • 这里就是gitlab项目中cicd的一些配置，主要是令牌和url，后面注册的时候需要复制
    

  • 注册流程（https://docs.gitlab.com/runner/register/index.html#windows）

    • 执行命令 ./gitlab-runner.exe register
    • 填入复制的url和令牌
    • 填入描述（备注一下机器的用途就行）
    • 填入runner的tags，后续执行ci操作的时候会根据这个匹配
    • 选择执行脚本的语言，这里选shell，后续有些shell命令相关操作
    • 完成注册。这时候目录下会多一个config.toml文件。刷新gitlab后台会看到一台新的注册机子
      

• 启动runner

  • .\gitlab-runner.exe run，执行完后，刷新gitlab后台可以看到机器的小点变绿色了，代表机器在运行。
  • 这时候只要配置了正确的yml文件，后续推送代码的时候，就会触发ci

linux版

• 如果是Ubuntu系统dpkg -i gitlab-runner_.deb，如果是CentOS执行rpm -i gitlab-runner_.rpm
• 开始注册，sudo gitlab-runner register
• 后面的填信息的步骤和windows的是一致的

创建一个.gitlab-ci.yml文件

windows版

一些步骤直接写在代码的注释中。如果想运行简单的示例，直接把涉及到的业务分支名称和脚本删除即可

# 小程序ci配置，后续上线流程有改动的话，注意重新检查这里的流程
image: node:latest
# 这里是步骤流程，可以自定义顺序
stages:
  - build
  - test
  
cache:
  paths:
    - node_modules/
# 执行安装依赖的任务
install_job:
  # 这里是第一个流程build，目前只有一个并行任务
  stage: build
  script:
    - npm --registry https://registry.npm.taobao.org install
  # 这个对应的是刚刚注册的runner的名字，这个非常重要，决定了你是否能启用某个runner机子
  tags:
    - test_ci
  # 这里是触发的限制
  only:
    # 这个是限制的分支，这里表示只有在这三个分支推送时，才会触发cicd
    refs:
      - develop
      - release
      - master
    # 这个是触发的变量，gitlab的默认变量可以去gitlab-cicd的文档中去找
    variables:
      # 这里代表commit的备注中，存在cicd这几个关键词时，才会触发
      - $CI_COMMIT_TITLE =~ /cicd/
# master分支
# 执行编译和上传的任务
master_job:
  # 这里是第二个流程build，相同的流程可以并行执行。可并行的任务数量需要设置
  stage: test
  # 项目中小程序编译和上传代码的相关命令，这些就是之前重复的步骤，现在全部在脚本中自动实现
  script:  
    # 编译打包小程序代码
    - npm run build
    # 将打包好的代码上传到对应的小程序，这里可以接小程序官方文档提供的api
    - npm run upload
  tags:
    - test_ci
  only:
    refs:
      - master
    variables:
      - $CI_COMMIT_TITLE =~ /cicd/

在小程序中实现CI自动上传/预览代码

密钥及 IP 白名单配置

使用 miniprogram-ci前应访问"微信公众平台-开发-开发设置"后下载代码上传密钥，并配置 IP 白名单 开发者可选择打开 IP 白名单，打开后只有白名单中的 IP 才能调用相关接口

安装小程序ci的依赖包，npm install miniprogram-ci --save

将下载好的秘钥放到安全的目录

编写小程序ci的脚本

小程序ci开发文档

如果涉及到第三方小程序，需注意把extEnable这个字段设为false，这个官方文档中无提及，这个坑我踩了一波

在package.json中定义脚本入口

这里就是对应之前在gitlab-cicd.yml中定义的script

"upload": "cross-env NODE_ENV=development node ./script/ci/uploadCode.js"

参考

• https://docs.gitlab.com/ee/ gitlab的官方文档
• https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html 小程序ci的官方文档