CI/CD原理、yaml語法、.gitlab-ci.yml配置、runner流程等文章也許你已經看了不少，但是還沒實際操作過的同學相信也很多。下面帶你實際操作一把CI/CD，串一串學過的知識點。

什么是CI/CD

通俗來說就是啟動一個服務，能夠監聽代碼變化，然后自動執行打包，發布等流程；

拿最簡單的靜態頁項目部署流程舉例：首先需要手動npm run build后，再將dist文件夾通過工具上傳到服務器的某個目錄下，再啟動配置好的nginx等服務器程序；有時為了調試，不得不頻繁發布測試......

“懶是促進技術進步的原動力”

如果我們修改代碼后，能夠自動完成后續的那一堆任務那該多好，CI/CD的概念發展了起來。

可見要實現自動化，我們最起碼需要兩個關鍵步驟：

1. 監聽代碼變化；

2. 執行后續的各種任務；

而gitlab為我們提供了現成的工具gitlab-runner，能夠幫助我們實現上面所述的步驟；我們只需要按照官方說明，在自己的服務器上安裝gitlab-runner，并在項目倉庫里注冊其相應的信息即可。

gitlab-runner的主要作用

1. 監聽來自gitlab的各種消息（如：代碼push）；

2. 執行.gitlab-ci.yml文件（GitLab CI/CD的配置文件）中的任務；

如何自動化構建、自動化測試、自動化部署？那都是.gitlab-ci.yml中的Job，后面會介紹。

也就是說，自動化流程都可以通過.gitlab-ci.yml中的Job的Shell指令來實現。下面進入正題，我們先來搭建CI/CD所需的環境。

搭建gitlab CI/CD

1. 創建gitlab倉庫

首先創建一個gitlab倉庫（本示例里叫做testCI，是用vue-cli創建的一個樸實無華的項目）。進入項目后看到界面如下：

打開左側菜單Settings > CI/CD項，可以看到Runners項，點擊右側按鈕Expand:

gitlab CI/CD需要我們自己的服務端啟動gitlab-runner，而gitlab-runner啟動后得到的服務進程就叫做Runner；每個gitlab項目都可以綁定多個Runner。

下面創建Runner的索引，用來關聯當前項目倉庫與后面的**Runner**進程

2. 創建Runner索引

這里我們點擊New project runner按鈕去新建一個Runner索引，界面入下：

然后按照以下步驟操作：

1. 選擇Runner服務器的操作系統

2. 創建Runner的tags，也可以勾選Run unstagged jobs（用途后面講解）；

3. 點擊創建按鈕Create runner進入Runner注冊指令頁面：

到這里，需要在gitlab完成的操作已經結束，下面開始服務器端的配置流程。

對于只想試試看的同學可以在自己電腦上進行下面的操作，也就是把自己的電腦作為服務器。

3. 創建Runner服務

正如開頭我們介紹過，我們的服務器要監聽gitlab的push消息就需要安裝gitlab-runner軟件，啟動后就創建了Runner服務。

可根據上圖所示的官方鏈接，查看安裝指令；下面是macOs系統的安裝步驟。

1. 按照上圖所示的指令安裝gitlab-runner；含義如下所示：

sudocurl--output/usr/local/bin/gitlab-runnerhttps://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-darwin-amd64


sudochmod+x/usr/local/bin/gitlab-runner


cd~


gitlab-runnerinstall


gitlab-runner start

當這5步執行完畢后，終端輸入gitlab-runner status查看gitlab-runner運行狀況:

Runner服務啟動成功。

2. 執行Step1指令進行注冊：

gitlab-runner register --url https:

該指令用于將當前的Runner注冊到gitlab并與我們的前面創建的Runner索引信息綁定在一起。

輸入該指令后會有3步交互式輸入：

a. 設置gitlab地址；直接點擊回車即可。

b. 設置Runner的名字；隨便寫，這里是test-ci

c. 設置Runner的執行器類型；這里選擇shell類型。

