「时光不负，创作不停，本文正在参加2021年终总结征文大赛」
使用 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这是我们定义的第一个步骤，我们将使用 github.com/actions/che… 的 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/Secretstab 页中，添加一个新的New repository secret： -
然后将复制的 token 粘贴进来，这里需要注意的是
name一定是与yml文件中的line 26：token: ${{ secrets.TOKEN }}中的secrets的key一致。
启动自动部署
配置文件修改提交之后，配置部分就完成了。
当我们代码完成之后，使用 git push 命令，就会触发此 Action。
这里是 示例部署项目。也可以点击actions tab 来查看相关所有的 Actions 运行历史。
