複数のサイトでプロジェクトのリソースを共有する

1 つの Firebase プロジェクトで 1 つ以上の Firebase Hosting サイトを設定できます。各サイトはすべて同じ Firebase プロジェクト内に存在するため、すべてのサイトはプロジェクトの他の Firebase リソースにアクセスできます。

  • サイトごとにホスティング構成が異なります。
  • サイトごとに独自のコンテンツ コレクションがホストされます。
  • 各サイトが 1 つ以上の関連ドメインを所有しています。

同一の Firebase プロジェクト内に複数の Hosting サイトを設定すると、関連サイトとアプリの間で Firebase リソースをより簡単に共有できます。たとえば、ブログ、管理パネル、公開アプリがすべて同じ Firebase プロジェクト内の個別のサイトとして設定されている場合、それらすべては同じ Firebase Authentication ユーザー データベースを共有でき、その一方で独自のドメインやコンテンツも所有できます。

ステップ 1: Firebase CLI のバージョンを更新する

Firebase CLI の最新バージョンに更新して、Firebase Hosting の最新の機能にアクセスします。

ステップ 2: サイトを追加する

次のいずれかの方法で、Firebase プロジェクトにサイトを追加します。

  • Firebase コンソールの Hosting ページのワークフローを使用します。

  • 次の Firebase CLI コマンドを使用します。 firebase hosting:sites:create SITE_ID

  • 次の Hosting REST API を使用します。 projects.sites.create

これらのメソッドごとに SITE_ID を指定します。これは、サイト向けに Firebase でプロビジョニングされたデフォルトのサブドメインを作成するために使用されます。

  • SITE_ID.web.app
  • SITE_ID.firebaseapp.com

これらの URL には SITE_ID が使用されるため、サイト ID には次の要件があります。

  • 有効なホスト名ラベルでなければなりません。つまり、.、_ などを含めることはできません。
  • 30 文字以下にしてください。
  • Firebase 内でグローバルに一意である必要があります。

各サイトには、オプションでカスタム ドメインを追加して、同じコンテンツと構成を複数の URL で提供することもできます。

セカンダリ サイトを削除する

次のいずれかの方法で、Firebase プロジェクトから不要なサイトを削除します。

  • Firebase コンソールの Hosting ページのワークフローを使用します。

  • 次の Firebase CLI コマンドを使用します。 firebase hosting:sites:delete SITE_ID

  • 次の Hosting REST API を使用します。 projects.sites.delete

Firebase プロジェクト ID と同じ SITE_ID を持つデフォルト サイトは削除できません。

ステップ 3: サイトのデプロイ ターゲットを設定する

複数のサイトを使用していて、Firebase CLI のデプロイ コマンドを実行する場合、CLI には、各サイトにどの設定をデプロイするかを伝達する手段が必要です。デプロイ ターゲットを使用すると、firebase.json 構成ファイル内およびサイトへのテストまたはデプロイ用の Firebase CLI コマンド内で、TARGET_NAME を使用して特有のサイトを一意に識別できます。

デプロイ ターゲットを作成し、TARGET_NAME を Hosting サイトに適用するには、プロジェクト ディレクトリのルートから次の CLI コマンドを実行します。

firebase target:apply hosting TARGET_NAME RESOURCE_IDENTIFIER

パラメータは次のとおりです。

  • TARGET_NAME: デプロイ先である Hosting サイトの（自身で定義した）一意の名前

  • RESOURCE_IDENTIFIER: Firebase プロジェクトにリストされている Hosting サイトの SITE_ID

たとえば、2 つのサイト（myapp-blog、myapp-app）を Firebase プロジェクト内に作成した場合、次のコマンドを実行して Firebase プロジェクトに一意の TARGET_NAME（それぞれ blog と app）を適用できます。

firebase target:apply hosting blog myapp-blog
firebase target:apply hosting app myapp-app

デプロイ ターゲットの設定はプロジェクト ディレクトリの .firebaserc ファイルに保存されるため、デプロイ ターゲットを設定する必要があるのはプロジェクトごとに 1 回だけです。

ステップ 4: 各サイトのホスティング構成を定義する

firebase.json ファイルでホスティング構成を定義する際は、サイトの適用済み TARGET_NAME を使用します。

  • firebase.json ファイルで複数のサイトの構成を定義する場合は、次の配列形式を使用します。

    {
  "hosting": [ {
      "target": "blog",  // "blog" is the applied TARGET_NAME for the Hosting site "myapp-blog"
      "public": "blog/dist",  // contents of this folder are deployed to the site "myapp-blog"

      // ...
    },
    {
      "target": "app",  // "app" is the applied TARGET_NAME for the Hosting site "myapp-app"
      "public": "app/dist",  // contents of this folder are deployed to the site "myapp-app"

      // ...

      "rewrites": [...]  // You can define specific Hosting configurations for each site
    }
  ]
}

  • firebase.json ファイルで 1 つのサイトのみの構成を定義する場合は、配列形式を使用する必要はありません。

    {
  "hosting": {
      "target": "blog",
      "public": "dist",

      // ...

      "rewrites": [...]
  }
}

ステップ 5: ローカルでテストし、変更をプレビューしてから、サイトにデプロイする

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

コマンド 説明
firebase emulators:start --only hosting ローカルでホストされる URL で、デフォルトの Hosting サイトの Hosting のコンテンツと構成をエミュレートします。
firebase emulators:start --only hosting:TARGET_NAME ローカルでホストされる URL で、指定した Hosting サイトの Hosting のコンテンツと構成をエミュレートします。
firebase hosting:channel:deploy \
CHANNEL_ID		 プレビュー URL で、デフォルトの Hosting サイトの Hosting のコンテンツと構成をデプロイします。
firebase hosting:channel:deploy \
CHANNEL_ID --only TARGET_NAME		 プレビュー URL で、指定した Hosting サイトの Hosting のコンテンツと構成をデプロイします。
firebase deploy --only hosting Hosting のコンテンツと構成を、firebase.json で構成されているすべての Hosting サイトのライブチャネルにデプロイします。
firebase deploy --only hosting:TARGET_NAME Hosting のコンテンツと構成を、指定した Hosting サイトのライブチャネルにデプロイします。
コマンド 説明
（非推奨。代わりに emulators:start を使用）
firebase serve --only hosting		 ローカルでホストされる URL で、デフォルトの Hosting サイトの Hosting のコンテンツと構成を提供します。
（非推奨。代わりに emulators:start を使用）
firebase serve --only hosting:TARGET_NAME		 ローカルでホストされる URL で、指定した Hosting サイトの Hosting のコンテンツと構成を提供します。