ReactアプリをFirebase Hostingにデプロイする方法

はじめに
Reactアプリの準備
Firebaseとの接続
1. Firebase CLIのインストール
2. Firebaseプロジェクトの初期化
Reactアプリのビルドとデプロイ
1. Reactアプリのビルド
2. Firebaseにデプロイ
GitHub Actionsを使ったCI/CDの構築
1. GitHub Actionsワークフローの修正
デプロイの確認
まとめ
1. 今回の流れ

はじめに

この記事では、ReactアプリをFirebaseのHostingサービスにデプロイする方法を解説します。さらに、GitHub Actionsを使った自動デプロイの構築にも触れます。

Reactアプリの開発が一通り終わり、実際にWeb上で公開したいという方に向けた内容です。Firebaseを使えば、無料で簡単にデプロイできるので、ぜひ試してみてください。

Reactアプリの準備

まず、Reactアプリを作成します。まだ作成していない方は、以下の記事を参考にしてください。

Viteを使ってReactプロジェクトを作成する方法

Viteを使ってReactプロジェクトを手軽に構築する方法を解説。初期設定や生成されたファイル構成についても詳しく説明しています。

作成済みのプロジェクトがある場合は、そのプロジェクトフォルダ内で作業を進めてください。

Firebaseとの接続

Firebaseを利用するために、Firebase CLI（Command Line Interface）をインストールします。

Firebase CLIのインストール

まず、Firebaseのツールをインストールしましょう。

Bash

npm install -g firebase-tools

インストールが完了したら、以下のコマンドでFirebaseにログインします。

Bash

firebase login

ブラウザが開き、Googleアカウントでログインするよう求められます。Firebaseを利用するアカウントでログインしてください。

Firebaseプロジェクトの初期化

次に、Firebaseプロジェクトを初期化します。

Bash

firebase init

対話形式で設定を行います。以下のように進めてください。

Hosting（スペースキーで選択） を選択
(Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys)

既存のプロジェクトを使用する場合は Use an existing project を選択し、プロジェクトを選択
今回は新規作成します。

下記のように新規作成の場合はプロジェクト名を決定します
(What would you like to call your project?に関しては未入力でenterを押し、default設定にします。)

パブリックディレクトリ（build） を設定（vite を使用している場合は dist に変更）

シングルページアプリケーション（SPA）の場合、「index.htmlにリダイレクトしますか？」 → Yes

GitHubで自動ビルドとデプロイを設定するため、今回は「Yes」に設定(事前にリポジトリを作成します)

GitHubワークフローを設定するリポジトリをユーザー名/リポジトリ名の形式で設定します。

デプロイの前にビルドスクリプトを実行するワークフローを設定するためにyesとします。

デプロイの前に実行するスクリプトを設定します。今回はdefault設定にします。

プルリクエストがマージされたときに、サイトの本番環境に自動デプロイを設定するようにyesとします。

サイトの本番環境に関連付けられているGitHubブランチの名前を設定します。今回はmainです。

Reactアプリのビルドとデプロイ

次に、Reactアプリをビルドし、Firebaseにデプロイします。

Reactアプリのビルド

viteを利用している場合がvite.config.tsを修正します。

TypeScript

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: './', // 相対パスでアセットを参照
  plugins: [react()],
  build: {
    outDir: 'dist', // 出力ディレクトリ
  },
})

以下のコマンドを実行して、Reactアプリをビルド（本番環境用の最適化）します。

Bash

npm run build

完了すると、build/ ディレクトリ（viteを使っている場合は dist/）が生成されます。

Firebaseにデプロイ

Bash

firebase deploy

このコマンドを実行すると、Firebase Hostingにデプロイされ、URLが表示されます。そのURLを開くと、ReactアプリがWeb上で公開されていることを確認できます。

GitHub Actionsを使ったCI/CDの構築

Firebaseに手動でデプロイするのではなく、GitHub Actionsを利用してプッシュ時に自動デプロイする仕組みを作ります。

GitHub Actionsワークフローの修正

firebaseの初期化後.github/workflows配下に2ファイルができています。

firebase-hosting-merge.yml
firebase-hosting-pull-request.yml

今回はmainブランチにマージされた場合のみdeployする設定にしたいため、firebase-hosting-merge.ymlのみ使います。
そのため、firebase-hosting-pull-request.ymlは削除します。

firebase-hosting-merge.ymlは、依存関係がinstallされておらず、このままではエラーになってしまうため少し書き直します。

YAML

name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Check out code
        uses: actions/checkout@v3

      - name: Display Node.js version
        run: |
          echo "Running on Node.js version:"
          node -v  # Node.js バージョンを表示

      - name: Install dependencies
        run: npm install # 依存関係をインストール

      - name: Build the project
        run: npm run build # ビルド
  
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_FIREBASE_SAMPLE_DEPLOY }}
          channelId: live
          projectId: firebase-sample-deploy