1 つの Firebase プロジェクトで 1 つ以上の Firebase Hosting サイトを設定できます。各サイトはすべて同じ Firebase プロジェクト内に存在するため、すべてのサイトはプロジェクトの他の Firebase リソースにアクセスできます。
同一の 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 \ |
プレビュー URL で、デフォルトの Hosting サイトの Hosting コンテンツと構成をデプロイします。 |
firebase hosting:channel:deploy \ |
プレビュー 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 コンテンツと構成を提供します。 |