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アクセスが可能です！
お疲れ様でした！
