首页 | 编程 | Java

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

2020年07月20日 作者：墨墨墨墨小宇原文

前言

最近在学习 Angular，一些基础的语法也学习的差不多了，就在 github 上新建了一个代码仓库，准备用 ng-zorro 搭个后台应用的模板，方便自己以后写些小东西时可以直接使用。前端项目，最主要的还是能够实际看到，因此考虑找个地方部署，因为自己的博客是部署到 github page 上的，并且这个项目也只是一个静态网站，所以这里同样选择使用 github page

同时，考虑到发布项目时，虽然使用 github page 已经帮我们省略了拷贝文件到服务器上这一步，但是还是需要自己手动的敲命令来完成项目的发布，因为发布的流程很单一，所以这里选择通过 github action 这个自动化工具来实现程序的自动化部署

代码仓库地址：ingos-admin

预览地址：https://yuiter.com/ingos-admin

Step by Step

2.1、手动部署

示例的 Angular 应用，你可以通过 Angular CLI 直接生成，如有需要，可以点击此链接进行跳转查看（电梯直达），这里就不演示创建的过程了

按照正常的前端项目发布流程，当我们需要发布时，需要使用 npm 命令来完成项目的打包。整个项目中所涉及的 npm 命令，我们可以通过查阅项目的 package.json 文件中的 scripts 节点进行查看

这里通过 Angular CLI 创建的项目可以通过 ng build 命令来完成项目的打包发布

因为每次执行 ng deploy 命令时都需要在命令中添加 base-href 参数，所以这里我们可以在 package.json 文件中添加一个 script，这样当后面我们需要发布时，直接执行自定义的 ng deploy 命令即可

{
 "name": "ingos-admin",
 "version": "1.0.0",
 "scripts": {
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build",
 "deploy": "ng deploy --base-href=/ingos-admin/",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e"
 }
}

这里我通过直接调整 github 默认的 workflow 文件来实现自动化部署功能，整个 yaml 文件包含了如下的三个部分

  • name：当前 workflow 配置的名称
  • on：任务触发时机，这里是在向 github 上的 master 分支提交代码以及提交 PR 时进行触发
  • jobs：需要触发的任务信息，一个 workflow 可以包含多个的 job，这里只有一个名为 build 的 job
# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
 push:
 branches: [master]
 pull_request:
 branches: [master]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
 # This workflow contains a single job called "build"
 build:
 # The type of runner that the job will run on
 runs-on: ubuntu-latest

 # Steps represent a sequence of tasks that will be executed as part of the job
 steps:
 # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
 - uses: actions/checkout@v2

 # Runs a single command using the runners shell
 - name: Run a one-line script
  run: echo Hello, world!

 # Runs a set of commands using the runners shell
 - name: Run a multi-line script
  run: |
  echo Add other actions to build,
  echo test, and deploy your project.

一个 workflow 文件中最重要的就是包含的 jobs，它表明了当前 workflow 所能实现的功能，一个 job 任务主要包含了如下的属性

  • runs-on：当前 job 需要运行在的系统环境
  • steps：实现一个 job 需要执行的各个步骤
  • env：当前 job 执行时需要的各种环境变量
  • needs：当我们定义多个 job 时，默认是并行执行的，但是存在 job2 需要等 job1 执行完成后才可以执行的情况，这时，我们就可以在 needs 属性中指定 job2 依赖于 job1，从而确保整个 workflow 的正确执行

在 steps 节点中，定义了当前 job 需要执行的各个步骤，step 分为两种，一种是我们使用 users 属性来直接引用别人已经发布的 action，例如这里通过引用 github 官方的 actions/checkout@v2 在宿主机中执行 git checkout 命令来拉取代码；另一种，则是我们通过 run 属性来手动编写脚本

对于我们想要的实现的功能，其实只包含了如下的四步：拉取代码 =》安装 node.js 环境 =》还原依赖 =》部署发布

对于拉取代码以及安装 node.js 环境，我们可以使用 github 官方的 action 来简化我们的脚本，因为我们在每次构建时都需要执行 npm install 命令来还原项目所需的各种依赖，因此这里在执行 install 命令之前，我们可以通过官方的 actions/cache@v2 来缓存项目依赖，以加快构建的过程

这里在还原依赖时，使用到了 npm ci 而不是 npm install，从命令的名称就可以看出，ci 主要是在各种自动化环境构建时使用，通过读取 package-lock.json 文件中所包含的具体的依赖版本信息来加快还原过程

steps:
 # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
 - uses: actions/checkout@v2

 # Install node js
 - name: Setup Node.js environment
 uses: actions/setup-node@v1
 with:
  node-version: 12.x

 # Cache node modules
 - name: Cache node modules
 uses: actions/cache@v2
 env:
  cache-name: cache-node-modules
 with:
  # npm cache files are stored in `~/.npm` on Linux/macOS
  path: ~/.npm
  key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
  restore-keys: |
  ${{ runner.os }}-build-${{ env.cache-name }}-
  ${{ runner.os }}-build-
  ${{ runner.os }}-

 # Install required dependencies to build app
 - name: Install dependencies
 run: npm ci

当还原完成之后，就可以执行 package.json 文件中的 deploy 命令了，这里需要注意，因为在 action 中执行的命令更多的都是只读权限，所以为了能够有足够的权限执行发布操作，我们需要在执行时在环境变量中附加上 GITHUB_TOKEN 变量

steps:
 # Use angular-cli-ghpages to deploy app
 - name: Deploy to github pages
 env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 run: npm run deploy

secrets.GITHUB_TOKEN 因为是 github 默认创建的，因此我们可以在 workflow 中直接使用，而对于一些另外需要授权的服务，直接将密码写在 yaml 文件中会不安全，这时你就可以在代码仓库的 settings tab 下通过设置 secrets 密钥信息，然后就可以通过变量的方式在 workflow 中直接使用

打开 GitHub Personal Access Tokens 页面，点击右侧的 Generate new token 按钮，选择新建一个 token 信息，在编辑权限时确保 workflow 有被勾选上，

当推送成功之后，再次点击代码仓库的 Actions 菜单，则会显示已经执行的 workflow 记录，当我们点击具体的一个 workflow 记录，则可以显示出 workflow 中每个步骤的执行详情，你可以根据执行情况自行调整，至此，也就完成自动化部署的功能

参考

GitHub Actions 入门教程

是时候体验一下github action的魅力了

npm-ci

Git Extensions is a great tool but the credential management is very weak

到此这篇关于使用 Github Actions 自动部署 Angular 应用到 Github Pages的文章就介绍到这了,更多相关Github Actions 自动部署 Github Pages内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！

相关链接