前端項目基於GitLab-CI的持續集成/持續部署（CI/CD）

時間 2019-11-07

標籤前端項目基於 gitlab 持續集成部署欄目 Git 简体版

原文原文鏈接

什麼是持續集成/持續部署（CI/CD）？

我的理解，說白了就是把代碼測試、打包、發佈等工做交給一些工具來自動完成。這樣能夠提升效率，減小失誤，開發人員只須要關心開發和提交代碼到git就能夠了。html

怎麼作？

方式一：使用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等概念有點混亂的同窗，能夠看看這篇文章。下面說說我我的的使用步驟：vue
1. 在開發環境（如本身的windows上）開發前端項目（該項目我命名爲ci-test），並推送到gitlab遠程倉庫中。這裏是用vue-cli 3.0生成的vue項目，我我的習慣增長以下自定義配置node
```
//vue.config.js
module.exports = {
    outputDir: 'app-page',          //自定義打包後的目錄名，注意在.gitnore文件中也要忽略掉該目錄
    baseUrl: './'                   //打包時使用相對路徑
}
複製代碼
```
2. 服務器上配置nginx，並配置默認訪問目錄，例如我本身的配置是/app文件夾。具體作法請自行搜索。nginx
3. 安裝node和git，並在/app目錄下克隆gitlab倉庫中的代碼，這時候服務器上就存在/app/ci-test目錄了git
4. 服務器上安裝gitlab-runner，具體方法請參考官方文檔web
5. 服務器上註冊一個Runner,具體方法參考官方文檔,注意這裏要填的url(通常是 https://gitlab.com)和token，都在gitlab項目下的setting-CD/CD-Runners-Specific Runners裏面找(以下圖)，vue-cli
  
  並且要填的tags也是有用的，後面的.gitlab-ci.yml裏面的tag選項必須是這裏的tags裏面的子項，最後executor這裏我是填的shell
6. 註冊後修改gitlab-runner的權限shell
```
sudo chown -R gitlab-runner:gitlab-runner /home/gitlab-runner
sudo chmod -R 777 /home/gitlab-runner
複製代碼
```
7. 開啓gitlab-runner服務npm
```
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則說明執行某一個命令的時候出錯了，這時候就會收到一封郵件告知失敗緣由。