Firebase Hostingに独自ドメインを設定する（お名前.comでDNSレコード追加する場合）

Firebase HostingでデプロイしたWEBページを、独自ドメイン（カスタムドメイン）で公開する方法について紹介します。

設定するには、独自ドメインを取得した会社の管理画面から、DNSレコードを2回編集する必要があります。

まずは独自ドメインの所有権をTXTレコードで確認し、次にAレコードでFirebaseのIPアドレスを指定する必要があります。

Firebase Hostingに独自ドメインを設定する

一つ前の記事で、Firebase Hostingを利用する手順について紹介をしました。

この時ホスティングされたWEBサイトは、Firebase側が発行するドメイン（サブドメイン付）のURLでの公開でしたね。

本記事ではFirebase HostingにデプロイしたWEBサイトを、独自ドメインで公開する方法を解説します。

取得ドメインはお名前.com管理

今回のドメインは「お名前.com」で取得した独自ドメインです。

今回は設定していく中でドメインのDNSレコードを追加するのですが、編集ページまでの進み方や追加方法はドメイン管理会社によって違います。

今回は「お名前.comのDNSレコード編集」が前提となりますのでご注意下さい。

既にWEBデータ公開している事

本記事では既に、Firebase Hosting上にWEBページがデプロイ（アップロード）されている事が前提です。

まだFirebase Hostingでデプロイした事が無い人は、以下の記事を参考にWEBページをアップしてからご覧ください。

カスタムドメインを追加

まずはFirebase Consoleを開き、自分の作ったプロジェクトをクリックします。

左の「構築メニュー」→「Hosting」と進めば、上記の様なダッシュボードが表示されます。

右上の「カスタムドメイン追加」ボタンをクリックしましょう。

ここにドメイン名「xxxxxx.com」を入力し、「次へ」を押します。

www付きでもドメイン登録はできます。

Google Domainsについて

まだドメインを取得していない場合、「Google Domains」のリンクからドメイン取得ができます。

Google Domainsも、お名前.comと似たようなドメイン管理サービスです。

所有権確認の必要が無い

FirebaseはGoogle傘下のサービスなので、Google Domainsと連携されています。

ですのでGoogle Domainsで取得した場合は、次に紹介する「所有権の認証」をする必要がありません。

今回は他社（お名前.com）で取得していますので、所有権の確認が必要になります。

TXTレコードの表示

DNSのTXTレコード情報が表示されています。

今回登録するドメインの所有者が、管理者本人かどうかを確認するためのレコードになります。

コピーボタンを押せば、レコードを記録できます。

このTXTレコードがドメインのDNS情報に書き込まれたら、あなたが「所有者」という事になりますね。

画面はこのまま別ウィンドウを開く

ではこのまま右下の「所有権を証明」のボタンは押さずに、ブラウザで別タブを開きます。

画面は閉じない様に気をつけましょう。

お名前.comDNSにTXTレコード追加

別ウィンドウから、お名前.comの管理画面へログインします。

以下の記事（ページ内リンク）に、お名前.comのDNSレコード編集ページへの進み方を紹介しています。

上記記事を元に、まずは該当ドメインのDNSレコード編集ページまで進んで下さいね。

TXTのレコード追加

まずは所有権確認のために「txtレコード」を追加しなければなりません。

DNSレコード編集の画面で、以下の様に情報を入れていきます。

今回はTXTレコード以外の情報を入れる必要はありません。

上記情報を入れて右端の「追加」ボタンを押すと、入力内容が追加の欄に移動します。

内容に間違いが無ければ、一番下にある「DNSレコード設定用ネームサーバー変更確認」にチェックマークをつけます。

「確認画面へ進む」ボタンを押し、次のページで内容を確認して「設定する」ボタンを押しましょう。

これでTXTレコードの追加が完了しましたので、正式に所有者として認められます。

FirebaseのIPアドレス情報を取得

ではお名前.comの管理画面のページタブはそのまま、Firebase Consoleのページタブの方に戻りましょう。

先程押さずにおいた、所有権確認パネル上の「所有権の証明」ボタンを押しましょう。

無事所有権の確認が取れたら、次の工程へ進むことができます。

IPアドレス情報

つぎにFirebaseのAレコード情報（IPアドレス）が表示されます。

この情報を、再度DNSレコードに追加する事になります。

横にコピーボタンがついていますが、お名前.comのIPアドレスは数値を4つのマスに個別に入れるタイプです。

ですのでコピーしてもペーストできませんので、目視で確認しながら入力する事になります。

お名前.comDNSにAレコード追加

ではお名前.comの管理画面側のタブに移動し、もう一度DNSレコード追加の画面まで進みます。

Aレコードの追加

次はDNSレコードにAレコードを追加します。

IPアドレスは4つのマスにそれぞれ手入力する必要があります。

上記情報を入れて右端の「追加」ボタンを押すと、先程と同じように入力内容が追加の欄に移動します。

一番下にある「DNSレコード設定用ネームサーバー変更確認」にチェックマークがついている事を確認します。

「確認画面へ進む」ボタンを押し、次のページで内容を確認して「設定する」ボタンを押しましょう。

これでAレコードの追加も完了しました。

反映されるまで待つ

DNS設定は反映までに最大24時間掛かりますので、しばらく待つ事になります。

お名前.com管理画面の操作は終了したので、Firebase Consoleの方に戻りましょう。

先程のIPアドレスが表示された画面の状態のままになっているはずです。

右下の「終了」ボタンを押すと、ダッシュボード画面に戻ります。

ステータス表示

上記の様に独自ドメインが追加されており、ステータス欄は「設定が必要です」になっていると思います。

これがじきに「反映中」となり、最後に「接続されています」に変わります。

そうなれば独自ドメインでデプロイしたWEBデータが表示されるようになります。

WEBページはFirebaseのドメインと同様に、https:通信（SSL）で表示されます。

テストで表示してみる

Console上はまだ「保留中」であっても、既に表示される場合があります。

試しにブラウザで独自ドメイン名のURLを入力して開いてみましょう。

今回ステータス上は反映前でしたが、既にFirebase HostingでデプロイしたWEBページが表示されていました。

www付も表示したい場合

「www.xxxxx.com」の様にwww付ドメインも追加したい場合があると思います。

その場合は、最初の登録時に「www.xxxxx.com」の表記でドメインを登録しましょう。

所有権確認（TXTレコード入力）は上記で解説した通りに進めます。

次のAレコードの情報表示の際は、「ホスト無しのIPアドレス」の段とは別に「www時のIPアドレス」も表示されます。

DNSレコード追加時も1段ずつ2行追加する事

お名前.comでDNSレコードを追加する際も、ホスト無しとwwwホストで、2行追加すれば設定されます。

人気記事

Firebase関連記事