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

什么是CI/CD

通俗來(lái)說(shuō)就是啟動(dòng)一個(gè)服務(wù)，能夠監(jiān)聽(tīng)代碼變化，然后自動(dòng)執(zhí)行打包，發(fā)布等流程；

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

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

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

可見(jiàn)要實(shí)現(xiàn)自動(dòng)化，我們最起碼需要兩個(gè)關(guān)鍵步驟：

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

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

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

gitlab-runner的主要作用

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

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

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

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

搭建gitlab CI/CD

1. 創(chuàng)建gitlab倉(cāng)庫(kù)

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

打開(kāi)左側(cè)菜單Settings > CI/CD項(xiàng)，可以看到Runners項(xiàng)，點(diǎn)擊右側(cè)按鈕Expand:

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

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

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

這里我們點(diǎn)擊New project runner按鈕去新建一個(gè)Runner索引，界面入下：

然后按照以下步驟操作：

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

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

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

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

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

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

正如開(kāi)頭我們介紹過(guò)，我們的服務(wù)器要監(jiān)聽(tīng)gitlab的push消息就需要安裝gitlab-runner軟件，啟動(dòng)后就創(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運(yùn)行狀況:

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

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

gitlab-runner register --url https:

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

輸入該指令后會(huì)有3步交互式輸入：

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

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

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

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

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

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

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

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

Runner會(huì)讀取項(xiàng)目根目錄下的.gitlab-ci.yml文件，執(zhí)行其中的任務(wù)，我們?cè)陧?xiàng)目根目錄下添加.gitlab-ci.yml文件：

內(nèi)容如下：

stages:
  - dev
  - test


測(cè)試dev:
  stage: dev
  tags:
     - test
  script:
    - npm i
    - npm run dev


測(cè)試test:
  stage: test
  tags:
     - test
  script:
    - echo "Running test..."

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

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

5. push代碼試一下

將代碼修改push到git倉(cāng)庫(kù)，就能看到Runner終端有反饋了！同時(shí)可以看一下gitlab倉(cāng)庫(kù)的Pipelines頁(yè)面：

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

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

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

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

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

總結(jié)

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

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

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

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

若要實(shí)現(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)致測(cè)試dev是無(wú)法完成的Job，進(jìn)而導(dǎo)致dev階段一直處于運(yùn)行狀態(tài)，而test階段無(wú)法開(kāi)始；我們修改下配置（npm run dev -> npm run build）：

stages:
  - dev
  - test


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

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

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

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

結(jié)束

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

1. 我們將修改的代碼push到gitlab倉(cāng)庫(kù)；

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

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

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

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

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

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

審核編輯：黃飛