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

什么是CI/CD

通俗來說就是啟動一個服務(wù)，能夠監(jiān)聽代碼變化，然后自動執(zhí)行打包，發(fā)布等流程；

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

“懶是促進(jìn)技術(shù)進(jìn)步的原動力”

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

可見要實現(xiàn)自動化，我們最起碼需要兩個關(guān)鍵步驟：

1. 監(jiān)聽代碼變化；

2. 執(zhí)行后續(xù)的各種任務(wù)；

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

gitlab-runner的主要作用

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

2. 執(zhí)行.gitlab-ci.yml文件（GitLab CI/CD的配置文件）中的任務(wù)；

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

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

搭建gitlab CI/CD

1. 創(chuàng)建gitlab倉庫

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

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

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

下面創(chuàng)建Runner的索引，用來關(guān)聯(lián)當(dāng)前項目倉庫與后面的**Runner**進(jìn)程

2. 創(chuàng)建Runner索引

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

然后按照以下步驟操作：

1. 選擇Runner服務(wù)器的操作系統(tǒng)

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

3. 點擊創(chuàng)建按鈕Create runner進(jìn)入Runner注冊指令頁面：

到這里，需要在gitlab完成的操作已經(jīng)結(jié)束，下面開始服務(wù)器端的配置流程。

對于只想試試看的同學(xué)可以在自己電腦上進(jìn)行下面的操作，也就是把自己的電腦作為服務(wù)器。

3. 創(chuàng)建Runner服務(wù)

正如開頭我們介紹過，我們的服務(wù)器要監(jiān)聽gitlab的push消息就需要安裝gitlab-runner軟件，啟動后就創(chuàng)建了Runner服務(wù)。

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

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

當(dāng)這5步執(zhí)行完畢后，終端輸入gitlab-runner status查看gitlab-runner運行狀況:

Runner服務(wù)啟動成功。

2. 執(zhí)行Step1指令進(jìn)行注冊：

gitlab-runner register --url https:

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

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

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

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

c. 設(shè)置Runner的執(zhí)行器類型；這里選擇shell類型。

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

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

到這里，gitlab CI所需的環(huán)境算是搭建完成了！

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

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

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

內(nèi)容如下：

stages:
  - dev
  - test


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


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

這里規(guī)定了兩個任務(wù)階段：dev與test，同時創(chuàng)建了兩個Job：測試dev與測試test，并將測試dev掛載在了dev階段，將測試test掛載在了test階段；

這兩個Job要注意tags需要與gitlab上創(chuàng)建的Runner索引的tags相同，不然不會執(zhí)行！

5. push代碼試一下

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

可以看到dev階段正在執(zhí)行中(上圖所示的“狀態(tài)圖標(biāo)”為“進(jìn)行中”)。

如果任務(wù)一直處于等待狀態(tài)，可能是gitlab訪問不到本地Runner服務(wù)的IP地址，或者網(wǎng)絡(luò)有問題，如圖：

可以點擊“狀態(tài)圖標(biāo)”看下日志頁面：

發(fā)現(xiàn)npm run dev熟悉的輸出，可以在服務(wù)端（這里是本地開發(fā)環(huán)境）打開該鏈接看一下：

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

總結(jié)

到這里，其實主要目的已經(jīng)達(dá)到了：

1. 我們成功搭建了gitlab CI/CD所需的環(huán)境；

2. 實現(xiàn)了服務(wù)端監(jiān)聽git的push行為；

3. 服務(wù)端Runner執(zhí)行了.gitlab-ci.yml文件上的Job。

若要實現(xiàn)更復(fù)雜的流程，只需要完善.gitlab-ci.yml文件中的配置。

后續(xù)改進(jìn)

上面我們搭建了gitlab CI/CD所需的環(huán)境，并成功執(zhí)行了本地的npm run dev。由于npm run dev指令是持續(xù)性的任務(wù)，導(dǎo)致測試dev是無法完成的Job，進(jìn)而導(dǎo)致dev階段一直處于運行狀態(tài)，而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..."

最終運行結(jié)果如圖：

全部Job順利執(zhí)行完畢：

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

結(jié)束

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

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

2. gitlab將push消息發(fā)送到我們的服務(wù)器，服務(wù)器Runner接收到消息；

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

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

GitLab 服務(wù)器根據(jù) Runner執(zhí)行結(jié)果，更新項目的 CI/CD 狀態(tài)和日志，并通知相關(guān)的用戶或團(tuán)隊。

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

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

審核編輯：黃飛