【サブドメイン設定】Xserverで取得したドメインをFirebase Hostingで設定する方法

こんにちは、kazyです。

kazy
今回はFirebase Hostingでカスタムサブドメインを適用させる方法について紹介します。

それでは早速書いていきます。

Firebase Hostingとは

まず、触りだけですが、Firebase Hostingについて。

Firebase Hostingplat_web. Firebase Hosting は、ウェブアプリ、静的コンテンツと動的コンテンツ、マイクロサービス向けの高速で安全性の高いホスティングを提供します。

Firebase Hosting はデベロッパー向けの、本番環境レベルのウェブ コンテンツ ホスティングです。1 つのコマンドですばやくウェブアプリをデプロイすることができ、静的コンテンツと動的コンテンツの両方をグローバル CDN(コンテンツ配信ネットワーク)に配信できます。

https://firebase.google.com/docs/hosting/?hl=ja

Firebase HostingというGoogleのサービスを使えば、以前紹介したGithub pagesのように無料でサイトを公開することができます。

ざっくり言うとサーバを用意することなく、サイトをFirebaseにアップロードして公開できるということですね。

他にも、realtime databaseであったりcloud functionsといった便利なサービスもあります。いずれも容量には限りがありますが、無料で使うことができます。

Googleホントすごいですよね。

Xserverで取得したドメイン(サブドメイン)をFirebase Hostingで設定するには?

そして今回は、そんなFirebase Hostingを使ってサブドメインの設定をしたんですが、結構苦戦してしまいました。


ただググってもXserverを使った記事が1つもなかったので、ちょっと備忘録兼ねて残そうと思います。

結局、苦戦した原因は単純なことだったのですけどね。

始める前に前提だけ一言付け足します。

今回は、Firebaseの導入から書いていくと長くなってしまうので、以下を前提として書いていきます。

前提
・Firebase Hostingを使用してサイトをデプロイ済みであること
・独自ドメインを取得済みであること

では、早速。

Xserverのサーバーパネルで、取得した独自ドメインを登録する

さっそく購入した独自ドメインをXserverのサーバーパネルで登録していきます。

今回はX Domainを使用する前提で話していますので、お名前.comやムームードメインの方ではやり方が多少異なるかと思います。

Xserverのサーバーパネルにログインしてドメイン設定を開く

まずはサーバーパネルにログインして、右側にあるドメイン設定を開きます。

ドメイン設定追加タブを開いて取得した独自ドメインを追加する

続いて、ドメイン設定一覧の隣のタブにドメイン設定追加タブがあるので開きます。

そして、取得した独自ドメインを入力して確認画面へを押して、ドメイン設定追加を完了させます。

するとドメイン設定一覧に先ほど追加したドメインが追加されていると思いますので、次はサブドメインの設定を行います。

登録済みのドメインのサブドメイン設定を行う

次にサブドメインの設定を行います。

サーバーパネルのトップに戻って、サブドメイン設定の項目を開きます。

先ほど追加したドメインを選ぶ

先ほど追加したドメインが表示されているので、そのドメインの横の【選択】ボタンをクリックします。

僕の場合は、すでにサブドメインに2つ登録があるので2個となっていますが、新規でドメインを登録した方は0個になっているかと思います。

サブドメイン設定追加タブを開いてサブドメインを登録する

サブドメイン設定一覧タブが初期表示されるので、その隣のサブドメイン設定追加を開きます。

あとは使いたいサブドメインを入力して確認画面へ進み登録を完了させます。

これで一旦、Xserver側の設定は一旦置いておいて次にFirebase側の設定を行います。

Firebaseコンソールでカスタムサブドメイン設定をする

まずFirebaseのコンソール画面を表示します。

https://console.firebase.google.com/

作成済みのプロジェクトを選択しあとに下記のhostingを選択します。

すると下記のような画面になります。

そして右上にあるドメインを接続をクリックします。

補足
この上の画像では、すでにサブドメインの登録ができているので、カスタムが1つ追加されていますが、何もしていない場合は、ここはデフォルトの2つしか表示されていない状態になります。
また、カスタムドメインを適用した場合、正常であれば、画像のように「ステータスが接続されています」と表示されます。

