【超わかりやすく】1つのFirebaseプロジェクトで複数のサイトをHostingする方法

#はじめに

https://firebase.google.com/docs/hosting/multisites?hl=ja

Firebase Hostingで複数のサイトをデプロイする手順ですが、👆のドキュメントでは微妙にわかりにくかったのでここに記録します・・・

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

#環境と前提
・私の場合はNuxtで作ったプロジェクト

・既にFirebaseコンソール上でプロジェクトが存在する
・該当のFirebaseプロジェクトで、既に1つサイトがHostingされている

#全体像
![スクリーンショット 2021-11-07 16.12.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/70c79d0d-65ed-b66b-706e-17b0867621aa.png)

・私の場合、まず**「baseTest」**というFirebaseプロジェクトがあります。

・「baseTest」では既に**「basetest-12345.web.app」**のリンクでサイトがHostingされています。
→Nuxtのプロジェクト名は`basetest_1`

・そこへ新たに**「basetest-second.web.app」**のリンクでサイトをHostingさせたいです。
→Nuxtのプロジェクト名は`basetest_2`

※Nuxtのプロジェクト名とは、👇でいう`<project-name>`の部分！！

```console
npx create-nuxt-app <project-name>
```

https://nuxtjs.org/docs/get-started/installation/

#`basetest_2`をfirebase CLIで設定
新たにHostingしたい`basetest_2`にFirebaseを追加します。

```console
cd basetest_2
firebase login
firebase init
```

以下を選択
・Hosting
・Use an existing project（baseTestを選択）

まぁこの辺りは１度やった方が多いと思うので、、この辺でスルーします:joy:
`firebase.json`と`.firebaserc`が生成されていればOKです！


#2つ目のサイトをFirebaseコンソールのHostingから追加
FirebaseコンソールのHostingの下の方に
「別のサイトを追加」ボタンがあるのでクリック。
![20210629135400.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/27b59de9-3379-bfe3-cf4c-c7f64bba9313.png)

`SITE_ID`を入力するダイアログが出てくるので、`basetest-second`を入力。
これで「basetest-second.web.app」のリンクでサイトがHostingされるようになります！
![スクリーンショット 2021-11-07 16.32.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/2ba62913-7fb5-8f67-08b8-a4f800b97b6d.png)

#コマンドでサイトのデプロイ ターゲットを設定する
>複数のサイトを使用していて、Firebase CLI のデプロイ コマンドを実行する場合、CLI には、各サイトにどの設定をデプロイするかを伝達する手段が必要です。デプロイ ターゲットを使用すると、firebase.json 構成ファイル内およびサイトへのテストまたはデプロイ用の Firebase CLI コマンド内で、TARGET_NAME を使用して特有のサイトを一意に識別できます。
https://firebase.google.com/docs/hosting/multisites?hl=ja#set_up_deploy_targets

という事らしい。。。（む、むずい・・・）


要は`basetest_1`と`basetest_2`に対して、👇のコマンドを実行してやればいい感じっぽいです。

```console
firebase target:apply hosting TARGET_NAME RESOURCE_IDENTIFIER
```

>・TARGET_NAME: デプロイ先である Hosting サイトの（自身で定義した）一意の名前
・RESOURCE_IDENTIFIER: Firebase プロジェクトにリストされている Hosting サイトの `SITE_ID`

僕の場合はわかりやすいよう、`TARGET_NAME`と`RESOURCE_IDENTIFIER`は同じにしました。。
**`SITE_ID`とは「basetest-12345.web.app」の「basetest-12345」の部分です！**

なので👇コマンドを`basetest_1`と`basetest_2`に対して実行！

```console
firebase target:apply hosting basetest-12345 basetest-12345

firebase target:apply hosting basetest-second basetest-second
```

これをすると`.firebaserc`が勝手に編集されます。

```json:.firebaserc
{
  "projects": {
    "default": "basetest-12345"
  },
  "targets": {
    "basetest-12345": {
      "hosting": {
        "basetest-12345": [
          "basetest-12345"
        ],
        "basetest-second": [
          "basetest-second"
        ]
      }
    }
  }
}
```

#`firebase.json`を編集し、各サイトのホスティング構成を定義する
firebase.jsonを編集し、サイト毎にデプロイ先を設定します。
**`target`を指定する部分が肝心です:sunglasses:**

※僕の場合はNuxtのプロジェクトなので、`"public": "dist",`となってますが、ここは人によって変わると思います！

既にHosting済である`basetest_1`は👇のようになります。（`target`を追加しただけかと）

```json:basetest_1/firebase.json
{
  "hosting": {
    "target": "basetest-12345",
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites" : [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```

これからHostingしたい`basetest_2`は👇のようになります。（`target`を追加しただけかと）

```json:basetest_1/firebase.json
{
  "hosting": {
    "target": "basetest-second",
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites" : [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```

#デプロイする

```console
firebase deploy --only hosting
```

ターミナルから`basetest_2`の階層でデプロイすればOK！！

`basetest_1`に関しても同様です:raised_hands: