【firebase hosting】カスタムドメイン(Route53) x 複数サイト x 複数プロジェクトのホスティング

わちゃわちゃしたタイトルですが以下の３つを一緒に行う必要があったので、全部いっぺんにやったよって話です。

①AWS Route53で発行しているカスタムドメインを利用する
②単一のfirebaseプロジェクトで複数のサイトを管理する
③複数のfirebaseプロジェクトに分けてデプロイする

## 前準備
前段階として以下が準備できていることを前提とします。
ここら辺については分かりやすい記事もたくさんあるのでそちらを参考に準備してみてください。

1. firebaseプロジェクトを準備しましょう
2. firebase CLIをインストールしましょう
3. AWS Route53を使ってカスタムドメインを取得しましょう
4. firebase hostingを起動し、サイトを作成

さてここまで準備したら今回の本題に入ります。

## ①AWS Route53で発行しているカスタムドメインを利用する
### ゴール： AWS Route53で取得した`hogehoge.jp`をfirebase hostingに設定する
firebase hostingを有効化すると`web.app`、`firebaseapp.com`が末尾についているドメイン名がdefaultで割り当てられています。
今回はそれらに加えてRoute53で発行したカスタムドメイン`hogehoge.jp`を設定していきましょう。

#### 1. `カスタムドメインを追加`をクリック
<img width="700" src="https://i.gyazo.com/8da76e87fe97cc3335a204989fe5a0be.png">
#### 2. 使用するカスタムドメイン(今回は`hogehoge.jp`)を入力
<img width="700" src="https://i.gyazo.com/2d0fb2fa8337f3bfa6b44943425e3953.png">
すると下記の様な画面が表示されます。が、まだ先には進みません。`google-site-verification`から始まる値をRoute53に設定する事になるので、**とりあえずコピー**しましょう。画面を消さずにRoute53に移動しましょう。
<img width="700" src="https://i.gyazo.com/a62d1df067b28f783f54ca5993740378.png">
#### 3. AWS Route53へ移動
ここでRoute53のコンソールへ移動し、新しいレコードを作成します。
<img width="700" src="https://i.gyazo.com/360117b69e2ace75b2c6055613c88ba0.png">
#### 4. ルーティングポリシーを決める

今回はサンプルなのでシンプルルーティングにしましょう。
<img width="500" src="https://i.gyazo.com/a8e7893ffbee6fb681d48fa271256846.png">
#### 5. TXTレコードを作成

ここで先ほどfirebase hostingのコンソールで入手した`google-site-verification`から始まるルーティング先を指定。またレコードタイプも表示されていた通り、`TXT`レコードを選びましょう。
<img width="700" src="https://i.gyazo.com/25fc606dcc83dde018957e5c7c525059.png">
指定通り作成しているか確認し、`レコードを作成`をクリック
<img width="700" src="https://i.gyazo.com/16d7aab23d59cfce27803b19c160abd1.png">
#### 6. firebase hostingへ戻り、先に進む

そのままにしたfirebase hostingのコンソールで`所有権を証明`をクリック
<img width="500" src="https://i.gyazo.com/01c4dc03ad68aa98d7546030821ef36f.png">
すると今度はAレコードの追加を求められます。同じホスト名に対して二つの値が与えられます。仮に`195.195.1.195`と`195.195.2.195`としましょう。ここからまたRoute53の方に戻りましょう。
<img width="500" src="https://i.gyazo.com/84e9244afefe1a12ef42a8d1f10e24d0.png">
#### 7. Route53でAレコードを作成

先ほどと同じ手順でレコードの作成に進みます。しかし今回作成するのはAレコード。そして設定するのはfirebase hostingから与えられた2つの値両方です。
<img width="400" src="https://i.gyazo.com/79786d780fadba533a229d6b1108dd24.png">

#### 8.終了！
再度firebase hostingに戻り`終了`をクリックすれば無事終了！デフォルトのドメインの下にカスタムのドメインが追加されていると思います。
<img width="500" src="https://i.gyazo.com/1a102ec3a70a5583b99c421ccb0d2929.png">

ブラウザからカスタムドメインの`hogehoge.jp`にアクセスすれば、ホスティングしているサイトが閲覧出来ます。
## ②単一のfirebaseプロジェクトで複数のサイトを管理する
### ゴール：同一のfirebaseプロジェクトにて2つのサイト`hogehoge`と`fugafuga`をホスティングし、それぞれにデプロイする。

#### 1.サイトを追加する
firebase hostingのコンソールよりサイトを追加。
<img width="600" src="https://i.gyazo.com/d6cc960e6be3e5fbc7b662c216f3cc2a.png">
追加するサイト名を記入し、`サイトの追加`をポチり
<img width="600" src="https://i.gyazo.com/52d6d856f2c009009088aeb41e8c1511.png">
これで2つのサイト`hogehoge`と`fugafuga`をホスティングしました。
<img width="600" src="https://i.gyazo.com/e68a3adcc59ea069ab06788c7766d2d5.png">

