iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

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

[Day29] CI /CD with GitLab CI

https://miro.medium.com/max/1400/1*fuvJn5MgjGfMpOcHfvw_MA.png

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 CICircleCIJenkins,不過因為我大多數的專案都是存放在 GitLab 上,也因此大部分首選工具就會直接使用 GitLab 所提供的 GitLab CI

GitLab CI/CD workflow

https://docs.gitlab.com/ee/ci/introduction/img/gitlab_workflow_example_11_9.png

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

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

https://i.imgur.com/J24obu0.png

在示範情境中,會有一個主要分支 (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:

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

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

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

https://i.imgur.com/AEwarAW.png

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

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

Demo

我們來看一下實際畫面吧!

當我們在 GitLab 上發起 Merge Request 時,會在頁面中看到「Detached merge request pipeline ... 」的字樣表示這個 merge request 有觸發 CI / CD pipeline。

https://i.imgur.com/JFoA5IG.png

如果點進去 pipeline 看,就會看到跟上面流程圖一樣的內容,這次的 merge request 執行了 build stage (installDependencies) 和 test stage (unit-testing & e2e-testing )。

https://i.imgur.com/ZOfUsvr.png

當我們合併分之後,pipeline 執行的內容,也會跟流程圖所畫的一樣,執行了 build stage (installDependencies) 和 deploy stage (deploy)。

https://i.imgur.com/0OkNWSD.png

參考資料


今天的分享就到這邊,如果大家對我分享的內容有興趣歡迎點擊追蹤 & 訂閱系列文章,如果對內容有任何疑問,或是文章內容有錯誤,都非常歡迎留言討論或指教的!

我們明天見!


上一篇
[Day28] 前端部署網頁的方式 (Vercel, AWS S3 & Netlify)
下一篇
[Day30] 誰怕誰,再來啊!
系列文
前端工程師在工作中的各種實戰技能 (Vue 3)30

尚未有邦友留言

立即登入留言