一、什么是CICD

翻译过来便是继续构建、继续布置，在软件工程中，一个项目的迭代往往是很频频的，每次都要重新布置，就成了一件很繁琐的事情，那么怎么确保项目能够继续的构建和布置呢？

咱们先来看一个软件的开发流水线一般为：

  • 需求规划：软件需求剖析和规划
  • 开发阶段：进入编码、程序开发、简单的本地单元测验、代码Review等
  • 全面测验：功能测验、功能测验、单元测验、界面测验、安全测验等
  • 发布：将代码布置，交给用户运用

1、CI 继续集成（Continuous Integration）

继续集成：频频的将代码合并到主分支中，着重经过集成测验反应给开发一个结果，不论失败仍是成功。

继续集成并不能消除Bug，只能帮助开发更简单发现Bug。

继续集成分成三个阶段：

  • 继续集成准备阶段：根据软件开发的需求，准备CI的一些前置作业
    • 集成CI工具的代码库房（Gitlab、Github、Jenkins等）
    • 单元测验或许集成测验的脚本
    • 触发CI的装备文件，完结各种功能的Jobs
  • 继续集成进行阶段
    • 推送代码出发CI体系
    • 经过CI体系监听代码的测验、构建，反应集成结果
    • 经过版别办理体系完结版别的办理
  • 接续集成完结阶段：反应集成结果

2、CD 继续交给（Continuous Delivery）

继续交给：首要面向测验人员和产品，能够确保一键布置，常常要交给的内容包含

  • 源代码：缺陷，代码依靠的环境不简单控制
  • 打包的二进制文件或许体系包：存在兼容性问题和环境差异出现的布置失败
  • 虚拟机镜像交给：体系阻隔最好，但占用体系资源严重
  • Docker交给：容器交给，成本最低，兼容性最好

继续布置：此时要提供一个安稳的版别，包含所需的环境和依靠，首要面向用户提供服务，产生错误要能快速回滚。

下图为一个完好的CI/CD过程：

Github CICD自动化部署实践

提供CI才能的工具包含：Gitlab、Github、Jenkins等，下面咱们来看下怎么经过Gihub的CI/CD来布置前端项目。

二、Github Action

1、Github Actions方位：

Github CICD自动化部署实践

2、Github Actions履行使命图：

Github CICD自动化部署实践

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 }}变量装备在：

Github CICD自动化部署实践

  • 体系环境变量：详细能够检查文档
环境变量 说明
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 CICD自动化部署实践
Github CICD自动化部署实践

  • 在项目下新建.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 CICD自动化部署实践

以上装备文件依次处理包含：

  • 当推送代码到Github库房的main分支，就会触发Action，然后就会履行装备中的脚本
  • 开始履行Check使命，依次进行代码检出、ESLint检测、StyleLint检测
  • 履行完毕后履行Deploy使命，依次履行检出代码、打包代码、布置分支

然后就能够拜访咱们布置的静态站点了，地址：richlpf.github.io/antd-templa…

Github CICD自动化部署实践