Firebaseで複数のサイトをHostingし、プロジェクトのリソースを共有する方法をメモしておきます。
1つのFirebaseプロジェクトで複数サイトを登録することで、プロジェクト内のリソース(AuthenticationやStorageなど)を共有することができます。
参考：Share project resources across multiple sites
目次
前提条件
前提条件として、既に1つのサイトがFirebase Hostingによって紐付けられデプロイされている状態として進めていきます。
また、プロジェクトを作成し定ない場合は、firebase initを実行して環境設定から行ってください。
また、Firebase CLIがインストールされてない場合は、以下のコマンドからインストールしてください。
1 | $ npm install -g firebase-tools |
Firebaseにてサイトの追加
既に1つサイトが存在し、2つ目以降のサイトを登録する場合、Firebase Hosting画面にてサイトを追加する必要があります。
Firebase Hosting画面の詳細設定から「別のサイトを追加」を押下します。
追加したサイト名を入力し、「サイトの追加」を押下します。
これで準備完了です。
デプロイターゲットの作成
複数のサイトを登録したら、それぞれにデプロイターゲットを作成する必要があります。
デプロイターゲットを作成し、サイトのホスティングを適用するには、プロジェクトのディレクトリのルートから以下のコマンドを実行します。
1 | $ firebase target:apply hosting target-name resource-name |
- target-name : デプロイ先であるHostingサイトの(自身で定義した)一意の識別子
- resource-name : Firebaseプロジェクトにリスト表示されるHostingサイトの名前
例えば、プロジェクトがsampleで先程のサイトの追加にsample-subを追加した場合、既にsample-siteがあり、sample-site2を追加する場合は、以下のコマンドで作成します。
・sample-siteの登録
サイト追加前の既にHostingされているsampleに対して、sample-siteを作成します。
1 | $ firebase target:apply hosting sample-site sample |
・sample-site2の登録
先程、サイト追加したsample-subに対して、新しく追加するsample-site2を作成します。
1 | $ firebase target:apply hosting sample-site2 sample-sub |
上記コマンドで作成が完了すると、.firebasercファイルに以下のように自動で追加されているのが確認できます。
・.firebaserc
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | ... "targets": { "sample": { "hosting": { "sample-site": [ "sample" ], "sample-site2": [ "sample-sub" ] } } }, ... |
firebase.jsonをそれぞれのターゲットに合わせて編集
次に、先程作成したターゲットにあわせてfirebase.jsonを編集していきます。これでターゲットに合わせたデプロイが可能となります。
・firebase.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | { "hosting": [ { "target": "sample-site", "public": "dist", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites" : [ { "source": "**", "destination": "/index.html" } ] }, { "target": "sample-site2", "public": "dist", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites" : [ { "source": "**", "destination": "/index.html" } ] } ] } |
複数サイトのデプロイ方法
以下のコマンドで、指定したターゲットのリソースのみのデプロイします。
1 | $ firebase deploy --only hosting:target-name |
先程の例だと以下のコマンドを実行することで、それぞれをデプロイすることができます。
1 | $ firebase deploy --only hosting:sample-site |
1 | $ firebase deploy --only hosting:sample-site2 |
「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全てを設定ファイルを記載することで解決できました。