用 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 分支成功后，会自动打包上传到微信平台，（记得加版本号和描述。。。。），最好设置一个公共的微信号，无论有多少我的提交代码，体验版的二维码不须要频繁切换

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