GitHub Actions 自动部署 Angular 应用到 Github Pages

2023-10-31 02:56:46

前言

最近在学习 Angular，一些基础的语法也学习的差不多了，就在 github 上新建了一个代码仓库，准备用 ng-zorro 搭个后台应用的模板，方便自己以后写些小东西时可以直接使用。前端项目，最主要的还是能够实际看到，因此考虑找个地方部署，因为自己的博客是部署到 github pages 上，所以顺理成章的，那就把这个项目也部署到 github pages 上吧。

部署步骤

1. 创建 Github Pages 仓库

首先，需要创建一个新的 Github 仓库，专门用于存放 Angular 应用。这个仓库的名称必须以 .github.io 结尾，比如我的项目仓库名为 my-angular-app.github.io。

2. 配置 Github Actions

接下来，需要在 Github 仓库中设置 Github Actions。Github Actions 是一个自动化工具，可以帮助我们执行各种任务，比如构建、测试和部署代码。

要设置 Github Actions，首先需要创建一个 .github/workflows 目录，并在其中创建一个名为 main.yml 的文件。这个文件将包含 Github Actions 的工作流配置。

name: Deploy Angular App to Github Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Install Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '12'

      - name: Install Angular CLI
        run: npm install -g @angular/cli

      - name: Build Angular App
        run: ng build --prod

      - name: Deploy to Github Pages
        uses: JamesIves/github-pages-deploy-action@3.7.1
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages
          FOLDER: dist
          CLEAN: true

在这个工作流配置中，我们定义了一个名为 deploy 的作业，这个作业会在每次将代码推送到 main 分支时自动触发。作业的步骤包括：

uses: actions/checkout@v2：检出代码到工作目录。
uses: actions/setup-node@v1：安装 Node.js。
run: npm install -g @angular/cli：安装 Angular CLI。
run: ng build --prod：构建 Angular 应用。
uses: JamesIves/github-pages-deploy-action@3.7.1：将构建好的 Angular 应用部署到 Github Pages。

3. 提交代码

现在，就可以将 Angular 应用的代码提交到 Github 仓库了。提交代码后，Github Actions 会自动触发部署工作流，将 Angular 应用部署到 Github Pages。

4. 查看部署结果

部署完成后，就可以在 Github Pages 上查看 Angular 应用了。Angular 应用的 URL 为 https://<username>.github.io/<repository-name>，比如我的 Angular 应用的 URL 为 https://github.com/username/my-angular-app.github.io。