最終效果如下圖所示，這就完成了Step2：

3. 執行Step3指令:gitlab-runner run，可以看到終端顯示如下：

到這里，gitlab CI所需的環境算是搭建完成了！

回到gitlab開始的CI/CD頁面，就可以看到新建的Runner服務可以使用了。

4. 編寫.gitlab-ci.yml文件（后續補一篇配置項解析文章）

Runner會讀取項目根目錄下的.gitlab-ci.yml文件，執行其中的任務，我們在項目根目錄下添加.gitlab-ci.yml文件：

內容如下：

stages:
  - dev
  - test


測試dev:
  stage: dev
  tags:
     - test
  script:
    - npm i
    - npm run dev


測試test:
  stage: test
  tags:
     - test
  script:
    - echo "Running test..."

這里規定了兩個任務階段：dev與test，同時創建了兩個Job：測試dev與測試test，并將測試dev掛載在了dev階段，將測試test掛載在了test階段；

這兩個Job要注意tags需要與gitlab上創建的Runner索引的tags相同，不然不會執行！

5. push代碼試一下

將代碼修改push到git倉庫，就能看到Runner終端有反饋了！同時可以看一下gitlab倉庫的Pipelines頁面：

可以看到dev階段正在執行中(上圖所示的“狀態圖標”為“進行中”)。

如果任務一直處于等待狀態，可能是gitlab訪問不到本地Runner服務的IP地址，或者網絡有問題，如圖：

可以點擊“狀態圖標”看下日志頁面：

發現npm run dev熟悉的輸出，可以在服務端（這里是本地開發環境）打開該鏈接看一下：

最終，我們成功利用gitlab CI的能力，運行了本地的npm run dev命令......

總結

到這里，其實主要目的已經達到了：

1. 我們成功搭建了gitlab CI/CD所需的環境；

2. 實現了服務端監聽git的push行為；

3. 服務端Runner執行了.gitlab-ci.yml文件上的Job。

若要實現更復雜的流程，只需要完善.gitlab-ci.yml文件中的配置。

后續改進

上面我們搭建了gitlab CI/CD所需的環境，并成功執行了本地的npm run dev。由于npm run dev指令是持續性的任務，導致測試dev是無法完成的Job，進而導致dev階段一直處于運行狀態，而test階段無法開始；我們修改下配置（npm run dev -> npm run build）：

stages:
  - dev
  - test


測試dev:
  stage: dev
  tags:
     - test
  script:
    - npm i
    - npm run build 
    - pwd 
    - ls 
測試test:
  stage: test
  tags:
     - test
  script:
    - echo "Running test..."

最終運行結果如圖：

全部Job順利執行完畢：

這樣我們就完成了基本的CI/CD流程的創建，如果還需要deploy、test等后續功能，只需要繼續完善.gitlab-ci.yml 文件，例如：通過shell命令將dist移動到想要的位置，啟動nginx等；或者通過執行*.sh文件來完成更復雜的操作。

結束

gitlab CI/CD大致的工作流程：

1. 我們將修改的代碼push到gitlab倉庫；

2. gitlab將push消息發送到我們的服務器，服務器Runner接收到消息；

3. 服務器Runner將倉庫代碼pull下來，按照.gitlab-ci.yml 文件執行Job；

4. 服務器Runner將構建信息（例如測試報告，終端輸出等）上傳到 GitLab 。

GitLab 服務器根據 Runner執行結果，更新項目的 CI/CD 狀態和日志，并通知相關的用戶或團隊。

6.如果.gitlab-ci.yml 文件不增加其他配置（如：artifacts字段等），Runner將在執行完Job后清理構建產物（如dist文件夾）；

通過上面的演示，我們完成了一個前端項目最基本的gitlab CI/CD流程，功能很簡單，但是相信沒上手實踐過的同學對其基本原理與流程能有一定的了解，今后在看相關文章時也能有一個基本的概念（版權歸掘金硬毛巾原作者所有，侵刪）

審核編輯：黃飛