使用 Github Actions 自动构建发布 Angular App

使用 Github Actions 自动构建发布 Angular App

Github Actions 想必都听说过。它是为 Github 上的项目添加 CI/CD 工作流的自动化工具。 之前使用过 Github Actions 构建 React 项目，这次使用 Github Actions 来构建 Angular 项目。

创建一个 Github项目

这个就不说了，很简单。包括创建完成之后初始化 Angular 项目。 创建完成之后,可以在项目详情页的 tab 栏看到 Actions 选项，这个就是我们这次工作的中心：

添加 workflow 文件

在 Github 中提供了各种各样的 workflow 文件：

这次为了更加熟悉这方面的操作，我们手动来生成。 首先在根目录中添加 .github 文件，以及其子文件夹 workflows ，同时在 workflows 文件夹中添加一个主文件，main.yml：

一个项目中支持多个workflow 文件，用于不同的环境或情况。这里为了简单，只创建一个。

添加相关配置

在 Github Actions 中定义了各种事件，通过定义这些事件，来触发我们的 Action，这里我们简单的使用 push 来完成我们的示例 action：

 on: push
 name: Build Angular
 jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
 ​
    steps:
      - uses: actions/checkout@v2
 ​
      - name: Cache node modules
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - name: Node ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm install and deploy
 env:
 GITHUB_TOKEN: ${{secrets.TOKEN}}
        run: |
          npm install
          npm run deploy

• line1 使用 push 操作来触发工作流

• lines 3~8 定义了一个运行在 ubuntu-latest 环境的被称之为 Build Angular 的 job。每次运行都是在一个全新的实例上。一个 job 可以包含一个或多个 step。同时，我们还定义了运行时需要的 NodeJS 版本。

• line 11 这是我们定义的第一个步骤，我们将使用 https://github.com/actions/checkout 的 GitHub Action 来拉取我们项目的源码。官方介绍为： This action checks-out your repository under $GITHUB_WORKSPACE, so your workflow can access it.

• line 13~19 由于我们需要在构建应用程序之前安装项目所需的 npm 包，所以我们使用名为 cache 的 GitHub Action 来缓存node modules 的数据。我们使用这一步配置来监测我们的 package-lock.json,如果没有变更将使用缓存中的modules，能大大加快构建速度。

• line 20~23 构建过程少不了配置 node 环境，这里使用 setup-node 的 GitHub Action 来配置环境变量。这里使用的是 lines 3～8 是配置 OS 时设置的 node。

• line 24~29 这一步就比较清晰了，使用 npm i & npm run deploy 来构建应用。在这里如果你想使用与此配置相同的构建流程，需要在项目的 package.json 文件中添加 *"deploy"*: "ng deploy --no-silent" （此处是使用 angular-cli-ghpages进行打包部署）如果不是，你可以在 packge.json 中添加任何自定义的命令，并将文件修改成相应的编译命令。

  • 当然你也可以在这里配置其他的命令。

• secrets.TOKEN 是一个 API token，用于授权仓储的一些权限。详情见下一步。

添加 Github Token

在我们以往的开发中，可能已经创建了一个 GitHub token 用来访问我们的 repository。这里我们也快速的过一遍：

• 点击 链接🔗 进行跳转；

• 生成有 repository 访问权限的 token：

  

• 生成之后复制

• 在此项目中的 /Setting/Secrets tab 页中，添加一个新的 New repository secret ：

  

• 然后将复制的 token 粘贴进来，这里需要注意的是 name 一定是与 yml 文件中的 line 26： token: ${{ secrets.TOKEN }} 中的 secrets 的 key 一致。

  

启动自动部署

当我们代码完成之后，使用 git push 命令，就会触发此 Action。
这里是 示例部署项目。也可以点击actions tab 来查看相关所有的 Actions 运行历史。