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

什麼是持續整合/持續部署（CI/CD）？

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

怎麼做？

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

  

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

• 方式二： 使用工具如gitlab-CI,這種方式的原理就是為專案在自己的伺服器安裝上註冊gitlab-runner，註冊會有一個token，伺服器上執行gitlab-runner後，runner會輪詢的傳送帶token的http請求給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. 安裝node和git，並在/app目錄下克隆gitlab倉庫中的程式碼，這時候伺服器上就存在/app/ci-test目錄了

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

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

     

     而且要填的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
     複製程式碼

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

     

  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，即可看到效果，如下圖

     

     status那一列如果是綠色的passed則說明大功告成，以後每次只需要提交程式碼即可，再也不用手動測試部署了。這個時候去瀏覽器中開啟相應的地址，就可以看到部署成功。我的是這樣的：

     

     如果是紅色的failed則說明執行某一個命令的時候出錯了，這時候就會收到一封郵件告知失敗原因。

參考

• 基於Gitlab CI搭建持續整合環境
• Gitlab Webhooks自動化部署實戰
• gitlab-ci實現前端自動化部署（步驟全面）
• GitLab-CI與GitLab-Runner
• 當談到 GitLab CI 的時候，我們該聊些什麼