anz blog

FirebaseHostingとお名前.comでドメイン設定

ざっくりまとめ。

  • Firebase Hosting でドメイン設定する
  • お名前.com で
    • サブドメインで

です。

環境

  • Firebase Hosting
  • お名前.com(ドメイン取得済み)

やりたいこと

Firebase Hosting で公開しているこのブログに

blog.anzfactory.xyz

というドメイン(サブドメイン)を設定したい。

anzfactory.xyz というドメインをとっておいて幾年か...ついに日の目を見ることに(笑)
アプリの bundleId とか package とかではつかってたのだけれどね

設定するぞ

はじめてやるのでちょこちょこ躓いた😭
Firebase ⇔ お名前.com で行ったり来たりします

Firebase

  • 管理画面の該当のプロジェクトにアクセスして、左のメニューから Hosting を開く
  • ドメイン接続 というリンクがあるので開く
  • で、ドメイン(orサブドメイン)入力して次へ
    • 今回僕の場合でいうと blog.anzfactory.xyz になる
  • TXTレコードの登録情報が出るのでその値をコピっておく

一旦 Firebase での作業はここまで

お名前.com

管理画面(Naviとかいうやつ)を開いて、DNS関連の設定を開く
とだけで済ませたいところだけど、いつも迷子になるのでスクショ付きで(笑)
(今後 UI が改修されたら変わるかもですが...ってか是非改修してほしい)

Navi にアクセス

なにはともあれまずは開く

上タブのドメイン設定を開く

ドメイン設定

最初 Navi にログインした時にすでにドメイン設定を開いている状態なのだけれど、
ログイン後に勝手に開かれるものと、自分でも1回クリックして開くもので表示内容が全然違うのでクリックしたといたほうがいい。
ログイン後のやつと自分でクリックするので微妙にurlのクエリが違うんだけど、見た目は同じメニューを開いている状態になっている。なんでこんな惑わせることしてるのか。
表示する内容の属性がぜんぜん違うのだからクエリで変えるのも微妙だし...💩

左側のメニューのネームサーバー設定セクションの中のDNS関連機能の設定を開く

DNS関連機能の設定

Firebase管理画面でコピったTXTレコードを設定していく

ドメイン一覧が表示されるので、対象のドメインをチェックして次へ
(僕の場合、anzfactory.xyz というものが表示される)

いくつかメニューが表示されるので「DNSレコード設定を利用する」を開くと、
レコードを登録する画面がでるので、ここで先にコピっておいた Firebase Hosting で指定されたTXTレコードを登録する。
(上側にツール/ブログ/サイトとかっていうタブメニューが出てるけど、これはお手軽に設定できるサービスがあるだけで Firebase はないので気にしなくていい)

TXTレコード登録

ポイントは、ホスト名にある入力欄には @ を入力すること。
最初ここに blog を入力してて検証が進められなかった😅
ここでやるのは、ドメインの所有確認なのであってサブドメインの話ではないということらしい
(まずはお前が本当にここのドメインを所有してるか確認してからだ。サブドメイン設定の話はそれからだ。みたいな状態)

入力したら「追加」をクリック!
で!下にある確認画面へ進むからちゃんと設定させる!!
追加クリックしただけで終わった気になったらダメゼッタイ(笑)

お名前.com側での作業はひとまずここまで

再び Firebase

さっきの状態のままだと、ドメイン接続のステップ2で「確認」をクリック
うまく設定されていると、ステップ3の方へすすめます。
何か間違ってると、ここの検証が通らず進めません。
お名前.comでTXTレコード追加してから、だいたい2〜3分ぐらい後にはもう大丈夫でした。

検証が通ると、ステップ3に進んで、いよいよサブドメイン設定の話へ。
Aレコード登録用の値が多分2つ表示されるので、
この値をTXTレコードを登録したのと同じ感じでお名前.comで登録していく。
ので、Firebase はここまででお役御免。

再びお名前.com

Firebase で表示されたAレコードを登録していきます。
流れはTXTレコードと同じなのでここまでこれたのならもう大丈夫。

  • type は A を選択
  • こんどはホスト名に指定したいサブドメインを入力(僕の場合は blog)
  • Value には Firebase で表示されてたアドレスを(2つ表示されてると思うのでちゃんと2つ追加ね)

追加クリックしただけで終わった気になったらダメゼッタイ(大事なことなので...ry


これで設定作業は終わりです。
あとは、時間がたてばちゃんとアクセス出来るようになるので寝て待つだけ😪

もろもろおわったらもともとの方(firebaseapp.comのやつ)にアクセスしたら設定したほうにリダイレクトとかしてくれるかな?とかおもったけど、そういうのはないみたい...かな?
canonical 指定したら別にいいっしょっていう気もするっちゃするけど

参考

さくらで取得したドメインから、特定のサブドメインをFirebase Hostingで表示する(ドメイン設定) - Qiita