ウェブアプリをローカルでテストし、変更を他のユーザーと共有して、公開サイトにデプロイする

公開サイトにデプロイする前に、変更内容を確認およびテストすることをおすすめします。Firebase Hosting では、変更をローカルで確認およびテストし、エミュレートしたバックエンド プロジェクトのリソースとやり取りできます。同僚に変更を確認してテストしてもらう必要がある場合は、サイトの共有可能で一時的なプレビュー URL を Hosting で作成できます。pull リクエストからデプロイできるように GitHub の統合もサポートされています。

始める前に

Hosting を使ってみるに記載されている手順を完了します。具体的には以下の作業です。

  1. Firebase CLI をインストールまたは最新バージョンに更新します。
  2. ローカル プロジェクト ディレクトリ（アプリのコンテンツを含む）を Firebase プロジェクトに接続します。

オプションとして、アプリの Hosting のコンテンツと構成をデプロイできますが、このページで説明する手順の前提条件ではありません。

ステップ 1: ローカルでテストする

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

Hosting は Firebase Local Emulator Suite の一部であり、これを使用すると、アプリはエミュレートされた Hosting のコンテンツと構成のほか、エミュレートされたプロジェクト リソース（関数、データベース、ルール）ともオプションでやり取りできます。

  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"
    }
  }

ステップ 2: プレビューと共有

ウェブアプリに対して行った変更を公開前に他のユーザーに表示したい場合は、プレビュー チャネルを使用できます。

プレビュー チャネルにデプロイすると、Firebase は、共有可能で一時的 URL である「プレビュー URL」でウェブアプリを提供します。プレビュー URL を使用した場合、ウェブアプリは実際のバックエンドとやり取りして、すべてのプロジェクト リソースを取得しようとします（ただし、リライトの構成内の「固定された」関数はこれに当てはまりません）。

プレビュー URL にはランダムなハッシュが含まれるため、推測は困難です。ただし、公開 URL なので、URL を知っている人なら誰でもアクセスできます。

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

    firebase hosting:channel:deploy CHANNEL_ID

    CHANNEL_ID は、スペースを含まない文字列（feature_mission-2-mars など）に置き換えます。この ID を使用して、プレビュー チャネルに関連付けられるプレビュー URL が作成されます。

  2. CLI から返されたプレビュー URL でウェブアプリを開きます。URL は次のようになります: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app。

  3. プレビュー URL を変更して更新するには、同じコマンドをもう一度実行します。コマンドには必ず同じ CHANNEL_ID を指定してください。

チャネルの有効期限を設定する方法など、プレビュー チャネルの管理についてご確認ください。

Firebase Hosting は、pull リクエストへの変更を commit するとプレビュー URL を自動的に作成して更新する GitHub アクションをサポートしています。この GitHub アクションを設定して使用する方法をご覧ください。

ステップ 3: 公開サイトにデプロイする

変更を共有する準備が整ったら、Hosting コンテンツと構成をライブチャネルにデプロイします。Firebase は、ユースケースに応じてさまざまなオプションを提供しています（下記のオプションを参照）。

オプション 1: プレビュー チャネルのクローンをライブチャネルに作成する

このオプションを使用すると、プレビュー チャネルでテストしたコンテンツと構成をそのままライブチャネルにデプロイできます。詳しくは、バージョンのクローン作成をご覧ください。

  1. 任意のディレクトリから次のコマンドを実行します。

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    各プレースホルダを次のように置き換えます。

    • SOURCE_SITE_ID、TARGET_SITE_ID: チャネルが含まれる Hosting サイトの ID です。

      • デフォルトの Hosting サイトには、Firebase プロジェクト ID を使用します。
      • 同じ Firebase プロジェクトに属するサイトだけでなく、異なる Firebase プロジェクトのサイトも指定できます。

    • SOURCE_CHANNEL_ID: ライブチャネルにデプロイしようとしているバージョンを現在提供しているチャネルの識別子です。

      • ライブチャネルの場合、live をチャネル ID として使用します。

  2. 変更内容を確認します（次のステップ）。

オプション 2: ローカル プロジェクト ディレクトリからライブチャネルにデプロイする

このオプションを使用すると、ライブチャネルに固有の構成を柔軟に調整できるほか、プレビュー チャネルを使用していない場合でもデプロイできます。

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

    firebase deploy --only hosting

  2. 変更内容を確認します（次のステップ）。

ステップ 4: 公開サイトで変更を表示する

上記のどちらのオプションでも、Hosting のコンテンツと構成を次のサイトにデプロイします。

  • デフォルトの Hosting サイトと追加の Hosting サイト用に Firebase でプロビジョニングされたサブドメイン:
    SITE_ID.web.app（例: PROJECT_ID.web.app）
    SITE_ID.firebaseapp.com（例: PROJECT_ID.firebaseapp.com）

  • Hosting サイトに接続したすべてのカスタム ドメイン。

デプロイを特定の Hosting サイトに限定するには、CLI コマンドでデプロイ ターゲットを指定します。

その他のデプロイ アクティビティと情報

デプロイへのコメントを追加する

デプロイにコメントを追加することもできます。このコメントは、他のデプロイ情報とともに Firebase コンソールの Hosting ダッシュボードに表示されます。次に例を示します。

firebase deploy --only hosting -m "Deploying the best new feature ever."

デプロイ前とデプロイ後にスクリプトで実行されるタスクを追加する

必要に応じて、シェル スクリプトを firebase deploy コマンドに接続して、デプロイ前またはデプロイ後のタスクを実行できます。たとえば、デプロイ後のフックで、管理者に新しいサイト コンテンツのデプロイを通知できます。詳細については、Firebase CLI のドキュメントをご覧ください。

デプロイされたコンテンツをキャッシュに保存する

静的コンテンツがリクエストされると、Firebase Hosting は CDN のキャッシュにコンテンツを自動的に保存します。サイトのコンテンツを再デプロイすると、Firebase は CDN 全体でキャッシュからすべての静的コンテンツをクリアします。この処理は自動的に行われ、新しいリクエストで新しいコンテンツを取得できるようになります。

動的コンテンツのキャッシュも構成できます。

HTTPS 経由で配信する

Firebase Hosting でホストされていないすべての外部リソース（外部スクリプトを含む）が SSL（HTTPS）経由で読み込まれるようにします。ほとんどのブラウザでは、混合コンテンツ（SSL トラフィックと非 SSL トラフィック）の読み込みが許可されていません。

次のステップ