使用 Github Actions 将 Angular 应用部署到 Firebase

这些指令集可帮助您设置 Github Actions 以构建 Angular 项目并在推送事件时部署到 Firebase 托管。 即使您可以参考本教程来构建任何 node.js 应用程序并部署到 firebase。

Github 操作允许您在存储库中自动化、自定义和执行软件开发工作流。 这是为您的应用程序创建和维护持续集成/持续部署 (CI/CD) 生命周期的最佳方式。

我们假设您已经将您的应用程序推送到 Github 存储库。 我们先从 Github 动作的配置说起。

步骤 1 – 创建 Github 操作

登录到您的 Github 帐户并访问您的存储库。 在您的存储库中单击 行动 选项卡，然后单击“自己设置工作流程“ 关联。

请参阅以下屏幕截图以供参考：

步骤 2 – 创建工作流

单击 setp 工作流链接后，这将在存储库下编辑一个新文件“.github/workflows/main.yml”。 其中包含工作流的一些默认配置。

您将看到新创建的文件，如下所示：

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/[email protected]        # 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.

第 3 步 – 自定义您的工作流程

现在，我们将根据我们的要求自定义工作流配置文件。 在这一步中，我们将逐步分解配置以使您理解。 即使您可以跳过此步骤，因为在后续步骤中提供了完整的配置文件。

  1. 定义工作流名称 – 这是一个可选步骤，但您可以为您的工作流程命名。 
    name: deploy_to_firebase_hosting
  2. 自定义作业名称 – 所有工作都在“工作：”部分下定义。 首先，我们将默认作业名称 build 更改为 firebase-deploy。 您可以将其更改为适合您的任何名称。 
    jobs:   firebase-deploy:
  3. 自定义触发器 – 每次推送到任何分支时都会触发默认工作流。 您可能需要将其限制为特定的分支。

    例如，仅在推送到 main 或 release/* 分支时启用工作流触发器：

    on:   push:     branches:     - main     - release/*
  4. 更新结帐操作 – 默认工作流使用操作/[email protected]，这是最新版本。 因此无需在此处进行更改，但您仍然可以将其更改为最新的操作/[email protected] 
    - uses: actions/[email protected]
  5. 自定义 node.js 构建触发器 – 现在，为您的 Angular 应用程序定义 Node.js 版本和构建命令。 例如，我们使用 Node.js 12.x 版本来构建此应用程序。 
    steps: - uses: actions/[email protected] - uses: actions/[email protected]   with:     node-version: '12.x' - run: npm install - run: npm run build:prod
  6. 部署到 Firebase – 最后一步是将您的应用程序部署到 Firebase 函数。 
    steps: - uses: actions/[email protected] - uses: actions/[email protected]   with:   node-version: '12.x' - run: npm install - run: npm run build:prod - uses: w9jds/[email protected]   with:     args: deploy --only hosting   env:     FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

    根据上述配置，部署将仅针对 Firebase 托管进行。 您甚至可以将 args 值更改为“deploy --only function”来部署 firbase 功能。

现在单击右侧的开始提交以提交您的新工作流程。

第 4 步 – 设置 Firebase 令牌

Github 操作部署作业需要 FIREBASE_TOKEN 进行身份验证以在 firebase 上部署代码。 您可以使用系统上的 firebase cli 工具生成令牌。

首先，使用 npm 安装 firebase-tools。

npm i -g firebase-tools

然后运行 firebase login:ci 终端上的命令：

firebase login:ci

这将在您的终端上显示您的链接，在网络浏览器中打开此链接并完成授权。 这将显示用于 CI 任务的令牌。

例子： firebase deploy --token "$FIREBASE_TOKEN"

因为将此令牌保存在配置文件中是不安全的。 将此令牌添加到 Github 机密。

在您的 Github 存储库中，转到设置 > 机密 > 新存储库机密：

用 FIREBASE_TOKEN 作为名称并输入密码 价值 部分。 然后单击添加秘密按钮。

步骤 5 – 最终工作流程配置

您的最终工作流配置文件在文本编辑器中应如下所示：

文件：.github/workflow/main.yml

name: deploy_to_firebase_hosting  on:   push:     branches:     - master     - release/*  jobs:   firebase-deploy:      runs-on: ubuntu-latest      steps:     - uses: actions/[email protected]     - uses: actions/[email protected]       with:         node-version: '12.x'     - run: npm install     - run: npm run build:prod     - uses: w9jds/[email protected]       with:         args: deploy --only hosting       env:         FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

现在您可以将工作流配置文件提交到您的存储库。 此工作流已添加到 .github/workflows/main.yml。 您可以使用 .yml 扩展名更改您选择的 main.yml 文件名。

接下来，继续将一些更改推送到您的 Github 存储库。 这将触发 Github 操作并执行工作流中定义的步骤。

Related Posts