Firebase App Hosting エミュレータを使用してローカルでウェブアプリをテストする

App Hosting デプロイの前に、Firebase Local Emulator Suite の一部である App Hosting エミュレータを使用して、アプリのローカルテストを実行できます。

App Hosting エミュレータを使用する前に、Firebase Local Emulator Suite の全体的なワークフローを理解し、Local Emulator Suiteインストールと構成を行い、CLI コマンドを確認しておいてください。

このトピックは、App Hosting に精通していることを前提としています。必要に応じて、App Hosting の概要などの資料を参照して、App Hosting の仕組みを理解してください。

App Hosting エミュレータでできること

App Hosting エミュレータを使用すると、ウェブ アプリケーションをローカルでテストして調整できます。これにより、開発プロセスを効率化し、Firebase を使用してビルドされ App Hosting にデプロイされたウェブアプリの品質を向上させることができます。

App Hosting エミュレータ:

  1. apphosting.yaml 構成ファイルで定義された環境変数を使用して、ウェブアプリをローカルで実行できます。
  2. さまざまな App Hosting 環境に保存したシークレットをエクスポートして、さまざまな環境でアプリケーションをシミュレートできます。
  3. 他の Firebase エミュレータと併用できます。Firestore、Auth、その他のエミュレータを使用している場合、Local Emulator Suite により、これらのエミュレータが App Hosting エミュレータの前に最初に起動されます。

エミュレータを構成する

始めに、Local Emulator Suite のインストール、構成、統合で説明されているように、Local Emulator Suite をインストールして初期化します。設定する他の Firebase エミュレータに加えて、App Hosting Emulator を選択してください。CLI から、次のような App Hosting エミュレータの値の入力を求められます。

  • プロジェクトを基準としたアプリのルート ディレクトリ。これは、App Hosting を使用した monorepo を使用している場合に重要です。
  • 特定の環境のシークレットをエクスポートするかどうか。
firebase init emulators
=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ App Hosting Emulator
 ◯ Firestore Emulator
 ◯ Database Emulator
 ◯ Hosting Emulator
 ◯ Pub/Sub Emulator
 ◯ Storage Emulator
 ◯ Eventarc Emulator
(Move up and down to reveal more choices)

? Specify your app's root directory relative to your project (.)

? What configs would you like to export? (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ❯◯ Secrets

? Which environment would you like to export secrets from Secret Manager for?:
  ◯ base (apphosting.yaml)
 ❯◯ staging (apphosting.yaml + apphosting.staging.yaml)
  ◯ preview (apphosting.yaml + apphosting.preview.yaml)

i Wrote Secrets as environment variables to apphosting.local.yaml.
i apphosting.local.yaml has been automatically added to your .gitignore.

この設定フローで指定した値は、firebase.jsonApp Hosting エミュレータ構成の更新に使用されます。firebase.json を直接更新して、App Hosting エミュレータを構成することもできます。App Hosting エミュレータのスキーマは次のとおりです。

{
  ...
  "emulators": {
    "apphosting": {
      "startCommandOverride": <command> [optional]
      "rootDirectory": <path> [optional]
      }
    }
  }
  • startCommandOverride は、エミュレータの初期化時に自動的に生成され、設定されます。指定しない場合、エミュレータはパッケージ マネージャーの dev コマンドを検出して実行します。
  • rootDirectory は、monorepo プロジェクトの設定をサポートするために使用されます。ウェブアプリがサブディレクトリにある場合は、ルート(firebase.json の場所)に対するそのディレクトリのパスを提供する必要があります。

エミュレーションを管理する

エミュレータの初期化により、アプリのルート ディレクトリに apphosting.local.yaml ファイルが作成されます。この構成ファイルは、本番環境で使用される apphosting.yaml ファイルと同じスキーマを持ちますが、ローカル開発専用です。デフォルトでは、エミュレータは apphosting.yaml ファイルから構成を読み取りますが、apphosting.local.yaml ファイルが存在する場合は、そのファイル内の構成が優先されます。

シークレットをエクスポートして、ローカルでさまざまな環境をシミュレートする

複数の環境で作業していて、ローカルで異なるアプリ環境をシミュレートする場合は、対応する環境のシークレットが必要な場合があります。特定の環境のシークレットをエクスポートするには、CLI コマンド apphosting:config:export を使用します(または、エミュレータを構成するで説明されているように、必要に応じてエミュレータの初期化中にシークレットをインポートすることもできます)。

このコマンドでは、プロジェクトで使用可能な App Hosting 環境を選択する必要があります。環境固有の App Hosting 構成(「apphosting.staging.yaml」など)とベースの App Hosting 構成(「apphosting.yaml」)が統合され、環境固有の構成が優先されます。同じ名前の Secret が両方の構成に存在する場合は、環境固有の構成の Secret が使用されます。

たとえば、ステージング環境からエミュレータに Secret をエクスポートするには:

firebase apphosting:config:export --project <your firebase project Id>

? What configs would you like to export? (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ❯◯ Secrets

? Which environment would you like to export secrets from Secret Manager for?:
  ◯ base (apphosting.yaml)
 ❯◯ staging (apphosting.yaml + apphosting.staging.yaml)
  ◯ preview (apphosting.yaml + apphosting.preview.yaml)
i Wrote Secrets as environment variables to apphosting.local.yaml.
i apphosting.local.yaml has been automatically added to your .gitignore.

apphosting.local.yaml ファイルが更新され(存在しない場合は作成されます)、環境変数としてエクスポートされたシークレットが追加されます。ファイルに機密情報が平文で含まれているため、ソースコード リポジトリに誤って commit されないように、.gitignore ファイルに自動的に追加されます。

エミュレータを実行する

firebase emulators:start

これにより、App Hosting エミュレータを含む、firebase.json ファイルで定義されているすべてのエミュレータが起動します。