使用 GitHub Actions 在 GitHub Pages 中构建和部署 Angular 应用

介绍

1.配置gh-pages

2. 设置用于部署的 npm-script

3. GitHub Actions

介绍

很多时候，我们需要一个快速有效地集成或部署前端应用程序的系统。有时，我们又需要花费大量时间手动部署应用程序。

如今，随着软件项目的提交和开发人员的增加，自动执行此部署是绝对必要的。

本文将介绍如何使用GitHub Actions和GitHub Pages为 Angular 应用程序构建和部署系统。学习本文的先决条件是将我们的应用程序添加到GitHub 仓库中。

1.配置gh-pages

我们要做的第一件事是配置一个分支，用于提供静态文件（html、css、js、图片……）。默认情况下，GitHub 有一个名为 linked 的分支，gh-pages它链接到其静态服务器，并为我们提供了一个如下格式的域名https://<username>.github.io/<repository>。因此，我们要做的第一件事就是创建gh-page如下图所示的分支。

我们需要删除项目文件，因为构建完成后，应用程序的文件必须保留在这个仓库中。删除gh-pages分支中文件的步骤如下：

> git fetch origin gh-pages
> git checkout gh-pages
Branch 'gh-pages' set up to track remote branch 'gh-pages' from 'origin'.Switched to a new branch 'gh-pages'

一旦我们位于适当的分支，我们只需删除所有文件。

> git rm -rf .
> git add .
> git commit -m "remove files"
> git push

完成这些步骤后，您的存储库应该是空的，然后我们就可以进行下一步了。

2. 设置用于部署的 npm-script

第二步是配置一个npm 脚本，该脚本允许我们执行构建操作，而不是从终端运行此任务（尽管 Angular 应用本身就有一个与构建操作相关的npm 脚本） 。在我们的例子中，我们需要一个更具体的脚本，其中指定构建任务将在生产
模式（--prod） 下完成，并且项目的基地址不是根目录，而是存储库的名称。--base-href=/<repository>/.

因此，我们返回分支并通过添加以下npm 脚本master来继续配置文件：package.json

    git checkout master

我们编辑该package.json文件。

    "deploy": "ng build --prod --base-href=/angular-ci-cd/"

3. GitHub Actions

这是本文最有趣的一步，因为我们将使用 GitHub 自己的工具GitHub Actions。为此，请转到GitHub 中的“Actions”选项卡。然后，您将看到几个可以启动的模板。

这些文件是.yml格式的配置。这些文件将自动在.github/workflows目录中创建。在我们的具体案例中，我们将创建一个名为的文件build-deploy.yml，其内容如下：

name: Build and Deploy

on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v1
    - uses: actions/setup-node@v1 #this installs node and npm for us
      with:
        node-version: '10.x'
    - uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-    
    - name: Build
      run: |
        npm install
        npm run-script deploy
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        BRANCH: gh-pages
        FOLDER: dist/angular-ci-cd

让我们开始理解这个文件以及它的作用。如果您之前使用过.YML/.YAML文件，您就会知道必须非常严格地处理空格或制表符，因为如果文件没有完全对齐，或者将空格和制表符混合在一起，就会出现问题。

• name ：操作的名称，以便能够将其与我们配置的其他操作区分开来。
• on：该操作应在何时触发？在本例中，我们仅希望在分支上的推送操作完成时完成构建和部署过程。请注意，为此我们在文件中创建了不同级别的缩进。虽然这不是本文的目标，但此触发参数允许我们构建一个 CI（持续集成）系统，在该系统中，我们的应用程序测试可以针对任何Pull 请求执行。masterbuild-deploy.yml
• jobs ：此部分定义了将在action中执行的任务。一个action中可以定义不同的任务。在我们的具体案例中，我们只需要配置一个名为build-and-deploy 的任务。您必须在此部分定义任务中的每个步骤。因此，我们将在下文中对其进行更详细的定义。

工作

定义任务所需的第一个元素是分配一个唯一的标识符或名称，在本例中是“构建和部署”。任务可以在不同的环境中执行，这在“运行”部分中进行了描述。在本例中，由于任务是构建和部署应用程序，因此只定义了一个执行环境。如果您想配置测试环境，这个标签非常有用，因为它允许您配置不同的环境，在这些环境中运行应用程序的一系列测试。

步骤

我们文件中的下一项是执行正在配置的操作.YML的步骤序列。我们正在配置的任务由三个步骤组成，如下所示：

