Firebase Hostingで独自ドメインを使う
create: 2018-10-12
Blog 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レコードが確認されると、接続したいホスト名とメインとサブ、2つのAレコード値が表示されます。

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

再びfireaseの設定を確認

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

証明書発行完了

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

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

お疲れ様でした!