はじめに

Firebase Hostingいいですよね。

今回は、FirebaseHostingは通常
[project_id].firebaseapp.com という形のドメインにてホストされるのですが、
今回は顧客に提供する環境をFirebaseHostingでホストするため、
既に取得済みのAWS Route53で管理しているドメインのサブドメインを
FirebaseHostingに割り当てることにしました。

Firebase側の設定

最初にFirebase側の設定を行います。

• 前提
  • Firebaseにてプロジェクトが作成済みであること
  • FirebaseHostingに何らかの静的ファイルがDeploy済みであること

まずはFirebaseのコンソールへアクセスし、Hostingのダッシュボードを開きます。

ダッシュボード内の ドメイン 部分に ドメインを接続 というボタンがあるのでクリックします。

すると、 ドメインを接続 というウィンドウが表示されますので、今回割り当てる予定のドメインまたはサブドメインを入力します。

そのまま 次へ を押すと、 所有権の確認 のステップに進みます。

そこに表示されている google-site-verification= からなる 文字列をコピーします。

またあとで使うので画面はそのままにし、以下手順へ進みます。

AWS側の設定

次にAWS側の設定に移ります。

AWSのRoute53へアクセスし、該当のドメインの設定を開きます。

設定画面内の Create Record Set' をクリックすると、画面右側にCreate Record Set` の入力画面が出てきます。

そこで、以下のように設定を入力します。

• Name
  • 空
• Type
  • TXT - TEXT
• TTL
  • ひとまずデフォルト値
• Value
  • 先程コピーした google-site-verification= からなる 文字列をダブルクォート括りで入力

上記の入力が完了したら、 Create をクリックします。

すると、DNSのTXTレコードが追加されます。

またあとで使うので画面はそのままにし、以下手順へ進みます。

再びFirebaseへ戻る

先程の 所有権の確認 画面が開いているかと思いますので、
確認 ボタンをクリックします。

問題なければ、Aレコードの設定 が表示されるかと思います。
IPアドレスが表示されているかと思いますので、
画面をそのままにし次の手順へ進みます。

所有権の確認 でエラーになる場合は、TXTレコードの設定反映に時間が掛かっている可能性があるので、
少し待ってからもう一度試してみて下さい。

またAWSへ戻る

再度AWS Route53の画面に戻り、もう一度 Create Record Set をクリックします。

次は以下の通りに入力して下さい。

• Name
  • 今回割り当てるサブドメイン
• Type
  • A - IPv4 address
• TTL
  • ひとまずデフォルト値
• Value
  • Firebaseで表示されたIPアドレスを改行区切りで入力

これが入力できたら Create ボタンを押します。

作業完了

ここまでの作業でAWS Route53とFirebase Hostingのドメイン割り当てが完了です。

割り当てたドメインにアクセスすると、FirebaseHostingでホストしているファイルにアクセスできると思います。

なお、最初はHTTPSでの接続でエラーが出るかと思いますが、
私の環境では1時間程度で反映されて問題なくアクセスできるようになりました。

参考

公式リファレンス