Github CICD自动化部署实践

一、什么是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

ACCESS_TOKEN 定义的地方，如下图

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 }}变量配置在：

• 系统环境变量：具体可以查看文档

环境变量	说明
CI	始终设置为 true
GITHUB_ACTION	当前运行的操作的名称，或步骤的 id。 例如，对于操作 __repo-owner_name-of-action-repo。
GITHUB_JOB	当前作业的 job_id

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…