持续集成与部署（二）：持续集成1-巧用 Github Actions

1. GitHub Actions 是什么？

GitHub Actions 是 GitHub 于 2018 年 10 月推出的一个 CI\CD 服务（持续集成和持续部署）。简单明了的说 就是你可以给你的代码仓库部署一系列自动化脚本，在你进行了提交/合并分支等操作后，自动执行脚本。

通过 GitHub Actions 可快速搭建 GitHub Pages 静态网站（域名为 http://[username].github.io ），使用它来发布、测试、部署，是非常方便的

大家知道，持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub 把这些操作就称为 actions。很多操作在不同项目里面是类似的，完全可以共享。GitHub 注意到了这一点，想出了一个很妙的点子，允许开发者把每个操作写成独立的脚本文件，存放到代码仓库，使得其他开发者可以引用。如果你需要某个 action，不必自己写复杂的脚本，直接引用他人写好的 action 即可，整个持续集成过程，就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方。

2. Github Actions 概念

GitHub Actions 有一些自己的术语。

workflow （工作流程）：持续集成一次运行的过程，就是一个 workflow。
job （任务）：一个 workflow 由一个或多个 jobs 构成，含义是一次持续集成的运行，可以完成多个任务。
step（步骤）：每个 job 由多个 step 构成，一步步完成。
action （动作）：每个 step 可以依次执行一个或多个命令（action）。

3. workflow 文件

GitHub Actions 的配置文件叫做 workflow 文件，存放在代码仓库的 .github/workflows目录。

workflow 文件采用 YAML 格式，文件名可以任意取，但是后缀名统一为 .yml ，比如foo.yml。一个库可以有多个 workflow 文件。GitHub 只要发现 .github/workflows目录里面有 .yml 文件，就会自动运行该文件。

workflow 文件的配置字段非常多，详见官方文档一些基本字段。

（1）name

name字段是 workflow 的名称。如果省略该字段，默认为当前 workflow 的文件名。

yml
name: GitHub Actions Demo

（2） on on字段指定触发 workflow 的条件，通常是某些事件。

yml
on: push

上面代码指定，push事件触发 workflow。

on字段也可以是事件的数组。

yml
on: [push, pull_request]

上面代码指定，push事件或 pull_request 事件都可以触发 workflow。

完整的事件列表，请查看官方文档。除了代码库事件，GitHub Actions 也支持外部事件触发，或者定时运行。

（3） on.<push|pull_request>.<tags|branches>

指定触发事件时，可以限定分支或标签。

yml
on:
  push:
    branches:    
      - master

上面代码指定，只有 master 分支发生 push 事件时，才会触发 workflow。

（4） jobs.<job_id>.name

workflow 文件的主体是 jobs 字段，表示要执行的一项或多项任务。

jobs 字段里面，需要写出每一项任务的 job_id，具体名称自定义。job_id里面的name字段是任务的说明。

yml
jobs:
  my_first_job:
    name: My first job
  my_second_job:
    name: My second job

上面代码的 jobs 字段包含两项任务，job_id 分别是 my_first_job 和my_second_job。

（5） jobs.<job_id>.needs

needs 字段指定当前任务的依赖关系，即运行顺序。

yml
jobs:
  job1:
  job2:
    needs: job1
  job3:
    needs: [job1, job2]

上面代码中，job1 必须先于 job2 完成，而 job3 等待 job1 和 job2 的完成才能运行。因此，这个 workflow 的运行顺序依次为：job1、job2、job3。

（6） jobs.<job_id>.runs-on runs-on字段指定运行所需要的虚拟机环境。它是必填字段。目前可用的虚拟机如下。


ubuntu-latest，ubuntu-18.04或ubuntu-16.04
windows-latest，windows-2019或windows-2016
macOS-latest或macOS-10.14

下面代码指定虚拟机环境为 ubuntu-18.04。

yml
runs-on: ubuntu-18.04

（7） jobs.<job_id>.steps

steps 字段指定每个 Job 的运行步骤，可以包含一个或多个步骤。每个步骤都可以指定以下三个字段。

jobs.<job_id>.steps.name：步骤名称。
jobs.<job_id>.steps.run：该步骤运行的命令或者 action。
jobs.<job_id>.steps.env：该步骤所需的环境变量。

下面是一个完整的 workflow 文件的范例。

yml
name: Greeting from Mona
on: push

jobs:
  my-job:
    name: My Job
    runs-on: ubuntu-latest
    steps:
    - name: Print a greeting
      env:
        MY_VAR: Hi there! My name is
        FIRST_NAME: Mona
        MIDDLE_NAME: The
        LAST_NAME: Octocat
      run: |
        echo $MY_VAR $FIRST_NAME $MIDDLE_NAME $LAST_NAME.

上面代码中，steps字段只包括一个步骤。该步骤先注入四个环境变量，然后执行一条 Bash 命令。

4. 实例：React 项目发布到 GitHub Pages

（1） 第一件事情是我们需要先创建一个 GitHub 密钥，因为我们需要将示例部署至 Github Page ，需要写权限，创建完成后将这个秘钥保存在当前仓库的 Settings/Secrets 里面。

创建秘钥可以参考官方文档。

点击自己头像，选择 Settings ：

在左边栏选择 Developer settings：

然后在左边栏选择 Personal access tokens 点击头上的 Generate new token 创建一个新的 Token ：

注意：创建完成后需要保存好这个 Token ，它只会出现这一次。

接下来，在github中创建一个项目，我这里创建的名字叫做 github-actions-demo ，然后点击项目中的 Settings ，在 Secrets 的栏目中的 Actions, 点击右上角的New repository secret，将刚才创建的 Token 填写进去：

（2） 接下来是创建一个标准的 React 应用：


npx create-react-app github-actions-demo

（3） 打开项目中的package.json文件，添加一个homepage字段，如下：

json
"homepage": "https://[username].github.io/github-actions-demo",

将[username]替换成你自己的 GitHub 用户名

（4） 在个人代码仓库中找到 action，如果你是一个前端项目，可以使用 Node.js 的模板，点击 new workflow ，生产 workflow 文件

或者这个项目中，在 .github/workflows 的目录中手动新增一个 workflow 文件，名字可以随便取，这个我这里的名称是 ci.yml

（5） 我们来看看Github Action配置文件的基本构成，配置文件格式是.yml，示例如下：

yml
name: GitHub Actions Build and Deploy Demo
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
      with:
        persist-credentials: false
    - name: Install and Build
      run: |
        npm install
        npm run-script build
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: build

上面这个 workflow 文件的要点如下。

整个流程在 master 分支发生 push 事件时触发。
只有一个 job ，运行在虚拟机环境 ubuntu-latest。
第一步是获取源码，使用的 action 是 actions/checkout@v2 。如果用的是这个版本必须得加上 persist-credentials:false
第二步是构建，使用npm install npm run-script build命令。
第三步是部署，使用的 action 是 JamesIves/github-pages-deploy-action@releases/v3。
第三步需要三个环境变量，分别为 GitHub 密钥、发布分支、构建成果所在目录、构建脚本。其中，只有 GitHub 密钥是秘密变量（就是之前配置的变量），需要写在双括号里面，其他三个都可以直接写在文件里。

（6） 保存上面的文件后，将整个仓库推送到 GitHub。

GitHub 发现了 workflow 文件以后，就会自动运行。你可以在网站上实时查看运行日志，日志默认保存30天。

（7） 在setting中设置一下Github Page

等到项目部署成功后，访问 GitHub Page，会看到构建成果已经发上网了。然后每次推送到 mater 分支，Github Action 都会自动运行，将构建产物发布至 Github Page