使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法

下面是使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法。

准备工作

在开始之前，我们需要完成以下准备工作：

1. 创建一个 Angular 应用
2. 将 Angular 应用代码存储到 Github 仓库中
3. 创建 Github Personal Access Token (PAT)

创建 Angular 应用

如果您还没有创建 Angular 应用，请参考 Angular 官方文档 创建一个。

将 Angular 应用代码存储到 Github 仓库中

创建完 Angular 应用后，将应用代码存储到 Github 仓库中。

创建 Github Personal Access Token (PAT)

PAT 是 Github 提供的一种用于访问 Github API 的身份验证方式。我们需要创建一个 PAT 以供 Github Actions 自动部署应用代码时使用。

关于 PAT 的创建和使用，详见 Github 官方文档。

配置 Github Actions

接下来我们需要配置 Github Actions，使其能够自动部署 Angular 应用。

自动生成部署密钥

Github Actions 需要访问 Github 仓库中存储的密钥才能发布应用代码。我们可以使用 peaceiris/actions-gh-pages Action 自动生成用于发布的密钥。

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-18.04
    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '12.x'
    - run: npm install
    - run: npm run build:prod
    - name: Deploy to GitHub pages
      uses: peaceiris/actions-gh-pages@v3.7.0
      with:
        publish_dir: './dist/your-app-name' # Angular 应用生成的输出目录
        publish_branch: gh-pages
        personal_token: ${{ secrets.PAT }} # 在 Github 仓库中存储的 PAT
        ssh_private_key: ${{ secrets.DEPLOY_KEY }} # 自动生成的用于发布的密钥

将以上代码保存到 .github/workflows/deploy.yml 文件中，然后将 your-app-name 修改为您的 Angular 应用名称，提交并推送到 Github 仓库。

配置 Github 仓库的 Secrets

在使用 PAT 和密钥时，需要将它们存储到 Github 仓库中的 Secrets 中，以便 Github Actions 在部署时使用它们。

1. 在 Github 仓库的 Settings 中，选择 Secrets 选项卡
2. 点击 New repository secret 按钮
3. 创建两个 Secrets，分别为 PAT 和 DEPLOY_KEY
4. PAT 的值为创建的 Github PAT 的值
5. DEPLOY_KEY 的值应该是使用 peaceiris/actions-gh-pages 自动生成的用于发布的密钥，代码如下：

ssh-keygen -t rsa -b 4096 -C $DEPLOY_KEY_EMAIL -f $HOME/.ssh/id_rsa
echo "$DEPLOY_KEY" > $HOME/.ssh/id_rsa
chmod 600 $HOME/.ssh/id_rsa
ssh-keyscan github.com >> $HOME/.ssh/known_hosts

将以上代码拷贝到终端，并将 $DEPLOY_KEY_EMAIL 替换成您的 Github email 地址，然后执行。执行完后，将终端输出的 DEPLOY_KEY 的值复制到 DEPLOY_KEY 的 Secrets 中即可。

示例说明

示例 1：部署 Angular 应用到 Github Pages

假设您已经按照上述步骤进行了配置，现在可以将 Angular 应用部署到 Github Pages 中了。

1. 在 Github 仓库的 Settings 中，找到 Github Pages 选项卡，选择 gh-pages 分支作为发布目录
2. 通过 ng build --prod 命令生成 Angular 应用的代码
3. 将生成的代码存储到 Github 仓库中，并将 main 分支推送到 Github
4. 等待 Github Actions 部署完成，访问 https://<username>.github.io/<repository-name>/ 即可访问部署的 Angular 应用。

示例 2：修改 Angular 应用后自动部署到 Github Pages

假设您已经按照上述步骤进行了配置，现在可以将 Angular 应用的修改自动部署到 Github Pages 中了。

1. 修改 Angular 应用的代码
2. 将代码提交并推送到 Github
3. 等待 Github Actions 自动部署完成，访问 https://<username>.github.io/<repository-name>/ 即可查看修改后的应用。

以上就是使用 Github Actions 自动部署 Angular 应用到 Github Pages 的完整攻略和示例说明。