用 gitlab-runner 实现微信小程序可持续化自动部署

真香警告⚠：️这是一篇水文……（弄这个之前以为挺难，弄好后发现就几个配置，能满足使用了）

日常小程序开发中，测试、产品、后端有时频繁找开发要一个预览二维码，有时候测试找你要灰度环境，后端找你要测试环境的…… 本来好好的一个思路等到给完他们预览码了，结果自己发现：我需要干嘛？我刚才是写什么来着？我刚怎么想这个思路的？而且小程序的体验版只能有一个，在多人开发中，那把谁提交的版本设为体验版呢？假如固定一个人提交，那他某天请假了。。。哈哈哈哈，所以利用自动部署，设置一个公共微信账号提交是很有必要的

小声bb： 啰嗦了一大堆。。。那就再啰嗦一下?

在某一种机缘巧合下，我准备用gitlab-runner去实现一个自动化部署，在昨天（4月3号）我对这个还是一窍不通的?，虽然今天也只会一点，还是写下来，因为我翻文档翻的好辛苦啊，都是英文?，中文的这个介绍少的可怜。

首先介绍为啥可以实现微信小程序自动部署

在微信小程序工具的官方文档中，我们可以看到，开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作。文档传送门

这里演示 http 请求的方式：

1. 在应用程序中找到微信开发工具，右键显示包内容，依次进入： Contents -> MacOS, 然后点击第一个 cli命令工具

如果提示服务端口已经关闭，请按照指示打开

2. 打开后，我们来用这个预览命令来验证下是否成功

   打开谷歌浏览器 (随便啥浏览器啦)，在窗口输入(不懂就看下图参数介绍)：

   http://127.0.0.1:你的端口号/preview?projectpath=你的项目地址
   例如：
   # projectpath后面的地址要经过url编码,我这里是/Users/mac/code/lab-runner/dist
   http://127.0.0.1:49546/preview?projectpath=%2fUsers%2fmac%2fcode%2flab-runner%2fdist
   复制代码

   url编码在线工具地址

如果输入链接后能看到二维码出现，那就ok啦

安装gitlab-runner （官网安装步骤操作macOS）

1. 下载系统的二进制文件：

   sudo curl --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-darwin-amd64
   复制代码

2. 赋予它执行权限：

   sudo chmod +x /usr/local/bin/gitlab-runner
   复制代码

官网下面还有 注册跑步者（这个跑步者说白了你可以想象成一个runner），安装服务和启动，我们稍后说

在小程序项目根目录下创建一个 .gitlab-ci.yml 文件

这个文件官网是这么说明的 (文档入口)

GitLab 提供持续集成服务。如果将 .gitlab-ci.yml 文件添加到存储库的根目录，并将 GitLab 项目配置为使用 Runner ，则每次提交或推送都会触发 CI 管道。该 .gitlab-ci.yml 文件告诉 GitLab 跑步者该做什么。默认情况下，它运行有三个流水线阶段：build ，test，和 deploy。你不需要使用所有三个阶段; 没有工作的阶段被忽略了。

看不懂没关系，你创建一个就行啦

官方文档的：.gitlab-ci.yml 配置方式

别人翻译过的：.gitlab-ci.yml 配置方式

如果官方文档没看懂，没关系，我来简单介绍下（我也只能简单介绍下 emmm）

下图来源

给一个示例：

    # docker镜像
    image: alpine:3.7
    
    # 依赖的docker服务
    services:
      - node:latest
      
    # 开始执行脚本前所需执行脚本
    before_script:
      - rm -rf ./dist
      
    # 脚本执行完后的钩子，执行所需脚本
    after_script:
      - echo 'job执行完了'
      
    # 该ci pipeline适合的场景
    stages:
      - build
      - test
      - deploy
      
    # 定义的任务1
    job1:
      # 场景为构建
      stage: build
      # 所需执行的脚本，就是写一系列执行命令去执行
      script:
        - node -v
        - npm -v
        - npm i
        - npm run build
      # 在哪个分支上可用
      only:
        - master
      # 指定哪个ci runner跑该工作
      tags:
        - docker
复制代码

1. image 和 services

   这两个关键字允许使用一个自定义的 Docker 镜像和一系列的服务，并且可以用于整个 job 周期。

2. before_script 和 after_script

   before_script 用来定义所有job之前运行的命令，包括 deploy (部署) jobs，但是在修复 artifacts 之后。它可以是一个数组或者是多行字符串。after_script 用来定义所有 job 之后运行的命令。它必须是一个数组或者是多行字符串.

3. stages

   stages 用来定义可以被job调用的 stages。 stages 的规范允许有灵活的多级 pipelines。stages 中的元素顺序决定了对应job的执行顺序：

   1. 相同stage的job可以平行执行。
   2. 下一个stage的job会在前一个stage的job成功后开始执行。

4. job

   .gitlab-ci.yml 允许指定无限量 jobs。每个jobs 必须有一个唯一的名字，而且不能是上面提到的关键字。 如上面例子的 job1，名字可以随意起，job 中 stage 选定相同场景的 job 并行执行，job 的执行顺序根据 stage 的定义来决定，例如上面 stages 有： build 、 test 、 deploy， 会先执行所有 build 的 job 然后 test 最后再 deploy

