方言を話すおしゃべり猫型ロボット『ミーア』をリリースしました(こちらをクリック)

Setup automatic deployment to Firebase Hosting using GitHub Actions

firebase-hosting-github-actions
この記事は約19分で読めます。

Introduction.

Currently developing a personal “Interview AI” that can transcribe an hour’s worth of audio in 15 seconds and automatically convert it into a natural conversational format.

https://www.interview-ai.site

Currently, we have almost finished development in the development environment and are in the process of migrating to the production environment.

The front end is developed with React, the back end with Node.js, and the database with MongoDB.

Describe the setup procedure to automatically deploy the front end to Firebase Hosting using GitHub Actions.

Firebase Project Setup

Create or select a Firebase project

  • Access the Firebase console and create a new project or select an existing project.

Initialization of Firebase Hosting

In the local environment, go to the project directory (frontend/ in this case) and execute the following command.

ShellScript
firebase init

Follow the prompts to proceed with the setup.

1) Select the Hosting option (press the spacebar to select, then press Enter)

(2) What do you want to use as your public directory?

Specify the build directory (the directory containing static files built with React) as the public directory when setting up Firebase Hosting.

3) Configure as a single-page app (rewrite all URLs to /index.html). →Yes

YES because it is a React application; all requests are rewritten to index.html regardless of the URL, and client-side routing works correctly.

Others will select yes or no as shown below.

After successful setup, the success screen opens automatically.

When setting up Firebase Hosting, you will be asked to specify which GitHub repository to use for automatic deployment using GitHub Actions.

After successful configuration, two workflow files, firebase-hosting-merge.yml and firebase-hosting-pull-request.yml, are automatically generated under .github/workflows as the deployment workflow files. . github/workflows. This is created by Firebase CLI for GitHub Actions. It contains settings for automatic deployment in the following two scenarios

firebase-hosting-merge.yml: Configuration for automatic deployment when pull requests (PRs) are merged into main branch, etc.

firebase-hosting-pull-request.yml: configuration for deploying to the preview environment when a pull request is created.

interview-ai/.github/workflows/firebase-hosting-merge.yml

YAML
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          channelId: live
          projectId: 

interview-ai/.github/workflows/firebase-hosting-pull-request.yml

YAML
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on PR
on: pull_request
permissions:
  checks: write
  contents: read
  pull-requests: write
jobs:
  build_and_preview:
    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          projectId: 

These files will be modified later.

Create service account and obtain key (auto-generated upload)

Create a service account to allow GitHub Actions to access Firebase Hosting. Give this account administrative privileges to Firebase Hosting for automatic deployment.

However, regarding this, if you look at the logs from the Firebase init hosting I just did

Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT.

and since the JSON file for the service account has already been uploaded to GitHub with the secret name FIREBASE_SERVICE_ACCOUNT, no additional service account creation or re-downloading of the JSON file is required.

In fact, if you click on Github Repository -> Settings -> Secrets and variables -> Actions, you will see that FIREBASE_SERVICE_ACCOUNT is already registered in GitHub Secrets.

Fix GitHub Actions workflow

Correct the following two points in the two automatically created workflows

  • Specify required environment variables
  • Specify frontend as a working directory instead of the root directory

Environment variable management

To simulate a local production environment, create an .env.production file and define the necessary environment variables. Set these variables to be applied at build time. Add the .env.production file to .gitignore so that it is not included in the Git repository.

The firebase-related settings can be found as firebaseConfig by scrolling down to the “Project Settings” -> “General” tab after creating an app in the Firebase console.

frontend/.env.production

Add the necessary environment variables as GitHub Secrets and ensure that they are used safely within the workflow.

Inject the necessary environment variables in the Build frontend step using the env key so that the secret is used as an environment variable in the workflow file (e.g. .github/workflows/deploy-frontend.yml ).

Set working-directory to . /frontend

Also, since firebase.json (Firebase configuration file) is located in the frontend/ directory this time, set working-directory to . /frontend and add entryPoint: frontend in the Deploy to Firebase Hosting step of the GitHub Actions workflow to correctly identify the location of the Firebase configuration file.

This will correctly identify the location of the firebase.json file and allow it to be deployed to Firebase.

interview-ai/.github/workflows/firebase-hosting-merge.yml

YAML
name: Deploy Frontend to Firebase Hosting on merge