kazy
ちなみにFirebaseでホスティングした時デフォルトのURLは
○○○○○○.firebaseapp.comとなりますが、
○○○○○○.web.appでもアクセスが可能です。

割り当てるサブドメインを入力する

ドメインを接続をクリックするとサブドメインの設定ダイアログが表示されます。

まずは、割り当てるサブドメインを入力します。

入力した時に○○を既存のウェブサイトにリダイレクトする」というチェックボックスが表示されますが、

これは、文字通り、指定したドメインを別ドメインにリダイレクトしたい場合に使います。

例えば、www.test.testtest.comをtest.testtest.comにリダレクトする場合などにも使えます。

今回は、省略しますので、チェックはしません。

ただチェックしても基本的にはやることは同じです。

ドメインの所有権の確認

次は、入力したドメインの所有権の確認をする為に、ダイアログに表示されたTXTレコードの値を、XserverのドメインパネルのDNSレコードに追加します。

値をコピーして、XserverのドメインパネルのDNSレコードの追加を行います。

XserverのドメインパネルでDNSレコードを追加する

サーバーパネルトップ画面から右上のドメインの欄にあるDNSレコード設定をクリックします。

次に該当のドメインにある「選択」ボタンをクリックします。

そして「DNSレコード追加」タブを選択してください。以下の入力画面になります。

ホスト名: サブドメインを指定

種別:TXTを選択

内容:Firebaseコンソール画面でコピーしたTXTレコードの値を貼り付ける

優先度:そのまま

これで確認画面へ進んで、追加します。

Firebaseコンソール Hostingのドメイン追加ダイアログから確認ボタンをクリック

ここまで行ったら、Firebaseコンソールに戻って、そのまま確認ボタンをクリックします。

もしかしたら少し反映に時間がかかるかもしれません。

ここで登録ができていないとFirebaseコンソールのドメイン追加ダイアログでエラーが表示されますので必ず設定が必要す。

ちなみに所有権の確認ができないとこのようなエラーが表示されます。

ドメインとIPの紐付けを行う

所有権の確認が終わると次にドメイン(サブドメイン)とFirebaseのIPとの紐付けを行います。

これが終われば、割り当てが完了となります。

画像のように設定用のIPが2つ表示されますので、2つともあとで貼り付けできるようにコピーしておきます。

Xserverのサーバーパネルのドメイン設定画面でDNSレコードを追加する

今度はFirebaseのダイアログで表示された通り、2つレコードを追加します。

どちらもレコードタイプはAレコードでドメインも値もダイアログの通り追加します。

既に登録しているドメインのDNSレコードがサブドメインのレコードとバッティングしてないか確認する

サブドメインを割り当てる場合
既にドメインでDNSレコードが登録されているので、サブドメインで今回追加したDNSレコードとバッティングしていないか確認が必要です。

例えば、*.ドメインなんとか.comがAレコードで登録されていると今回追加したレコードと干渉してしまうので、削除しておきましょう。

僕はこれで苦戦しましたorz

Firebaseコンソールに戻って確認する

ここまでの設定が完了すれば、あとは接続を待つのみです。

僕の個人的な感覚ですが、Firebaseのドメイン(サブドメイン)の割り当て自体にはそんなに時間はかからないかと思います。

かかるのはXserverのドメインの追加、サブドメインの追加な気がします。

なので、Firebaseから指定された2つのAレコードの追加をサーバーパネルで行って、5分ほど待っても接続ができないようであれば、DNSレコードの設定ができていない可能性が高いかと思います。

あくまでも個人的な意見なので、違うかもしれませんが参考程度に。

最後にサブドメインの割り当てが完了するとこのように「接続されています」と表示されます。

これでweb.app、firebaseapp.com、サブドメインの3つからアクセスすることが可能となりました。

どうでしたでしょうか。以外と簡単….というか、GUIで操作するだけなので楽ですね。

出来ない場合は、DNSレコードの設定に問題があると思うので、登録済みのレコードとバッティングしてないか確認してみましょう。

備忘録程度ですが、誰かの役に立てば嬉しく思います。

お読みいただきましてありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA