Firebase SDK をウェブアプリと統合する

Firebase App Hosting は、 Firebase JavaScript SDK と Node.js 用 Firebase Admin SDK で構築された動的ウェブアプリに最適です。フル機能のウェブアプリでは、Firebase SDK（Authentication、Cloud Firestore、App Checkなど）が重要な役割を果たします。このガイドでは、 Firebase SDK を最適化し、ウェブアプリに Firebase を組み込むための主要な戦略について説明します。Firebase App Hosting

Firebase Admin SDK とウェブ SDK を自動的に初期化する

Firebase App Hosting などの Google 環境では、ビルド時とランタイム時に引数なしのコンストラクタ呼び出しを行うことで、アプリの初期化を簡素化できます。これは、Firebase Admin SDK for Node.js（Firebase 機能の大部分を解放するサーバーサイド SDK で、ウェブアプリで非常に役立ちます）と Firebase JavaScript SDK の両方の機能です。

initializeApp() を使用すると、Firebase App Hosting でウェブアプリの構成を自動的に入力できます。デフォルト値をオーバーライドする場合でも、特定の値をきめ細かく制御するオプションは維持されます。

引数なしで初期化する

デフォルトの構成値で Firebase Admin SDK または Firebase JavaScript SDK を初期化するには、引数を指定せずに initializeApp() を使用します。

Admin SDK

import { initializeApp } from 'firebase-admin/app';
const app = initializeApp();

Admin SDK の場合、この初期化戦略は App Hosting のほか、Cloud Run、 App Engine、Cloud Run 関数などの他の Google サーバー環境でも機能します。

JavaScript SDK

import { initializeApp } from 'firebase/app';
const app = initializeApp();

JavaScript SDK の場合、この初期化戦略は App Hosting で機能します。

自動入力された値をオーバーライドする

自動的に挿入されるデフォルト構成をオーバーライドできます。これらのオプションは、Admin SDK と JavaScript SDK で異なります。

Admin SDK のオーバーライド

Realtime Database、Cloud Storage、Cloud Functions などのサービスのカスタム初期化オプションを指定するには、FIREBASE_CONFIG 環境変数を使用します。FIREBASE_CONFIG 変数は、そこに格納されている値が { で始まる場合、JSON オブジェクトとして解析されます。それ以外の場合、SDK は文字列がオプションを含む JSON ファイルのパスであるとみなします。

# apphosting.yaml

env:
  - variable: FIREBASE_CONFIG
    value: '{"credential: applicationDefault()","databaseURL":"https://project-id-default-rtdb.firebaseio.com"}'

JavaScript SDK のオーバーライド

JavaScript SDK の初期化のために App Hosting が挿入するデフォルトの FIREBASE_WEBAPP_CONFIG 値をオーバーライドするには、 apphosting.yaml で値を指定します。

# apphosting.yaml

env:
  - variable: FIREBASE_WEBAPP_CONFIG
    value: '{"apiKey":"myApiKey","appId":"app:123","authDomain":"project-id.firebaseapp.com","databaseURL":"https://project-id-default-rtdb.firebaseio.com","messagingSenderId":"0123456789","projectId":"project-id","storageBucket":"project-id.firebasestorage.app"}'

他の環境で自動初期化を使用する

Firebase JavaScript SDK をインストールすると、npm postinstall script で自動初期化が設定されます。postinstall スクリプトは、 FIREBASE_WEBAPP_CONFIG 環境変数を検索します。これは、 App Hosting Cloud Build ビルド環境で自動的に設定されます。

Cloud Build の外部に JS SDK をインストールする場合は、Firebase JavaScript SDK のインストール時にこの環境変数を自分で設定する必要があります。

インストール時に環境を手動で設定するには:

Firebase ウェブアプリ構成オブジェクト Firebase コンソールからコピーします。
ターミナルから、npm install コマンドを実行する前に FIREBASE_WEBAPP_CONFIG 環境変数を設定します。

FIREBASE_WEBAPP_CONFIG="{...}" npm install firebase

Firebase プロジェクトまたはウェブアプリを変更するたびに、このコマンドを再実行します。中間キャッシュ（.next/cache など）の削除が必要になる場合もあります。

SSR に `FirebaseServerApp` を使用する

ウェブアプリの開発で Firebase JS SDK や他の Firebase クライアント SDK を使用したことがあれば、FirebaseApp インターフェースと、それを使用したアプリインスタンスの構成方法に精通している可能性があります。サーバーサイドで同様のオペレーションを容易にするために、Firebase には FirebaseServerApp が用意されています。

FirebaseServerApp は、サーバーサイドレンダリング（SSR）環境で使用される FirebaseApp のバリエーションです。これには、クライアントサイドレンダリング（CSR）とサーバーサイドレンダリングの境界にまたがる Firebase セッションを継続するためのツールが含まれています。

FirebaseServerApp を使用して、次の権限を付与します。

完全な管理権限を持つ Firebase Admin SDKとは対照的に、ユーザー コンテキスト内でサーバーサイドコードを実行します。
SSR 環境で App Check を使用できるようにします。
クライアントで作成された Firebase Auth セッションを続行します。

これらの目的で FirebaseServerApp を使用する方法について詳しくは、SSR を使用する動的ウェブアプリで Firebase を使用するをご覧ください。

ウェブアプリで App Check を有効にする

App Check を使用すると、 App Hosting 上の動的ウェブアプリのセキュリティを強化できます。SSR を使用する動的ウェブアプリで Firebase を使用するで説明されている特定のサーバーサイド戦略を実装することで、App Hosting バックエンドを不正使用から保護できます。