Firebase Hosting エミュレータでウェブアプリのプロトタイピングとテストを行う

Firebase Hosting エミュレータでウェブアプリのプロトタイピングとテストを開始する前に、Firebase Local Emulator Suite の全体的なワークフローを理解し、Local Emulator Suite のインストールと構成を行い、その CLI コマンドを確認してください。

また、Firebase Hosting の機能と実装ワークフローについても知っておく必要があります。まず、Firebase Hosting の概要をご覧ください。

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

Firebase Hosting エミュレータは、Hosting サービスの高忠実度のローカル エミュレーションを行います。本番環境の Hosting にあるほとんどの機能を利用できます。Hosting エミュレータでは、次のことができます。

  • ストレージ料金やアクセス料金を発生させずに、静的サイトとウェブアプリをプロトタイピングする
  • Hosting サイトにデプロイする前に、HTTPS 関数のプロトタイピング、テスト、デバッグを行う
  • コンテナ化された継続的インテグレーションのワークフローにおいてサイトとウェブアプリをテストする

Firebase プロジェクトを選択する

Firebase Local Emulator Suite は、1 つの Firebase プロジェクト向けにプロダクトをエミュレートします。

エミュレータを起動する前に CLI の作業ディレクトリで firebase use を実行し、使用するプロジェクトを選択します。または、各エミュレータ コマンドに --project フラグを渡すという方法もあります。

Local Emulator Suite は、実際の Firebase プロジェクトとデモ プロジェクトのエミュレーションに対応しています。

プロジェクト タイプ 特長 エミュレータでの使用
実際

実際の Firebase プロジェクトとは、（通常は Firebase コンソールで）自分で作成および構成したプロジェクトのことです。

実際のプロジェクトには、データベース インスタンス、ストレージ バケット、関数など、その Firebase プロジェクト用にセットアップしたリソースのライブリソースが含まれています。

実際の Firebase プロジェクトを使用する場合、対応しているプロダクトの一部またはすべてに対してエミュレータを実行できます。

エミュレートしていないプロダクトに関しては、アプリとコードはライブリソース（データベース インスタンス、ストレージ バケット、関数など）とやり取りします。
デモ

デモ Firebase プロジェクトには、実際の Firebase 構成がなく、ライブリソースもありません。これらのプロジェクトには通常、Codelab またはその他のチュートリアルを介してアクセスします。

デモ プロジェクトのプロジェクト ID には demo- という接頭辞が付いています。

 デモ Firebase プロジェクトを使用する場合、アプリとコードはエミュレータのみとやり取りします。エミュレータが実行されていないリソースとアプリがやり取りしようとすると、コードは失敗します。

可能な限り、デモ プロジェクトを使用することをおすすめします。次のような利点があります。

  • Firebase プロジェクトを作成せずにエミュレータを実行できるため、セットアップが簡単である
  • エミュレートされていない（本番環境の）リソースを誤って呼び出しても、データが変更されたり、使用量がカウントされたり、課金が発生したりする可能性がないため、安全性が高い
  • インターネットにアクセスして SDK 構成をダウンロードする必要がないため、オフラインでも使いやすい

コア プロトタイピングのワークフロー

簡単な反復処理を行う場合や、アプリにエミュレートされたバックエンド プロジェクトのリソースとやり取りさせたい場合は、Hosting のコンテンツと構成をローカルでテストできます。ローカルでテストする場合、Firebase はローカルでホストされる URL でウェブアプリを提供します。

  1. （省略可）デフォルトでは、ローカルでホストされるアプリは、エミュレートされたプロジェクト リソースではなく、実際のプロジェクト リソース（関数、データベース、ルールなど）とやり取りします。オプションとして、構成済みのエミュレートされたプロジェクト リソースを使用するようにアプリを接続することもできます。詳細: Realtime Database | Cloud Firestore | Cloud Functions

  2. ローカル プロジェクト ディレクトリのルートから次のコマンドを実行します。

    firebase emulators:start

  3. CLI から返されたローカル URL（通常は http://localhost:5000）でウェブアプリを開きます。

  4. ローカル URL に変更を適用するには、ブラウザを更新します。

他のローカル デバイスからテストする

デフォルトでは、エミュレータは localhost からのリクエストにのみ応答します。つまり、ホストされているコンテンツには同じパソコンのウェブブラウザからアクセスできますが、ネットワーク上の他のデバイスからはアクセスできません。他のローカル デバイスからテストする場合は、firebase.json を次のように構成します。

"emulators": {
    // ...

    "hosting": {
      "port": 5000,
      "host": "0.0.0.0"
    }
  }

継続的インテグレーションのワークフロー用の認証トークンを生成する

継続的インテグレーションのワークフローが Firebase Hosting に依存している場合は、firebase emulators:exec を実行するためにトークンを使用してログインする必要があります。他のエミュレータではログインする必要がありません。

トークンを生成するには、ローカル環境で firebase login:ci を実行します。これは CI システムからは実行しないでください。手順に沿って認証します。 トークンはビルド全体で有効になるため、この手順はプロジェクトごとに 1 回だけ実行する必要があります。トークンはパスワードのように扱い、機密性を保持する必要があります。

CI 環境でビルド スクリプトで使用可能な環境変数を指定できる場合は、FIREBASE_TOKEN という名前の環境変数を作成し、値をアクセス トークンの文字列にします。Firebase CLI が自動的に FIREBASE_TOKEN 環境変数を取得し、エミュレータが正しく起動します。

最後の手段として、シンプルにビルド スクリプトにトークンを含めることができますが、信頼できない第三者がアクセスできないようにする必要があります。このハードコードされたアプローチでは、firebase emulators:exec コマンドに --token "YOUR_TOKEN_STRING_HERE" を追加できます。

次のステップ