Firebase Hostingで複数サイトをデプロイする

1つのFirebaseプロジェクトで複数のサイトをデプロイできるようなので、
試してみたときの備忘録。

公式ドキュメントではこのあたり。
・複数のサイトでプロジェクトのリソースを共有する  |  Firebase

同じFirebaseプロジェクトなので、AuthやFirestoreの情報を共有できるので便利。

セカンダリサイトの追加

まずは、追加するサイトの準備。

FirebaseコンソールのHostingの下の方に
「別のサイトを追加」ボタンがあるのでクリック。

すると、SITE_IDを入力するダイアログが出てくるので、
好きなIDを決めて「サイトの追加」をクリック。

.firebasercにサイトの情報を追加

.firebasercに2つサイトがあることを教える必要がある。
コマンドで追加ができるので、デフォルトのサイトと合わせ、追加。

# firebase target:apply hosting <TARGET_NAME> <SITE_ID>
$ firebase target:apply hosting default my-app
$ firebase target:apply hosting secondary secondary-my-app

すると、以下のような感じに追加される。

{
  "projects": {
    "default": "my-app"
  },
  "targets": {
    "sssapi-app": {
      "hosting": {
        "default": [
          "my-app"
        ],
        "secondary": [
          "secondary-my-app"
        ]
      }
    }
  }
}

firebase.jsonに各サイトのホスティング構成を追加

サイトが2つになったので、構成情報もそれぞれ記載する必要がある。

{
  "hosting": [
    {
      "target": "default",
      "public": "default/public",
      // 略
    },
    {
      "target": "secondary",
      "public": "secondary/public",
      // 略
    }
  ],
}

配列を使わず1つだけの場合などだとデプロイ時にエラーになる。

・ターゲットの1つ目が最初のサイトで、配列を使わず1つだけだと、
　最初のサイトだけデプロイされる。
・ターゲットの1つ目が追加したサイトで、配列を使わず1つだけだと、
　デプロイ時にエラーになる。
・ターゲットの順番に関わらず、配列を使って1つだけだと、
　デプロイ時にエラーになる。

デプロイする

各サイトのデプロイは、TARGET_NAMEを使う形。

# default(my-app)へのデプロイ
$ firebase deploy --only hosting:default

# secondary(secondary-my-app)へのデプロイ
$ firebase deploy --only hosting:secondary

# 同時にデプロイ
$ firebase deploy --only hosting

以上!!

参考にしたサイト様

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