Firebaseの環境を構築してデプロイしてみる

Firebaseの環境を構築し、Reactアプリケーションをデプロイした際の手順を記録しておく。

Firebaseの環境構築

FirebaseのWebサイトからプロジェクトを予め作成しておく。
プロジェクト側にFirebase関連パッケージを導入し、初期設定を実施する。
下記の作業はプロジェクトルートで実施する。

# firebaseパッケージのインストール
❯ npm install firebase

# firebase-toolsのインストール
❯ sudo npm install -g firebase-tools

# firebaseへのログイン。質問は下記の通り回答した。
❯ firebase login
 
? Allow Firebase to collect CLI and Emulator Suite usage and error reporting
information? Yes

# 表示されるURLにアクセスして認証を実施する。
Visit this URL on this device to log in:
(省略)

# プロジェクトのルートディレクトリに移動してfirebaseの初期化を実施。
# 色々聞かれるので答えていく。
❯ firebase init

=== Project Setup

# 新規に作るか既存のプロジェクトを使うか聞かれるので、既存のプロジェクトを選択。
? Please select an option:
Use an existing project

# Firebaseで作成したプロジェクトを選択。
? Select a default Firebase project for this directory:
studytimeapp-339a8 (StudyTimeApp)

=== Hosting Setup
# デフォルトを選択。
? What do you want to use as your public directory?
public

# Reactを利用するのでYes
? Configure as a single-page app (rewrite all urls to /index.html)?
Yes

# GithubにPushした際に自動的にFirebaseにデプロイする場合はYes。
# Githubへの認証を表示されたURLから実施する。
? Set up automatic builds and deploys with GitHub?
Yes

Visit this URL on this device to log in:
(省略)

# プロジェクトのリポジトリを指定。
? For which GitHub repository would you like to set up a GitHub workflow?
(format: user/repository)
(省略)

# デプロイする前にビルドする場合はYes
? Set up the workflow to run a build script before every deploy?
Yes

# ビルド時の実行コマンドを指定。デフォルトのまま。
? What script should be run before every deploy?
npm ci && npm run build

# PullRequest時に本番サイトにマージするか。Noを選択。
? Set up automatic deployment to your site's live channel when a PR is merged?
No

✔  Firebase initialization complete!

デプロイできることを確認する。
下記コマンドでpublic以下の内容をデプロイする。
URLが表示されるので、アクセスしてfirebaseに正しくデプロイできていることを確認する。

❯ firebase deploy

続いて、自分で作成したアプリケーションをデプロイする。
まずは、アプリケーションのビルドを実施。

❯ npm run build

distディレクトリにビルド結果が格納される。
firebase.jsonを変更して、dist以下がデプロイされるようにする。

firebase.json (抜粋)

{
  "hosting": {
    "public": "dist", // distへ修正
    (省略)
    }
}

以下のコマンドを実行して、ローカル環境で確認可能。
表示されたURLからブラウザで確認可能。

❯ firebase emulators:start

問題なければFirebaseにデプロイする。
表示されたURLにアクセスして問題ないことを確認する。

❯ firebase deploy

使用しない場合は無効化しておくと良い。

❯ firebase hosting:disable

Firebaseの初期化時に指定したGithubリポジトリにPushすると自動的にデプロイされる。

参考