一、什么是CICD

翻譯過來就是持續構建、持續部署，在軟件工程中，一個項目的迭代往往是很頻繁的，每次都要重新部署，就成了一件很繁瑣的事情，那么如何保證項目能夠持續的構建和部署呢？

我們先來看一個軟件的開發流水線一般為：

• 需求設計：軟件需求分析和設計

• 開發階段：進入編碼、程序開發、簡單的本地單元測試、代碼Review等

• 全面測試：功能測試、性能測試、單元測試、界面測試、安全測試等

• 發布：將代碼部署，交給用戶使用

1、CI 持續集成（Continuous Integration）

持續集成：頻繁的將代碼合并到主分支中，強調通過集成測試反饋給開發一個結果，不管失敗還是成功。

持續集成并不能消除Bug，只能幫助開發更容易發現Bug。

持續集成分成三個階段：

• 持續集成準備階段：根據軟件開發的需要，準備CI的一些前置工作

• 集成CI工具的代碼倉庫（Gitlab、Github、Jenkins等）

• 單元測試或者集成測試的腳本

• 觸發CI的配置文件，實現各種功能的Jobs

• 持續集成進行階段

• 推送代碼出發CI系統

• 通過CI系統監聽代碼的測試、構建，反饋集成結果

• 通過版本管理系統實現版本的管理

• 接續集成完成階段：反饋集成結果

2、CD 持續交付（Continuous Delivery）

持續交付：主要面向測試人員和產品，可以保證一鍵部署，常常要交付的內容包括

• 源代碼：缺點，代碼依賴的環境不容易控制

• 打包的二進制文件或者系統包：存在兼容性問題和環境差異出現的部署失敗

• 虛擬機鏡像交付：系統隔離最好，但占用系統資源嚴重

• Docker交付：容器交付，成本最低，兼容性最好

持續部署：此時要提供一個穩定的版本，包括所需的環境和依賴，主要面向用戶提供服務，發生錯誤要能快速回滾。

下圖為一個完整的CI/CD過程：

提供CI能力的工具包括：Gitlab、Github、Jenkins等，下面我們來看下如何通過Gihub的CI/CD來部署前端項目。

二、Github Action

1、Github Actions位置：

2、Github Actions執行任務圖：

3、配置文件說明

1、在項目根目錄下新建.github/workflows，在workflows下新建yml文件，命名可以任意，如下是一份yml配置文件

name: GitHub Actions Demo  # ci文件的名字 on: [push] # 觸發CI的條件 jobs:  # CI/CD通過執行一個個的Job來完成每個階段的工作，這里配置每個Jobs   Check: # Job的名稱     runs-on: ubuntu-latest # Runner，github托管的虛擬機環境，用來執行下面的Job命令     steps: # 執行步驟       - name: Check # 子步驟名稱         if: runner.os != 'Windows' # 執行條件         uses: actions/checkout@v2 # 使用的action，檢出分支，可以使用docker hub中的鏡像：docker://alpine:3.8        - name: ESLintCode # ESLint 檢測代碼質量         uses: actions/setup-node@v2 # 使用node環境       - run: yarn # 執行命令安裝依賴，也可以執行shell腳本./.github/scripts/build.sh       - run: yarn global add eslint && eslint ./src/*/**.js # 安裝全局ESLint并檢測代碼        - name: StyleLintCode # 檢測代碼樣式         uses: actions/setup-node@v2 # 使用node環境       - run: yarn # 執行命令安裝依賴       - run: yarn global add stylelist && stylelint ./src/*/**.less # 執行檢測命令    Build: # Job名稱     needs: Check # 決定執行的順序，通過needs，在Check任務執行完成后執行當前任務，指出數組，可以寫入多個     # The type of runner that the job will run on     runs-on: ubuntu-latest      # Steps represent a sequence of tasks that will be executed as part of the job     steps:       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it       - name: Check         uses: actions/checkout@v2        # Runs a single command using the runners shell       - name: Build         uses: actions/setup-node@v2         env:           ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}           BRANCH: main       - run: yarn       - run: yarn build:pre 復制代碼

4、針對特殊字段說明

workflow：一個yml文件配置一個工作流

job：一個workflow由一個或多個job組成

step：一個job由多個step組成，依次完成

action：每個step都要執行action，每個action都是多帶帶的腳本

uses：官方倉庫：github.com/actions

env： 環境變量配置：

• 自定義環境變量

name: Greeting on variable day on:   workflow_dispatch env: # 注意使用的作用域范圍   DAY_OF_WEEK: Monday jobs:   greeting_job:     runs-on: ubuntu-latest     env:       Greeting: Hello     steps:       - name: "Say Hello Mona it's Monday"         run: echo "$Greeting $First_Name. Today is $DAY_OF_WEEK!"         env:           First_Name: Mona 復制代碼

上面的$${{ secrets.ACCESS_TOKEN }}變量配置在：

• 系統環境變量：具體可以查看文檔

5、CICD實例

• 下面我們來實際操作一下，首先要新建一個項目，這里我們使用Create-React-App創建一個應用，推送Github倉庫

• 在package.json中增加一行配置

{   "homepage": "https://[your github name].github.io/[your project name]" } 復制代碼

• 在項目下新建.github/workflows/main.yml文件，可以復制上面的文件，并添加下面Deploy的Job配置

name: CI  env:   CI: false  on:   push:     branches: [ main ]  permissions:    contents: write  # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs:   # This workflow contains a single job called "build"   Check:     runs-on: ubuntu-latest     steps:       - name: checkout         uses: actions/checkout@v2        - name: ESLintCode         uses: actions/setup-node@v2       - run: yarn       - run: npm install -g eslint && eslint ./src/*/**.js        - name: StyleLintCode         uses: actions/setup-node@v2       - run: npm install -g stylelint stylelint-less       - run: mkdir .tmp-css-check && touch .tmp-css-check/.stylelintrc.json && echo '{"plugins":["stylelint-less"],"rules":{}}' >> .tmp-css-check/.stylelintrc.json && stylelint "src/**/*.less" --config .tmp-css-check/.stylelintrc.json --aei    Deploy:     needs: Check     # The type of runner that the job will run on     runs-on: ubuntu-latest      # Steps represent a sequence of tasks that will be executed as part of the job     steps:       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it       - name: checkout         uses: actions/checkout@v2        # Runs a single command using the runners shell       - name: build         uses: actions/setup-node@v2         env:           ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}           BRANCH: main       - run: yarn       - run: yarn build:prod        - name: deploy         uses: JamesIves/github-pages-deploy-action@v4.3.3         with:           branch: gh-pages           folder: build 復制代碼

• 在Github中配置訪問Page

以上配置文件依次處理包括：

• 當推送代碼到Github倉庫的main分支，就會觸發Action，然后就會執行配置中的腳本

• 開始執行Check任務，依次進行代碼檢出、ESLint檢測、StyleLint檢測

• 執行完畢后執行Deploy任務，依次執行檢出代碼、打包代碼、部署分支

然后就可以訪問我們部署的靜態站點了，地址：richlpf.github.io/antd-templa…

作者：前端中后臺
鏈接：https://juejin.cn/post/7145335762890784799
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。