#### 2.それぞれのサイトのコードを用意
`hogehoge`と`fugafuga`は違うサイトをデプロイする想定なので、それぞれのコードをディレクトリで分けて用意します。

```
demo-project
  ├── dir-hogehoge
  |       └── index.html
  ├── dir-fugafuga
  |       └── index.html
  ├── .firebaserc
  └── firebase.json
```
#### 3.target-nameを設定
下記コマンドでデプロイ先のサイトを切り分ける際に必要な任意のtarget-nameを設定します。

```
$ firebase target:apply hosting <target-name> <resource-name>
```
`target-name`は好きな名前を設定する事ができます。
`resource-name`はデプロイ先のプロジェクト名となります。
なので今回は下記の様にしてみましょう。

```
$ firebase target:apply hosting site-hogehoge hogehoge
$ firebase target:apply hosting site-fugafuga fugafuga
```

#### 4.firebase.jsonを設定
firebase.jsonにてどのデプロイ元のディレクトリとtarget-nameを紐付けます。

```:firebase.json
{
  "hosting": [
      {
        "public": "dir-hogehoge",  
        "target": "site-hogehoge",
        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      },
      {
        "public": "dir-fugafuga",  
        "target": "site-fugafuga",
        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      }
   ]
}
```
`public`がデプロイ元、`target`がデプロイ先となります。

#### 5. コードをデプロイ
デプロイは`firebase deploy --only hosting`で出来てしまいますが、今回の様に複数のサイトがある場合は全てデプロイされてしまいます。

特定のサイトだけデプロイしたい場合は、下記の様に`target-name`を指定する事で指定されたサイトだけデプロイする事が出来ます。

```
$ firebase deploy --only hosting:<YOUR-TARGET-NAME>
```
今回の場合、

```
$ firebase deploy --only hosting:site-hogehoge //hogehogeだけデプロイしたい場合
$ firebase deploy --only hosting:site-fugafuga //fugafugaだけデプロイしたい場合
```
終了！これで自由に複数のサイトを管理できる様になりました。

## ③複数のfirebaseプロジェクトに分けてデプロイする
### ゴール：環境別に切り替えて、デプロイする
仕事で検証環境、ステージング環境、本番環境など複数の環境を使用する際などに使います。

今回は`my-development-project`、`my-staging-project`、`my-production-project`の３つのfirebaseプロジェクトに切り分けてデプロイしていきます。
#### 1. .firebasercを設定
以下の様な構成で記述します。

```
{
  "projects": {
     <プロジェクトのエイリアス>: <firebaseプロジェクト名>
  },
  "targets":{
     <プロジェクト名>:{
       "hosting":{
          <ターゲット名>: [
            <デプロイ先のプロジェクト名>
          ],
          <次のターゲット名>: [
            <次のデプロイ先のプロジェクト名>
          ]
       }
    },
    <次のプロジェクト名>:{
      ...
    }
  }
}
```
今回の場合は下記の様になります。

```:.firebaserc
{
  "projects": {
    "default": "my-development-project",
    "development": "my-development-project",
    "staging": "my-staging-project",
    "production": "my-production-project"
  },
  "targets": {
    "my-development-project": {
      "hosting": {
        "site-hogehoge": [
          "hogehoge"
        ],
        "site-fugafuga": [
          "fugafuga"
        ]
      }
    },
    "my-staging-project": {
      "hosting": {
        "site-hogehoge":[
          "hogehoge"
        ],
        "site-fugafuga": [
          "fugafuga"
        ]
      }
    },
    "my-production-project":{
      "hosting":{
        "site-hogehoge": [
          "hogehoge"
        ],
        "site-fugafuga":[
          "fugafuga"
        ]
      }
    }
  }
}
```
さてこれで準備は整いました。
#### 2. プロジェクトを指定して、コードをデプロイ
下記コマンドでプロジェクトを切り替え、

```
$ firebase use <プロジェクトのエイリアス>
```
後は通常通り、デプロイするだけです。

```
$ firebase deploy --only hosting:<ターゲット名> 
```

`my-production-project`の`fugafuga`だけをデプロイしたければ、下記の様になります

```
$ firebase use production
$ firebase deploy --only hosting:site-fugafuga
```

以上で終了です。

## 最後に
普通であれば、一つ一つ切り分けて記事を挙げるべき所ですが、この三つを合わせて対応しないといけない状況で少々調査に時間がかかったのでまとめてみました。

またここまで設定しておくとこの後に続くCI/CDが設定しやすくなります。


## 参考
https://qiita.com/mag-chang/items/6706f27207f694049423
https://medium.com/@luazhizhan/how-to-deploy-multiple-sites-to-firebase-hosting-part-1-a56949876c64
https://blog.lacolaco.net/2020/08/firebase-hosting-production-staging-with-targets/
https://developers-jp.googleblog.com/2016/08/firebase-hosting.html