Firebase Hostingで1プロジェクトに複数サイトをデプロイする

自分用の簡易メモ。

今回の構成を仮に表の通りにする。

| サイト名 | ドメイン名       |展開するパス|
|--------|---------------|---------|
|proj    |proj.web.app   |./a/     |
|b-proj  |b-proj.web.app |./b/     |
|c-proj  |c-proj.web.app |./c/     |

このメモでは、複数のfirebase.jsonを作成して1プロジェクトへページをデプロイする方法を残す。

## ファイル構成
今回の初期状態は下の通り。

```bash
$ tree
.
├── a
│   └── index.html
├── b
│   └── index.html
└── c
    └── index.html
```

それぞれ、
`./a => proj`
`./b => b-proj`
`./c => c-proj`
にデプロイしていく。

## ベースの設定の生成

とりあえず初期化してベースの設定ファイルを生成しておく。

```bash
$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

＜省略＞

? Select a default Firebase project for this directory: PROJECT_NAME (PROJECT_NAME)
i  Using project PROJECT_NAME (PROJECT_NAME)

=== Hosting Setup

＜プロジェクトによって設定内容が変わるので省略＞

✔  Firebase initialization complete!
```

今回はSPAを有効にして設定を作成した。

```json:a/firebase.json
{
  "hosting": {
    "public": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```

## 設定の編集

プロジェクト内の別サイトを設定で指定する場合は、`package.json`に`hosting.site`を追加することでデプロイするサイトを切り替えることができる。

```json:b/firebase.json
{
  "hosting": {
    "site": "b-proj",
    "public": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```
```json:c/firebase.json
{
  "hosting": {
    "site": "c-proj",
    "public": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```

サイト`proj`については、`hosting.site`を追加しない。

この時点でファイルは下の通りになる。

```bash
$ tree
.
├── a
│   ├── firebase.json
│   └── index.html
├── b
│   ├── firebase.json
│   └── index.html
└── c
    ├── firebase.json
    └── index.html

3 directories, 6 files
```

## デプロイ

あとはプロジェクトを設定してデプロイを実行する。

```bash
$ cd c/


$ firebase use --add
? Which project do you want to add? PROJECT_NAME
? What alias do you want to use for this project? (e.g. staging) PROJ

Created alias PROJ for PROJECT_NAME.
Now using alias PROJ (PROJECT_NAME)


$ firebase deploy

=== Deploying to 'PROJECT_NAME'...

i  deploying hosting
i  hosting[c-proj]: beginning deploy...
i  hosting[c-proj]: found 1 files in .
✔  hosting[c-proj]: file upload complete
i  hosting[c-proj]: finalizing version...
✔  hosting[c-proj]: version finalized
i  hosting[c-proj]: releasing new version...
✔  hosting[c-proj]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/PROJECT_NAME/overview
Hosting URL: https://c-proj.firebaseapp.com
```
cの例ですが、他も流れは同様。
アップロードが完了したら、リンクからページが見れるようになっているはず。

## さいごに
設定ファイルを分割できるみたいだから、リポジトリごとに設定ファイル持たせたりできそう。
`firebase.json`は1つにまとめないといけないって勘違いをしていたので、それを解消できてよかった。