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 复制代码

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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。