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

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