1. 查看。
2. 建造。
3. 部署。

1. 结账

GitHub Actions最强大的功能之一是允许使用第三方创建的操作。我的意思是，如果我们总是执行相同的步骤，我们可以参数化并重用它们（这是另一篇文章中的内容，与本文无关）。如果我们想使用第三方操作，则必须使用关键字uses，如代码所示。

    - name: Checkout
      uses: actions/checkout@v1

在此任务中，我们使用actions/checkout@v1，可在此处找到：https://github.com/actions/checkout

我们在这个任务中做什么？很简单，这个操作执行从 GitHub 工作区上的存储库签出的操作。我的意思是，我们在GitHub Actions的工作区中执行命令git checkout。因此，我们可以完全访问流程的以下步骤。

2. 构建

下一步是构建我们的 Angular 应用程序，与手动构建完全相同。因此，我们应该使用 安装依赖项npm install，然后运行我们为构建应用程序配置的npm-scriptnpm run-script build ： 。因此，调用的步骤Build将由这两个步骤组成，我们可以
使用GitHub Actionsrun 标签来描述它们。

    - name: Build 
      run: | 
           npm install 
           npm run-script build

3.部署

最后一步是部署应用程序。我们的应用程序部署非常简单，因为一旦完成Angular 应用程序的构建阶段，我们只需要静态文件（html、css 和 .js）。因此，我们只需复制代码，使其适配到GitHub Pages即可。此操作始终使用相同的模式，可能需要更改一些设置。因此，我们将使用第三方操作来大大简化此任务：https://github.com/JamesIves/github-pages-deploy-action

在此操作中，我们必须配置一个安全的TOKEN来访问存储库，这一点很重要。使用GitHub API有多种显示应用程序的方法：

1. SSH：使用部署密钥（Deploy Key）。
2. ACCESS_TOKEN：为个人帐户 GitHub 生成密钥，这必须通过从 GitHub 的配置面板创建密钥来完成。
3. GITHUB_TOKEN：GitHub 自动创建一个名为的秘密，GITHUB_TOKEN用于工作流中。

我们将使用GITHUB_TOKEN它来进行部署，因为它将从 GitHub 本身完成到GitHub Pages，因此，我们将安全责任委托给 GitHub 本身。

要在GitHub Pages中成功部署，必须配置以下参数：要部署代码（gh-pages ）的分支（BRANCH ）和代码所在的目录（FOLDER ）。

部署（ Deploy ）的操作如下所示：

- name: Deploy 
  uses: JamesIves/github-pages-deploy-action@releases/v3                             
  with:  
     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     BRANCH: gh-pages  
      FOLDER: dist/angular-ci-cd

奖金

使用前面的步骤足以部署我们的应用程序。但是，我们可能需要配置两个额外的步骤来改进我们的工作流程。一个有趣的配置是需要特定版本的软件包node和/或缓存node以前安装的软件包，这样您就不必在每次构建时都安装它们。

因此，我们需要配置的两个步骤如下：

• 设置节点。
• 缓存。

    - uses: actions/setup-node@v1 
      with:
        node-version: '10.x'
    - uses: actions/cache@v1 
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-

在上面的例子中，已经选择了版本，并且缓存文件已经遵循了操作https://github.com/actions/cachenode 10的指示，其中根据开发语言描述了应该缓存哪些文件。

4.验证

最后，我们必须检查构建和部署是否正在进行，为此我们转到显示工作流程的GitHub Actions选项卡。

如果我们导航到不同的面板，我们可以看到每个任务的日志：

在这里，您应该看到所有步骤都已圆满完成。

最后，我们在 URL 中找到我们的应用程序：https://<user>.github.io/<repository>。在我们的例子中，我们已将应用程序部署在此路由上：
https://caballerog.github.io/angular-ci-cd/

结论

在本文中，我们介绍了一种使用GitHub Actions和GitHub Pages为 Angular 应用程序配置构建和部署系统的快速简便的方法。本文中学到的概念可以迁移到任何其他持续集成系统。

在使用GitHub Actions和GitHub Pages之前，我已经使用DroneCI在私有静态服务器上部署了几个月，从那段经验中学到的概念已经顺利地转移到了这个持续集成系统中。因此，本文中学到的概念可以
轻松地转移到其他工具上。

现在，您无需再费心费力地在 Angular 中部署应用程序了。此外，它还能完美兼容私有仓库。