[Day29] CI /CD with GitLab CI

2021 iThome 鐵人賽

DAY 29

Modern Web

前端工程師在工作中的各種實戰技能 (Vue 3)系列第 29 篇

13th鐵人賽 ci/cd devops gitlab-ci frontend

Mia Yang

團隊Outcome First 2.0

2021-10-14 20:12:53

5284 瀏覽

credit: https://medium.com/@brilvio/how-i-implemented-a-ci-build-of-delphi-binaries-using-gitlab-ci-d1123826698f

今天要和大家分享的是 Continuous Integration (持續整合) 與 Continuous Deployment (持續部署)，後續文章會簡稱 CI / CD。

市面上其實有非常多的 CI / CD 工具，例如 Travis CI、CircleCI、Jenkins，不過因為我大多數的專案都是存放在 GitLab 上，也因此大部分首選工具就會直接使用 GitLab 所提供的 GitLab CI

GitLab CI/CD workflow

credit: https://docs.gitlab.com/ee/ci/introduction/#continuous-integration

上下兩張圖，其實都是在表達同一件事情，只是上面是 GitLab 官方詳細解釋 CI / CD 在開發工作流程中所扮演的角色與時機，而下面則是我簡化成要示範攥寫 GitLab CI 的流程圖。

在示範情境中，會有一個主要分支 (Main) 以及從主要分支建立出去開發的功能分支，接著我們會發起 Merge Request 將功能分支合併至主要分支中，其中我會在發起 Merge Request 時觸發 CI 並且在合併完成時觸發 CD，這樣我們就完成了一個最簡單的 CI / CD。

.gitlab-ci.yml

要啟用 GitLab CI 我們只需要在專案的根目錄創建一個檔名為 .gitlab-ci.yml 的文件，並且定義好要執行的內容然後推送到 GitLab 上，GitLab 就會自動根據我們攥寫的內容執行 CI / CD 了。

那我們就直接來看最終的程式碼，然後再為大家一一解釋到底寫了什麼。

stages:
    - build
    - test
    - deploy

installDependencies:
    stage: build
    only:
        - merge_requests
        - main
    script:
        - echo "may execute npm run install to install dependencies"

unit-testing:
    stage: test
    only:
        - merge_requests
    script:
        - echo "Unit Testing"

e2e-testing:
    stage: test
    only:
        - merge_requests
    script:
        - echo "E2E Testing"

deploy:
    stage: deploy
    only:
        - main
    script:
        - echo "Deploy!!!"

`stages:`

stages 屬於 Global keywords 是用來定義 job 組(多個 job 可能會歸屬於同一個 stage)執行的順序。

如果一個 stage 中的所有的 job 都成功，就會進入下一個 stage，如果 stage 中的任何一個 job 發生錯誤執行失敗，整個 CI / CD 的流程就會直接提前結束。

`job`:

用來定義確切要執行的內容，例如編譯、安裝套件、執行測試或者打包部署。上面程式碼中第一層的 installDependencies、unit-testing 、 e2e-testing 和 deploy 就是一個一個 job。

我們可透個 Job keywords 來定義 job 的行為，例如範例程式碼中的

stage 是定義該 job 會在哪一個 stage 中執行。
only 是定義什麼時機會觸發 job 產生。
script 是 job 實際會執行的腳本。

所以再搭配一次前面的流程圖來看：

在發起 Merge Request 時觸發 CI
- 在 build stage 中執行 installDependencies 。
- 接著在 test stage 中執行 unit-testing 和 e2e-testing (注意，同一個 stage 的兩個 job 是平行作業的，兩者並沒有一定的先後順序，如果想要有先後順序就必須定義成不同的 stage )
合併至主要分支時觸發 CD
- 在 build stage 中執行 installDependencies 。
- 在 deploy stage 中執行 deploy 。