前端專案基於GitLab-CI的持續整合/持續部署(CI/CD)

zysallen發表於2018-11-30

什麼是持續整合/持續部署(CI/CD)?

個人理解,說白了就是把程式碼測試、打包、釋出等工作交給一些工具來自動完成。這樣可以提高效率,減少失誤,開發人員只需要關心開發和提交程式碼到git就可以了。

怎麼做?

  • 方式一: 使用web hooks,這種方式的原理就是在gitlab專案的Setting-Integrations設定中增加一個請求url和一個secret,如下圖

    前端專案基於GitLab-CI的持續整合/持續部署(CI/CD)
    當觸發鉤子條件時,(一般是git push之後),gitlab會主動把secret帶在請求頭中去請求前面的url,後端服務接受到這個請求後並驗證secret後,就可以為所欲為啦。這種方式不需要配置持續整合工具,但是需要自己單獨專門寫一個後端服務。由於今天主要使用下面的方式二,所以方式一的具體做法就不展開了,可以參考Gitlab Webhooks自動化部署實戰

  • 方式二: 使用工具如gitlab-CI,這種方式的原理就是為專案在自己的伺服器安裝上註冊gitlab-runner,註冊會有一個token,伺服器上執行gitlab-runner後,runner會輪詢的傳送帶tokenhttp請求給gitlab,如果gitlab有任務了,(一般是git push),那麼會把任務資訊返回給runner,然後runner就開始呼叫註冊時選的Executor(我是用的shell)來執行專案根目錄下的配置檔案.gitlab-ci.yml,執行後把結果反饋給gitlab。詳細的工作原理請移步當談到 GitLab CI 的時候,我們該聊些什麼。對GitLab-CI,GitLab-Runner等概念有點混亂的同學,可以看看這篇文章。下面說說我個人的使用步驟:

    1. 在開發環境(如自己的windows上)開發前端專案(該專案我命名為ci-test),並推送到gitlab遠端倉庫中。這裡是用vue-cli 3.0生成的vue專案,我個人習慣增加如下自定義配置

      //vue.config.js
      module.exports = {
          outputDir: 'app-page',          //自定義打包後的目錄名,注意在.gitnore檔案中也要忽略掉該目錄
          baseUrl: './'                   //打包時使用相對路徑
      }
      複製程式碼
    2. 伺服器上配置nginx,並配置預設訪問目錄,例如我自己的配置是/app資料夾。具體做法請自行搜尋。

    3. 安裝nodegit,並在/app目錄下克隆gitlab倉庫中的程式碼,這時候伺服器上就存在/app/ci-test目錄了

    4. 伺服器上安裝gitlab-runner,具體方法請參考官方文件

    5. 伺服器上註冊一個Runner,具體方法參考官方文件,注意這裡要填的url(一般是 https://gitlab.com)token,都在gitlab專案下的setting-CD/CD-Runners-Specific Runners裡面找(如下圖),

      前端專案基於GitLab-CI的持續整合/持續部署(CI/CD)
      而且要填的tags也是有用的,後面的.gitlab-ci.yml裡面的tag選項必須是這裡的tags裡面的子項,最後executor這裡我是填的shell

    6. 註冊後修改gitlab-runner的許可權

      sudo chown -R gitlab-runner:gitlab-runner /home/gitlab-runner
      sudo chmod -R 777 /home/gitlab-runner
      複製程式碼
    7. 開啟gitlab-runner服務

      gitlab-runner run
      複製程式碼

      成功的話,會有一個綠點,如下圖

      前端專案基於GitLab-CI的持續整合/持續部署(CI/CD)

    8. vue專案根目錄下配置.gitlab-ci.yml檔案,具體配置選項請看文件。我的配置如下:

          #當Runner通過輪詢檢測到gitlab上有任務時,就會執行這個檔案
          #個人不是很熟yml的語法以及詳細配置,都是找貓畫虎的,求各位大神提出優化意見
      
          stages:
              - update
              - test
              - build
      
          #更新程式碼並且安裝依賴
          update:     
              stage: update
              script:
                  - cd /app/ci-test       #先進入到專案目錄下,下面同理
                  - git pull
                  - sudo npm install
              tags:                       #這裡的tags一定要屬於註冊時填的tags中,下面同理
                  - update
          
          #執行單元測試
          test:
              stage: test
              script:
                  - cd /app/ci-test
                  - npm run test:unit
              tags:
                  - unitTest
          
          #打包
          build:
              stage: build
              script:
                  - cd /app/ci-test
                  - npm run build
              tags: 
                  - build
      
      複製程式碼
    9. .gitlab-ci.yml檔案推送到gitlab倉庫中,在gitlab專案頁面中開啟CI/CD-Pipelines,即可看到效果,如下圖

      前端專案基於GitLab-CI的持續整合/持續部署(CI/CD)
      status那一列如果是綠色的passed則說明大功告成,以後每次只需要提交程式碼即可,再也不用手動測試部署了。這個時候去瀏覽器中開啟相應的地址,就可以看到部署成功。我的是這樣的:
      前端專案基於GitLab-CI的持續整合/持續部署(CI/CD)
      如果是紅色的failed則說明執行某一個命令的時候出錯了,這時候就會收到一封郵件告知失敗原因。

參考

相關文章