使用Github Actions将Angular App部署到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. 自定义工作名称 –所有作业均在“作业:”部分中定义。 首先,我们将默认作业名称构建更改为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构建触发器 –现在,定义Node.js版本并为Angular应用程序构建命令。 例如,我们使用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  

这将显示您在终端上的链接,在Web浏览器中打开此链接并完成授权。 这将向您显示用于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操作并执行工作流中定义的步骤。

Github动作成功部署到Firebase功能

结论

在本教程中,您学习了使用Github动作构建Angular项目并部署到Firebase托管。

您也可以访问Github操作文档以了解更多详细信息。

Sidebar