5. script

   script 是 Runner 执行的 yaml 脚本。例如：

   script: 
       - cd ./dist         进入 dist 文件夹
       - npm -v            查看 npm 版本
       - npm i             安装项目依赖
       - npm run build     执行打包命令
       ...
   复制代码

6. only

   only 很简单，就是给定条件，限定该 job 只在某个条件下执行，比如上面，限定只能在 master 分支上执行

7. tags

   指定哪个ci runner 跑该工作，比如：docker， shell，ssh

说了一大堆，我把我知道的都写上了，再多的。。。我也不知道啦?，下面给出一个简单的 .gitlab-ci.yml 配置，你可以稍微改下，然后粘贴到自己的项目中

gitlab-ci.yml 配置

注意： 这里是使用 shell 的调用方式，如果给定的打包机是mac，那么你得确保你电脑中的node环境和脚手架工具都已经安装好，如果没有安装好，则在script中通过命令做判断然后安装，这里默认都是安装好了

# stages 可写可不写，如果你的脚本很简单的话
stages:
   - test
   - build
# 定义在dev分支上执行的命令（实现效果：提交代码后，自动打包一个预览二维码）
dev:
  stage: test
  only:
    - dev
  script:
    - git pull origin dev   # 拉取最新代码，如果是在自己本机中，这里可以不用
    - cd /Users/mac/code/lab-runner    # 进入电脑项目的文件夹中
    - cnpm -v    # 查看cnpm版本，如果没有，可以执行下安装命令
    - cnpm i    # 安装项目依赖
    - npm run build:weapp   # 执行项目的打包命令，wepy是：npm run dev
    - cd /Users/mac/Desktop # 进入将二维码要放入的文件夹
    - curl -o wxappcodeQr.jpg http://127.0.0.1:58660/preview?projectpath=%2fUsers%2fmac%2fcode%2flab-runner%2fdist  # 执行下载命令，端口号要改为你自己的
  tags:
    - shell
# 定义 master 上要执行的命令（打包后自动上传到微信平台）
master: 
  stage: build
  only: 
    - master
  script:
    - git pull origin master   # 拉取最新代码，如果是在自己本机中，这里可以不用
    - cd /Users/mac/code/lab-runner  # 进入项目目录
    - cnpm -v
    - cnpm i
    - npm run build:weapp
    - curl http://127.0.0.1:58660/upload?projectpath=%2fUsers%2fmac%2fcode%2flab-runner%2fdist  # 上传版本
  tags:
    - shell
复制代码

将上面的代码传到 gitlab 上，点击右侧的列表，如下图，你会看到已有有一个任务，状态是 pending 状态

gitlab-runner 注册成为跑步者

接下来，我们注册成为一个跑步者，并且将gitlab-runner跑起来 官方文档

1. 运行以下命令：

sudo gitlab-runner register
复制代码

2. 输入您的GitLab实例URL：

Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com )
https://gitlab.com
复制代码

3. 输入您获得的令牌以注册Runner：不知道的看这里

 Please enter the gitlab-ci token for this runner
 xxxxxxxxxx
复制代码

4. 输入Runner的描述，您可以稍后在GitLab的UI中更改：

Please enter the gitlab-ci description for this runner
 [hostame] my-runner
复制代码

5. 输入与Runner关联的标签，您可以稍后在GitLab的UI中更改：

Please enter the gitlab-ci tags for this runner (comma separated):
shell # 我这里因为用的shell，所以输入shell
复制代码

6. 输入Runner执行程序：

 Please enter the executor: ssh, docker+machine, docker-ssh+machine, kubernetes, docker, parallels, virtualbox, docker-ssh, shell:
 shell # 我这里选用的是shell
复制代码

然后如果成功的话，你可以看到成功的一个提示

接下来，我们给我将Runner安装为服务并启动它：

 cd ~
 gitlab-runner install
 gitlab-runner start
 gitlab-runner run
复制代码

评论有指出需要加 gitlab-runner run 命令，这里贴图说明作用

如果已经安装过的，先执行

gitlab-runner stop
gitlab-runner uninstall
复制代码

如果一直是 pending 没有变化，那执行下面的命令试试，如果还不行，那重新注册一遍呀，哈哈哈，没有啥是重新注册不行的, 我也是重新注册过好几次，突然可以了 emmmm

gitlab-runner restart
复制代码

更多操作命令，请自行 百度 或者查看 官方文档

这时候，我们再去github上看到，刚才的 pending 状态变了, 现在应该是一个 running 状态

如果失败了，可以点stages那里，能够看到失败的日志，自行排错就行了，谁不是经历了 n 次失败之后才成功的呢???，我好几页失败呢 emmm

如果你成功啦，推送到dev分支，会直接在桌面给你生成一个预览二维码，最好在script定义命令，把这个二维码给传到gitlab上，成功后让测试自己去拿。

推送到 master 分支成功后，会自动打包上传到微信平台，（记得加版本号和描述。。。。），最好设置一个公共的微信号，不管有多少个人提交代码，体验版的二维码不需要频繁切换

好啦，这篇大水文到这里就结束了，欢迎来喷。。。