用 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 分支成功後，會自動打包上傳到微信平臺，（記得加版本號和描述。。。。），最好設定一個公共的微訊號，不管有多少個人提交程式碼，體驗版的二維碼不需要頻繁切換

好啦，這篇大水文到這裡就結束了，歡迎來噴。。。