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

公開サイトにデプロイする前に、変更内容を確認およびテストすることをおすすめします。Firebase Hosting を使用すると、ローカルで変更を表示してテストし、 エミュレートされたバックエンド プロジェクト リソースと結合します。チームメンバーが 変更内容をテストすると、Hosting が共有可能な一時的なプレビュー URL を作成できるようになります できます。さらに、 GitHub インテグレーション（pull からデプロイ可能） リクエストできます。

始める前に

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 Action をセットアップして使用する。

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

変更を世界と共有する準備ができたら、Hosting をデプロイします 設定することもできます。Firebase は、ユースケースに応じてさまざまなオプションを提供しています（下記のオプションを参照）。

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

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

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

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

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

    • SOURCE_SITE_ID と TARGET_SITE_ID: これらは ID です。 チャネルを含む Hosting 件のサイト。

      • デフォルトの 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 コマンドでデプロイ ターゲットを指定します。

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

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

デプロイにコメントを追加することもできます。このコメントは その他の導入情報を Hosting ダッシュボード Firebase コンソールで次の操作を行います。例:

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

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

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

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

静的コンテンツに対するリクエストが行われると、Firebase Hosting が自動的に コンテンツを CDN のキャッシュに保存します。サイトのコンテンツを再デプロイすると、 CDN 全体でキャッシュされたすべての静的コンテンツを自動的にクリアして、新しい 新しいコンテンツを受信できます。

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

HTTPS 経由で配信する

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

ファイルの削除

Firebase Hosting で選択したファイルを削除する主な方法は ファイルをローカルから削除して、再デプロイすることです。

次のステップ