Google Domains と Firebase Hosting の連携方法（2020版）

## 概要

タイトルの通り、[Google Domains](https://domains.google.com/) と [Firebase Hosting](https://firebase.google.com/products/hosting) の連携方法ですが、すでにいろんな方が実践していてすごく参考になりました。

- [.appドメインはFirebase hostingとの相性が抜群 - @fromkk](https://qiita.com/fromkk/items/c2361747733125ca36d0)
- [Firebase Hosting + Google Domainsで独自ドメインを設定する方法](https://qrunch.net/@hiko1129/entries/ksTX3WWhEscXMlis?ref=qrunch)
- [Firebase Hostingに Google Domains でサブドメインを設定する](http://backham.me/blog/2018/05/01/firebase-hosting%E3%81%AB-google-domains-%E3%81%A7%E3%82%B5%E3%83%96%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B/)


## 問題

ただ問題が、`www`付きの登録が上手くいかなかったり、そもそも連携が上手くいかずずっと`設定が必要です`となって１日ぐらいたってもなかなか反映されなかったりと、よく分からない状況が起きました＾＾;

<img width="883" alt="スクリーンショット 2020-04-05 0.55.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/06033e5d-503b-1440-56b8-6d89863c1629.png">

　  
ちなみにFirebaseプロジェクトの名前は、取ったドメインに合わせています。

<img width="1060" alt="スクリーンショット 2020-04-05 17.09.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/77b06c69-991b-25ab-4161-bc82f01642dd.png">


　  
また、この状況に起きる前提として上記の参考記事を真似たものの反映されない問題に遭遇したため、見た目もそうですがちょっと古い参考記事になってると感じました。
そもそもGoogle DomainsもFirebaseも定期的にアップデートしているので、そうなってもおかしくないわけです。


## 目的

そんな今回は、この問題を解消する＆`2020版最新のGoogle Domains と Firebase Hosting の連携方法をまとめます。`


## 連携

まず先に、Firebase Hostingの対応を済ませておきましょう。

### Firebase Hosting

最初は次のような状態かと。
<img width="887" alt="スクリーンショット 2020-04-05 1.29.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/f450bf23-f8f3-f985-51d1-96b92adb238c.png">

`firebase use --add`、`firebase init`、`firebase deploy`を済ませると以下のようになります。
<img width="889" alt="スクリーンショット 2020-04-05 1.30.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/2182b48a-28b7-bd8a-f9e9-67dceece08fa.png">


Firebase Hostingの済ませ方は、[公式ドキュメント](https://firebase.google.com/docs/hosting)をなぞっていけばあらかた対応が完了します。


### Google Domains

次に、ドメイン周りの対応で上記の参考記事の通りにGoogle Domainsでドメインの購入を済ませちゃいましょう。
ちなみに今回は、`.app`ドメインを購入した内容となっております。

次にやることとして一度Firebaseコンソールに戻り、カスタムドメインの追加を対応していきます。
<img width="1060" alt="スクリーンショット 2020-04-05 17.09.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/1a10fe09-164d-ea13-3eaa-b89a16ff20d5.png">
<img width="1060" alt="スクリーンショット 2020-04-05 17.09.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/35034943-9555-c548-80ce-f88d12439ef8.png">

追加した際にできたIPアドレスをGoogle Domainsの管理画面に戻り、IPアドレスをAタイプで追加していきます。
<img width="1060" alt="スクリーンショット 2020-04-05 17.09.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/7a542974-0935-9c3d-6260-7ec8109c6212.png">
<img width="1060" alt="スクリーンショット 2020-04-05 17.10.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/5ba20b50-3fb2-40e6-ac1c-057aedc64ea3.png">

またFirebaseコンソールに戻り、カスタムドメインを追加のポップアップで次へをクリックすると登録が完了し、自動で`www`の追加をオススメされます。
そのまま追加をクリックして`www`対応を進めていきます。
<img width="1060" alt="スクリーンショット 2020-04-05 17.10.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/2fe14eeb-79cb-3b9e-b7d9-df6b31e6c644.png">
<img width="1060" alt="スクリーンショット 2020-04-05 17.10.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/7607eb6b-8cc4-e7ef-e32c-7a45b55b7709.png">

ここでできた値をまたGoogle Domainsの管理画面に移り、TXTタイプの対応を進めます。



## ポイント

ここからが最初のハマったときの対応＆上記の参考記事に無い対応情報になります。
普通に登録すると次のようにAタイプは先に反映待ち状態に上手く変わってくれるものの、`www`のTXTタイプの対応がまた反映してくれない状態になります。

<img width="1060" alt="スクリーンショット 2020-04-05 17.17.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/9bc1a264-6d29-a07b-4632-4f84e34ca3ad.png">

ポイントは、次のような設定でした。
名前とデータを次のように設定し、1,2時間ほど待っていると`接続されています`状態にようやく変わってくれました笑汗
<img width="1060" alt="スクリーンショット 2020-04-05 19.21.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/d8090f70-04ab-88b3-c1e5-2c6ff97b6234.png">
<img width="1060" alt="スクリーンショット 2020-04-05 19.21.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/11d89221-9779-74e7-64b4-aa565ddf6cf9.png">

参考にしたのは海外の[Hugo, Firebase Hosting and CircleCI](https://adambennett.dev/2019/04/hugo-firebase-hosting-and-circleci/)って記事になりますー！


## まとめ

これでようやく無料でSSL/HTTPS対応＆無料でWebの公開対応ができる環境が整いました！🙌

現在、`.app`のドメインは¥1,600(税別)という価格で消費税を含めると￥1,760というお手頃価格です！

<img width="1010" alt="スクリーンショット 2020-04-05 23.46.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/4e88d7ac-9c84-6386-46ff-da0227267d44.png">

個人開発でアプリを作ろうと思い、アプリ名とドメインが決まったので上記の対応を行いました。
これからGoogle Domains と Firebase Hosting を使って開発しようと考えている方に参考になればなと思います！