Firebase Hostingで独自ドメインを使う

firebase hostingで独自ドメインを使うお話。
お名前.comでドメインを取得しているので、firebase hostingと接続する手順を紹介します。
※ 記事中のプロジェクト名、サブドメイン、TXTレコード値、IPアドレスなどは書き換えてあります。

デプロイからドメイン設定の流れ

• firebaseの設定
• firebase-toolsのインストール
• firebaseへデプロイ
• ドメインを接続する
  • TXTレコード設定
  • Aレコード設定

TXTレコードやAレコードが反映されるまで時間はかかりますが、ハマるような難しい手順はありませんでした。

firebaseの設定

まずはfirebase consoleにログインします。
左側のメニューからHostingを選択してください。

firebase-toolsのインストール

ローカルテストやデプロイを支援するCLIをインストールします。

# firebase-toolsのインストール  
npm install -g firebase-tools  

# firebaseにログイン  
firebase login  
# firebaseプロジェクトを初期化  
firebase init  
# publicディレクトリをデプロイ  
firebase deploy  

firebaseへデプロイ

初めてなら「使ってみる」から、手順通りにデプロイまで進めていけば良いです。
デプロイ済みなら「プロジェクトの確認」まで進んでください

プロジェクトの確認

今回はexsampleという名前で作成し、exsample.firebaseapp.comというサブドメインが割り当てられました。
これに「test.bitto.jp」というサブドメインを割り当てたいと思います。
※「example」を間違って「exsample」にしているのは内緒

ドメインを接続する

「ドメインを接続」から設定を進めます。

ドメインを入力

使用するドメインを入力します。

TXTレコードの設定

TXTレコードを設定するためのトークンが表示されます。
DNS管理から、TXTレコードを追加します。
インターネットに反映されるまでしばらく待ちましょう。

nslookupコマンドでTXTレコードを確認できます。

nslookup -q=txt bitto.jp  

で、テキストレコードが返ってくればOKなんですが、firebaseが認識してくれるまではもうちょっと時間がかかりました。
そのうち反映されるので、もう少し待ちます。

Aレコードの確認

TXTレコードが確認されると、接続したいホスト名とメインとサブ、２つのAレコード値が表示されます。

この２つのAレコードをDNS設定に追加します。
インターネットに反映されるまでしばらく待ちましょう。

再びfireaseの設定を確認

Aレコードが反映されると、firebaseのステータスが「保留中」になります。
この状態になるとLet's Encryptで証明書を発行してくれています。

証明書発行完了

ステータスが「接続されています」に変わります。

この作業が終わると、独自ドメインで表示されるようになります。
しかも証明書も有効なのでhttpsアクセスが可能です！

お疲れ様でした！