1 つの Firebase プロジェクトで 1 つ以上の Firebase Hosting サイトを設定できます。サイトはすべて同じ Firebase プロジェクトにあるため、すべてのサイトがプロジェクトの他の Firebase リソースにアクセスできます。
- 各サイトには独自のホスティング構成があります。
- 各サイトは独自のコンテンツ コレクションをホストしています。
- 各サイトには、1 つまたは複数のドメインを関連付けることができます。
同じ Firebase プロジェクト内に複数の Hosting サイトを設定することで、関連するサイトとアプリの間で Firebase リソースをより簡単に共有できます。たとえば、ブログ、管理パネル、公開アプリを同じ Firebase プロジェクト内の個別のサイトとして設定すると、それらはすべて同じ Firebase Authentication ユーザー データベースを共有でき、独自のドメインやコンテンツも持つことができます。
ステップ 1 : Firebase CLI のバージョンを更新する
Firebase CLI の最新バージョンに更新して、最新の Firebase Hosting 機能にアクセスします。
ステップ 2 : サイトを追加する
次のいずれかの方法を使用して、Firebase プロジェクトにサイトを追加します。
Firebase コンソールの [ホスティング] ページでワークフローを使用する
次の Firebase CLI コマンドを使用し
firebase hosting:sites:create SITE_ID
ホスティング REST API を使用します:
projects.sites.create
これらのメソッドごとに、サイトの Firebase でプロビジョニングされた既定のサブドメインを構築するために使用されるSITE_ID
を指定します。
-
SITE_ID .web.app
-
SITE_ID .firebaseapp.com
これらの URL にはSITE_ID
が使用されるため、サイト ID には次の要件があります。
- 有効なホスト名ラベルである必要があります。つまり、
.
、_
など。 - 30 文字以内である必要があります
- Firebase 内でグローバルに一意である必要があります
各サイトに、オプションでカスタム ドメインを追加して、同じコンテンツと構成を複数の URL に提供することもできます。
セカンダリ サイトを削除する
次のいずれかの方法を使用して、Firebase プロジェクトから不要なサイトを削除します。
Firebase コンソールの [ホスティング] ページでワークフローを使用する
次の Firebase CLI コマンドを使用し
firebase hosting:sites:delete SITE_ID
ホスティング REST API を使用します:
projects.sites.delete
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 \ | ホスティング コンテンツとデフォルトのホスティング サイトの構成をプレビュー URL にデプロイします。 |
firebase hosting:channel:deploy \ | 指定した 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 で、指定されたホスティング サイトのホスティング コンテンツと構成を提供します。 |