Firebase Summit で発表されたすべての情報をご覧ください。Firebase を使用してアプリ開発を加速し、自信を持ってアプリを実行する方法を紹介しています。詳細

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

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

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

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

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

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

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

これらのメソッドごとに、サイトの Firebase でプロビジョニングされた既定のサブドメインを構築するために使用されるSITE_IDを指定します。

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

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

  • 有効なホスト名ラベルである必要があります。つまり、 . 、 _など。
  • 30 文字以内である必要があります
  • Firebase 内でグローバルに一意である必要があります

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

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

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

Firebase プロジェクト ID と同じSITE_IDを持つデフォルト サイトは削除できないことに注意してください。

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

複数のサイトがあり、Firebase CLI デプロイ コマンドを実行する場合、各サイトにデプロイする必要がある設定を CLI が通信する方法が必要です。デプロイ ターゲットを使用すると、firebase.json firebase.jsonファイル内のTARGET_NAMEと、サイトへのテストまたはデプロイ用のFirebase CLI コマンドで、特定のサイトを一意に識別することができます。

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

firebase target:apply hosting TARGET_NAME RESOURCE_IDENTIFIER

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

  • TARGET_NAME — デプロイ先のホスティング サイトの一意の名前 (自分で定義したもの)

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

たとえば、Firebase プロジェクトに 2 つのサイト ( myapp-blogとmyapp-app ) を作成した場合、次のコマンドを実行して、各サイトに一意の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 で、デフォルトのホスティング サイトのホスティング コンテンツと構成をエミュレートします。
firebase emulators:start --only hosting: TARGET_NAMEローカルでホストされている URL で、指定されたホスティング サイトのホスティング コンテンツと構成をエミュレートします。
firebase hosting:channel:deploy \
CHANNEL_ID		ホスティング コンテンツとデフォルトのホスティング サイトの構成をプレビュー URL にデプロイします。
firebase hosting:channel:deploy \
CHANNEL_ID --only TARGET_NAME		指定した Hosting サイトの Hosting コンテンツと構成をプレビュー URL にデプロイします
firebase deploy --only hosting firebase.jsonで構成されたすべてのHosting サイトのライブ チャネルに Hosting のコンテンツと構成をデプロイします。
firebase deploy --only hosting: TARGET_NAME Hosting のコンテンツと構成を、指定された Hosting サイトのライブ チャネルにデプロイします。
指示説明
(推奨しません。代わりにemulators:startを使用してください)
firebase serve --only hosting		ローカルでホストされている URL で、デフォルトのホスティング サイトのホスティング コンテンツと構成を提供します。
(推奨しません。代わりにemulators:startを使用してください)
firebase serve --only hosting: TARGET_NAME		ローカルでホストされている URL で、指定されたホスティング サイトのホスティング コンテンツと構成を提供します。