on:
  push:
    branches:
      - main # mainブランチにマージされたときにトリガー

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18" # 使用する Node.js のバージョンを指定

      - name: Install dependencies
        run: npm install
        working-directory: ./frontend # フロントエンドディレクトリへのパス

      - name: Build frontend
        run: npm run build
        working-directory: ./frontend
        env:
          REACT_APP_FIREBASE_API_KEY: ${{ secrets.REACT_APP_FIREBASE_API_KEY }}
          REACT_APP_FIREBASE_AUTH_DOMAIN: ${{ secrets.REACT_APP_FIREBASE_AUTH_DOMAIN }}
          REACT_APP_FIREBASE_PROJECT_ID: ${{ secrets.REACT_APP_FIREBASE_PROJECT_ID }}
          REACT_APP_FIREBASE_STORAGE_BUCKET: ${{ secrets.REACT_APP_FIREBASE_STORAGE_BUCKET }}
          REACT_APP_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.REACT_APP_FIREBASE_MESSAGING_SENDER_ID }}
          REACT_APP_FIREBASE_APP_ID: ${{ secrets.REACT_APP_FIREBASE_APP_ID }}
          REACT_APP_BACKEND_URL: ${{ secrets.REACT_APP_BACKEND_URL }}
          REACT_APP_WEBSOCKET_URL: ${{ secrets.REACT_APP_WEBSOCKET_URL }}

      - name: Deploy to Firebase Hosting (Live Channel)
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          projectId: 
          channelId: live # 本番用ライブチャンネル
          entryPoint: frontend # firebase.jsonがあるディレクトリを指定

interview-ai/.github/workflows/firebase-hosting-pull-request.yml

YAML
name: Deploy Preview to Firebase Hosting on PR

on:
  pull_request:
    branches:
      - main

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18" # 使用する Node.js のバージョンを指定

      - name: Install dependencies
        run: npm install
        working-directory: ./frontend # フロントエンドディレクトリへのパス

      - name: Build frontend
        run: npm run build
        working-directory: ./frontend
        env:
          REACT_APP_FIREBASE_API_KEY: ${{ secrets.REACT_APP_FIREBASE_API_KEY }}
          REACT_APP_FIREBASE_AUTH_DOMAIN: ${{ secrets.REACT_APP_FIREBASE_AUTH_DOMAIN }}
          REACT_APP_FIREBASE_PROJECT_ID: ${{ secrets.REACT_APP_FIREBASE_PROJECT_ID }}
          REACT_APP_FIREBASE_STORAGE_BUCKET: ${{ secrets.REACT_APP_FIREBASE_STORAGE_BUCKET }}
          REACT_APP_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.REACT_APP_FIREBASE_MESSAGING_SENDER_ID }}
          REACT_APP_FIREBASE_APP_ID: ${{ secrets.REACT_APP_FIREBASE_APP_ID }}
          REACT_APP_BACKEND_URL: ${{ secrets.REACT_APP_BACKEND_URL }}
          REACT_APP_WEBSOCKET_URL: ${{ secrets.REACT_APP_WEBSOCKET_URL }}

      - name: Deploy to Firebase (Preview Channel)
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT}}
          projectId: 
          channelId: preview-${{ github.event.number }} # プレビュー用チャンネルIDをPR番号で指定
          entryPoint: frontend # firebase.jsonがあるディレクトリを指定

Check and execute workflow

After the workflow file is committed and pushed to the develop branch, a PR is issued for the main branch.

Check GitHub Actions

  • Go to the “Actions” tab of the repository and check the status of the workflow execution.
  • If the deployment is successful, Firebase Hosting will reflect the latest build.

When GitHub Actions attempts to create a “check run” via the GitHub API to deploy to Firebase, the API request fails because GitHub Actions does not have the proper permissions to access the repository. error occurred.

Add the following to the top of the firebase-hosting-pull-request.yml workflow file

YAML
permissions:
  checks: write
  contents: write

I pushed to develop and threw a PR to the main and this time it succeeded.

Merge to main to start automatic deployment for Firebase hosting

This one also succeeded.

I accessed the URL of the Firebase Hosting site and successfully opened the deployed site.

summary

GitHub Actions can be used to streamline the manual deployment process and enable automated deployment to Firebase Hosting. In this article, we have described step-by-step specific procedures from setting up a Firebase project to building GitHub Actions. We hope to utilize this flow in the future to achieve a smoother deployment process.

タイトルとURLをコピーしました