一、什么是CICD

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

我們先來看一個(gè)軟件的開發(fā)流水線一般為：

• 需求設(shè)計(jì)：軟件需求分析和設(shè)計(jì)

• 開發(fā)階段：進(jìn)入編碼、程序開發(fā)、簡(jiǎn)單的本地單元測(cè)試、代碼Review等

• 全面測(cè)試：功能測(cè)試、性能測(cè)試、單元測(cè)試、界面測(cè)試、安全測(cè)試等

• 發(fā)布：將代碼部署，交給用戶使用

1、CI 持續(xù)集成（Continuous Integration）

持續(xù)集成：頻繁的將代碼合并到主分支中，強(qiáng)調(diào)通過集成測(cè)試反饋給開發(fā)一個(gè)結(jié)果，不管失敗還是成功。

持續(xù)集成并不能消除Bug，只能幫助開發(fā)更容易發(fā)現(xiàn)Bug。

持續(xù)集成分成三個(gè)階段：

• 持續(xù)集成準(zhǔn)備階段：根據(jù)軟件開發(fā)的需要，準(zhǔn)備CI的一些前置工作

• 集成CI工具的代碼倉(cāng)庫（Gitlab、Github、Jenkins等）

• 單元測(cè)試或者集成測(cè)試的腳本

• 觸發(fā)CI的配置文件，實(shí)現(xiàn)各種功能的Jobs

• 持續(xù)集成進(jìn)行階段

• 推送代碼出發(fā)CI系統(tǒng)

• 通過CI系統(tǒng)監(jiān)聽代碼的測(cè)試、構(gòu)建，反饋集成結(jié)果

• 通過版本管理系統(tǒng)實(shí)現(xiàn)版本的管理

• 接續(xù)集成完成階段：反饋集成結(jié)果

2、CD 持續(xù)交付（Continuous Delivery）

持續(xù)交付：主要面向測(cè)試人員和產(chǎn)品，可以保證一鍵部署，常常要交付的內(nèi)容包括

• 源代碼：缺點(diǎn)，代碼依賴的環(huán)境不容易控制

• 打包的二進(jìn)制文件或者系統(tǒng)包：存在兼容性問題和環(huán)境差異出現(xiàn)的部署失敗

• 虛擬機(jī)鏡像交付：系統(tǒng)隔離最好，但占用系統(tǒng)資源嚴(yán)重

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

持續(xù)部署：此時(shí)要提供一個(gè)穩(wěn)定的版本，包括所需的環(huán)境和依賴，主要面向用戶提供服務(wù)，發(fā)生錯(cuò)誤要能快速回滾。

下圖為一個(gè)完整的CI/CD過程：

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

二、Github Action

1、Github Actions位置：

2、Github Actions執(zhí)行任務(wù)圖：

3、配置文件說明

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

name: GitHub Actions Demo  # ci文件的名字 on: [push] # 觸發(fā)CI的條件 jobs:  # CI/CD通過執(zhí)行一個(gè)個(gè)的Job來完成每個(gè)階段的工作，這里配置每個(gè)Jobs   Check: # Job的名稱     runs-on: ubuntu-latest # Runner，github托管的虛擬機(jī)環(huán)境，用來執(zhí)行下面的Job命令     steps: # 執(zhí)行步驟       - name: Check # 子步驟名稱         if: runner.os != 'Windows' # 執(zhí)行條件         uses: actions/checkout@v2 # 使用的action，檢出分支，可以使用docker hub中的鏡像：docker://alpine:3.8        - name: ESLintCode # ESLint 檢測(cè)代碼質(zhì)量         uses: actions/setup-node@v2 # 使用node環(huán)境       - run: yarn # 執(zhí)行命令安裝依賴，也可以執(zhí)行shell腳本./.github/scripts/build.sh       - run: yarn global add eslint && eslint ./src/*/**.js # 安裝全局ESLint并檢測(cè)代碼        - name: StyleLintCode # 檢測(cè)代碼樣式         uses: actions/setup-node@v2 # 使用node環(huán)境       - run: yarn # 執(zhí)行命令安裝依賴       - run: yarn global add stylelist && stylelint ./src/*/**.less # 執(zhí)行檢測(cè)命令    Build: # Job名稱     needs: Check # 決定執(zhí)行的順序，通過needs，在Check任務(wù)執(zhí)行完成后執(zhí)行當(dāng)前任務(wù)，指出數(shù)組，可以寫入多個(gè)     # 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 復(fù)制代碼

4、針對(duì)特殊字段說明

workflow：一個(gè)yml文件配置一個(gè)工作流

job：一個(gè)workflow由一個(gè)或多個(gè)job組成

step：一個(gè)job由多個(gè)step組成，依次完成

action：每個(gè)step都要執(zhí)行action，每個(gè)action都是多帶帶的腳本

uses：官方倉(cāng)庫：github.com/actions

env： 環(huán)境變量配置：

• 自定義環(huán)境變量

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 復(fù)制代碼

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

• 系統(tǒng)環(huán)境變量：具體可以查看文檔

5、CICD實(shí)例

• 下面我們來實(shí)際操作一下，首先要新建一個(gè)項(xiàng)目，這里我們使用Create-React-App創(chuàng)建一個(gè)應(yīng)用，推送Github倉(cāng)庫

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

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

• 在項(xiàng)目下新建.github/workflows/main.yml文件，可以復(fù)制上面的文件，并添加下面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 復(fù)制代碼

• 在Github中配置訪問Page

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

• 當(dāng)推送代碼到Github倉(cāng)庫的main分支，就會(huì)觸發(fā)Action，然后就會(huì)執(zhí)行配置中的腳本

• 開始執(zhí)行Check任務(wù)，依次進(jìn)行代碼檢出、ESLint檢測(cè)、StyleLint檢測(cè)

• 執(zhí)行完畢后執(zhí)行Deploy任務(wù)，依次執(zhí)行檢出代碼、打包代碼、部署分支

然后就可以訪問我們部署的靜態(tài)站點(diǎn)了，地址：richlpf.github.io/antd-templa…

作者：前端中后臺(tái)
鏈接：https://juejin.cn/post/7145335762890784799
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。