如何使用 GitHub Actions 将 React 应用程序部署到 Firebase

将 Web 应用程序部署到 Firebase 托管可能会很麻烦。 但是，通过使用 GitHub Action，您可以简化和精简部署过程，并使在软件项目的整个生命周期中管理部署工作流变得异常容易。只需几个简单的步骤，您就可以设置部署工作流来自动执行该过程。 这包括跟踪对分支的新更改并记录任何错误。

什么是 CI/CD 管道？

CI/CD（持续集成/持续交付）管道是一组实现的自动化流程，可以持续构建、测试和部署应用程序。

简而言之，CI/CD 管道被设置为自动化软件开发生命周期中涉及的流程。 这将包括实际开发、测试、发布（beta、alpha和final）、错误修复，甚至功能更新。 从本质上讲，这个过程使得轻松快速地发布高质量软件成为可能。

CI/CD 流水线通常包括几个阶段，包括：

• 源代码阶段：此阶段包括使用 Git 等版本控制工具对应用程序代码进行实际开发和维护。
• 构建阶段：此步骤将源代码及其所有依赖项组装成可执行格式。
• 测试阶段：这个阶段结合了自动化测试来验证软件的质量。 最终目标是检测并纠正任何错误。 您可以在此阶段进行不同类型的测试，一旦代码通过测试，就可以部署了。
• 部署：此阶段会自动执行生产环境中的部署过程。

流水线应该监控每个阶段，以确保没有错误，并为未来的发布改进整个过程 。

什么是 GitHub Action？

GitHub Actions 是 GitHub 提供的一项功能，用于在 CI/CD 管道中自动化软件的部署工作流程。 它可以直接从项目的 GitHub 存储库定义和自动化部署工作流。

GitHub Actions 有几个好处：

• 易于使用：GitHub Actions 提供了一个用户友好的界面和一个简单的语法来设置部署工作流。 您可以使用 GitHub 上的内置编辑器轻松快速地定义您的项目工作流。
• 与Github集成：GitHub Actions 是 GitHub 的一部分，可让您轻松设置、管理工作流以及项目代码并就其进行协作。
• 灵活且可定制：GitHub Actions 提供了一个灵活且可定制的平台，确保您可以构建适合您特定需求的工作流程。 此外，它支持多种编程语言。 您可以将它与您喜欢的任何技术一起使用。

设置 Firebase 项目和 React 客户端

首先，前往 Firebase 并使用您的 Google 帐户登录。 在控制台概览页面上，单击创建项目以设置新项目并提供项目名称。

接下来，创建一个 React 应用程序并安装 Firebase 命令行工具：

npm install -g firebase-tools

使用您的 Firebase 帐户凭据从您的终端登录到 Firebase。

firebase login:ci

这将触发 Firebase 身份验证流程，如果您尚未登录，它将提示您输入登录详细信息。一旦 Firebase 对您进行身份验证，它将打印一个令牌。 复制此令牌； 您将使用它在 GitHub Actions 设置中运行 Firebase 命令。

最后，编译应用程序：

npm run build

此命令在根目录的新“build”文件夹中生成部署应用程序所需的必要文件和有一些图片，css等文件。

在您的 React 应用程序中初始化 Firebase

运行此命令以在您的项目文件夹中初始化 Firebase：

firebase init

接下来，确认您要在项目中初始化 Firebase，然后继续并选择托管：为 Firebase 托管配置文件，并（可选）从选项列表中设置 GitHub Action部署。

指定您要使用现有项目并选择您最初在 Firebase 开发人员控制台上创建的项目名称。

接下来，将“build”文件夹指定为公共目录，选择否将所有 URL 重写为 /index.html 选项，对设置自动构建和从 GitHub 部署的选项选择否，最后选择是覆盖构建 /index.html 文件选项。

进行上述操作后，CLI 将在根目录中创建一个 firebase.json 文件。 此文件包含 GitHub Actions 工作流程所需的所有托管配置。

最后，在设置 GitHub Actions 工作流之前，在 GitHub 上创建一个存储库，并将项目文件推送上去。

设置 GitHub Action

在 GitHub 上的项目存储库中，选择 Settings > Secrets and Variables > Actions。 在存储库的 secret 页面中，输入 FIREBASE_TOKEN 作为secret的名称，然后粘贴Firebase Token作为值。

设置部署工作流
单击项目存储库中的 Actions 选项卡，然后在 Continuous Integration 部分中选择 Configure Nodejs 工作流。

接下来，将文件名重命名为 firebase.yml，删除编辑器上的样板代码，并添加以下代码：

# This workflow will carry out a clean installation of node dependencies,
# cache/restore them, build the source code and run tests across different
# versions of node
# For more information see:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs

name: Firebase CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm install -g npm
    - name: npm install, build and test
      run: |
        npm install
        npm run build
    - name: Archive Build
      uses: actions/upload-artifact@v2
      with:
        name: build
        path: build
        
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Download Build
        uses: actions/download-artifact@v2
        with:
          name: build
          path: build
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

以下是一些关键的解属性的解释：

• On：在工作流中触发Action的事件，通常是和git有关的操作，例如push。
• Jobs：Action中应运行的作业。 在这个例子中，有两个作业：build和deploy。
• Runs-on：运行此作业的系统环境。
• Steps：为特定的作业定义一系列有顺序的步骤。
• With：为当前的步骤指定所需的参数。
• Name：作业中为步骤定义的名称。

最后，提交此文件所做的更改。 GitHub 将自动触发此工作流，在 Firebase 的托管服务上构建和部署 React 应用程序。 您可以在部署日志中检查应用程序的实时 URL。

使用 GitHub Actions 部署应用程序

GitHub Actions 提供了一种简化的部署方法。 它确保您可以一致、可靠地部署应用程序，无论您使用何种技术构建它们。

此外，您可以使用内置部署工具轻松自定义部署工作流，以满足您特定的 CI/CD 管道需求。