コンソールへ移動

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

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 ページから直接行います。各サイトには、オプションでカスタム ドメインを追加して、同じコンテンツと構成を複数の URL で提供することもできます。

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

不要なサイトの削除は、Firebase Hosting ページから直接行います。デフォルト サイトは削除できません。デフォルト サイトには Firebase プロジェクト ID と同じ名前が付けられています。

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

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

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

firebase target:apply hosting target-name resource-name

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

  • target-name: デプロイ先である Hosting サイトの(自身で定義した)一意の識別子

  • resource-name - Firebase プロジェクトにリスト表示される Hosting サイトの名前

たとえば、Firebase プロジェクトで 2 つのサイト(myapp-blogmyapp-app)を作成した場合は、次のコマンドを実行すると、一意の target-name を各サイト(それぞれ blogapp)に適用できます。

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

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

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

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

  • 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 deploy プロジェクト ディレクトリにデプロイできるすべてのリソースのリリースを作成します
firebase deploy --only hosting:target-name 指定した Hosting ターゲットのリソースのみのリリースを作成します
firebase serve Firebase プロジェクトをローカルでサービス提供します
firebase serve --only hosting:target-name 指定した Hosting ターゲットのリソースのみをローカルでサービス提供します