Github Actions 想必都听说过。它是为 Github 上的项目添加 CI/CD 工作流的自动化工具。 之前使用过 Github Actions 构建 React 项目,这次使用 Github Actions 来构建 Angular 项目。
这个就不说了,很简单。包括创建完成之后初始化 Angular 项目。 创建完成之后,可以在项目详情页的 tab 栏看到 Actions
选项,这个就是我们这次工作的中心:
在 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 用来访问我们的 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 运行历史。