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

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

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

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

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

引数なしで初期化する

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

Admin SDK

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

JavaScript SDK

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

Admin SDK 初期化のこの戦略は、App Hosting と、Cloud Run、App Engine、Cloud Functions などの他の Google サーバー環境で機能します。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 スクリプトで設定されます。ポストインストールスクリプトは、App Hosting Cloud Build 環境で自動的に設定される環境変数 FIREBASE_WEBAPP_CONFIG を探します。

Cloud Build の外部（Firebase Emulator Suite で使用するためにローカルにインストールする場合など）に JS SDK をインストールする場合は、Firebase JavaScript SDK のインストール時にこの環境変数を手動で設定する必要があります。

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

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

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

Firebase プロジェクトまたはウェブアプリを変更するたびに、このコマンドを再実行します。

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 バックエンドを不正使用から保護できます。