Firebaseで複数のサイトをHostingする方法

Firebaseで複数のサイトをHostingし、プロジェクトのリソースを共有する方法をメモしておきます。

1つのFirebaseプロジェクトで複数サイトを登録することで、プロジェクト内のリソース(AuthenticationやStorageなど)を共有することができます。

参考:Share project resources across multiple sites

前提条件

前提条件として、既に1つのサイトがFirebase Hostingによって紐付けられデプロイされている状態として進めていきます。

また、プロジェクトを作成し定ない場合は、firebase initを実行して環境設定から行ってください。

また、Firebase CLIがインストールされてない場合は、以下のコマンドからインストールしてください。

 

Firebaseにてサイトの追加

既に1つサイトが存在し、2つ目以降のサイトを登録する場合、Firebase Hosting画面にてサイトを追加する必要があります。

Firebase Hosting画面の詳細設定から「別のサイトを追加」を押下します。

 

追加したサイト名を入力し、「サイトの追加」を押下します。

これで準備完了です。

 

デプロイターゲットの作成

複数のサイトを登録したら、それぞれにデプロイターゲットを作成する必要があります。

デプロイターゲットを作成し、サイトのホスティングを適用するには、プロジェクトのディレクトリのルートから以下のコマンドを実行します。

  • target-name : デプロイ先であるHostingサイトの(自身で定義した)一意の識別子
  • resource-name : Firebaseプロジェクトにリスト表示されるHostingサイトの名前

 

例えば、プロジェクトがsampleで先程のサイトの追加にsample-subを追加した場合、既にsample-siteがあり、sample-site2を追加する場合は、以下のコマンドで作成します。

・sample-siteの登録

サイト追加前の既にHostingされているsampleに対して、sample-siteを作成します。

 

・sample-site2の登録

先程、サイト追加したsample-subに対して、新しく追加するsample-site2を作成します。

 

上記コマンドで作成が完了すると、.firebasercファイルに以下のように自動で追加されているのが確認できます。

・.firebaserc

 

firebase.jsonをそれぞれのターゲットに合わせて編集

次に、先程作成したターゲットにあわせてfirebase.jsonを編集していきます。これでターゲットに合わせたデプロイが可能となります。

・firebase.json

 

複数サイトのデプロイ方法

以下のコマンドで、指定したターゲットのリソースのみのデプロイします。

先程の例だと以下のコマンドを実行することで、それぞれをデプロイすることができます。

 

「TypeError: Cannot read property ‘deploys’ of undefined」エラーで、デプロイが失敗する

「TypeError: Cannot read property ‘deploys’ of undefined」エラーで、デプロイが失敗する場合がありましたが、以下を参考にして解決しました。。

参考:Hosting deploy fails with multiple sites in the project · Issue #902 · firebase/firebase-tools

複数サイトのプロジェクトが別々の場合に発生しました。

登録する複数サイトが別々のプロジェクトであっても、同じFirebasenoプロジェクト内であれば、.firebaercとfirebase.jsonを共通に持っておく必要があります。

それぞれ別のプロジェクトだからそのプロジェクトだけのデプロイターゲットを作成するのではなく、FirebaseプロジェクトのHosting全てを設定ファイルを記載することで解決できました。