WordPressを運用する主ドメインのサブ・ドメインでFirebase Hostingを運用する
なにやら難しそうなタイトルの記事ですが、賃貸の大家さんである筆者「テック大家さん」が所有物件のサイトを運用するうえで必要になったことを備忘録的にポストしてみます。
以前当ブログで、賃貸大家さんが自分の物件のサイトを立ち上げるいくつかの方法を記事にまとめました↓
https://tech-landlord.com/articles/need-to-know-how-launch-r...今回のお話は、一つのドメインで複数のサービスを使ったWebアプリを動かす方法に関してのトピックです。
このトピックは、いわゆるサーバー・インフラの設定に関する内容になるわけですが、筆者はここの専門家ではありません。あくまでソフトウェア開発のプロとして個人で探求し実践しているという立場です。そのつもりで以下の記事をお読み頂き、場合によってはご指摘、アドバイスなどいただけると幸いです。
メイン・ドメインは”レンタルサーバー”でWordPress
筆者テック大家さんの所有物件に「ハイドレンジア箱根」というものがあります。こちらは普通の賃貸よりもすこしコンセプトを明確にしたもので、そのために専用のサイトを立ち上げました。
コンセプトは「首都圏の自宅と箱根の2拠点生活者向けの賃貸」です。
このような大家さん意図した物件コンセプトは、単に賃貸情報の不動産サイトに乗せて募集をしたところでなかなか入居者が集まりません。物件専用のサイト立ち上げを行ったポイントはここにあります。
レンタルサーバーにWordPressというコンテンツマネジメントシステムを導入して、独自ドメインの設定を行ないま。例えば「箱根 2拠点」というキーワードでサイトが検索されることを想定し、コンテンツを充実させるわけです。
この対策により、物件のサイトがGoogleで割と上位にリストされるようになりました（記事投稿時点）。
WordPressがどのようなシステムなのか詳しく知りたい方は、以下の記事を合わせてお読みいただけるとありがたいです。
さて、ここで筆者が登録したドメイン（hydrangea-hakone.com)は、私にとってはメイン・ドメイン（主ドメイン）と呼ばれます。単にドメインとかドメイン名とか呼んだりします。
そして、そのドメインを使って、エックスサーバーというレンタルサーバー上でコンテンツを作成するので、エックスサーバーのDNSサーバーにドメイン登録しているのです。
DNSというのはDomain Name Systemの略で、サイトに〇〇.comのような名前を付けて管理するインターネット上の仕組みです。本来、インターネットはIPアドレスという数字を羅列したアドレスを使った通信を行う技術が背景にあります。しかし、数字の羅列では覚えにくいのでDNSのような「わかりやす名前」でコンテンツを特定する技術が登場しました。今では、なくてはならない当たり前に使われている技術です。
サブ・ドメインとは
一方、△△.〇〇.comのようなサイトのアドレスがあったときに、△△の部分は「サブ・ドメイン」と呼ばれます。DNSは階層構造になっており、〇〇.com（メイン・ドメイン）のオーナーが△△のサブ・ドメインを管理、運用する仕組みになっています。
筆者の場合、hydrangea-hakone.comというドメイン名を取得して所有しているので、△△.hydrangea-hakone.comの△△の部分は筆者が自由に追加して運用できる、というわけです。
そのような事情があるため、レンタルサーバーの「エックスサーバー」の管理画面では筆者が自由に△△の部分を設定して運用開始することができます。ただし、エックスサーバーのデフォルトの設定では、サブ・ドメインのコンテンツはメインのドメインと同じサーバー上で管理するのが前提になっています。
これはこれで大変便利な機能で、レンタルサーバーを契約しているユーザーとしては、ありがたい限りです。
ただ、レンタルサーバーは一つのサーバーを複数の契約者で共有している関係上色々と制約があります。この制約により使いたい機能や実行したいアプリが使えない場合もあるのです。
サブ・ドメインは”Firebase Hosting”で独自のWebアプリ
今回筆者は、メイン・ドメインのサイトに関する所有物件で使うWebアプリを開発しました。シェアリング・ヴィレッジという共有賃貸のシステムで、予約アプリが必要になったのです。
そこで、GoogleのFirebaseというPaaSサービスを使うことにしました。
特に使いたかったのは、Firebaseのツール群の中でも認証(Authentication)とデータベース（Firestore）の機能です。これらのサービスを利用して、React と呼ばれる有名なクライアント・サイドのフレームワークを使ってWebアプリの開発をすることにしたのです。
Firebaseを使うと、良くあるWebアプリの機能、たとえば、ユーザー登録してログインして、ユーザー固有のデータを保存・管理する、などが比較的短時間で作れます。
Reactフレームワークを使ったWebアプリは、SPA (Single Page Application)といってクライアントで動作するアプリのファイル群をWebサイトに置いておくだけで動作します。ですので、レンタルサーバーに配置することも可能です。
ただ、このアプリからFirebaseの認証やFirestoreを使おうとするとXSS対応（クロスサイトスクリプティング）など複雑になりそうなので、シンプルにFirebaseが提供するホスティング機能を利用したいと考えました。
（エックスサーバーの仕組みと、今回やりたいことの図）
DNS設定のポイントをおさえる
上の図１、図２において、左のドメイン名から伸びる矢印があります。これはDNSサーバーの設定によって指し示すWebサーバー（Webアプリ）を概念的に示しています。筆者のケースにおいて、メイン・ドメインはエックスサーバーのDNSサーバーの設定なので、この矢印の向きはエックスサーバーの設定画面で行うものになります。
ここからは、このエックスサーバーのDNS設定に関して見ていきます。
Firebaseのデフォルトのドメイン管理
と、その前にFirebaseのデフォルトのドメイン管理について説明しておきます。
Firebaseの場合、様々な開発者がFirebase上に「プロジェクト」をつくることから利用が始まります。
プロジェクトにはそれぞれIDがついていて、FirebaseにWebアプリをホストすると、デフォルトでサブ・ドメインが割り当てられます。
以下の図がその概念図です。プロジェクト名がProject Aだとすると、プロジェクトIDが project-a で、そのWebアプリは project-a.web.appとproject-a.firebaseapp.comのようなサブドメインがつく、というイメージです。
このドメインの管理は、Firebaseの（Googleの）DNSサーバーで設定されているという訳です。
そして、Firebaseのプラットフォームとしては、project のIDがついたドメインで要求されたら、それに該当するプロジェクトのファイルをクライアントへの応答に使うという動作になっていると推測されます。
一方、Firebase Hostingの機能としては、独自ドメインでFirebaseのアプリを運用する仕組みが提供されています。図2で示したように、筆者の所有のドメインで運用することが設定次第で可能になります。
やることは、比較的簡単で筆者所有のメイン・ドメインを管理しているDNSサーバー（この場合、エックスサーバーのDNSサーバー）にいくつかレコードを追加することです。
エックスサーバー上のDNS設定
DNS設定に詳しくない方のために、軽く設定の補足をします。DNS設定は「レコード」という単位で設定をしていきます。レコードはそれぞれにレコードのタイプがあり、レコードには、キーと値の組わせを保存していくイメージです。
例えば、有名なところでは「Aレコード」と呼ばれるタイプのレコードがあります。これは、とあるドメイン名をサーバーのIPアドレスと関連付けるものです。
上でいくつかの図の中に左のドメイン名から矢印を引いています。この矢印の設定をするのが実はAレコードです。「hydrange-hakone.comのAレコードにIPアドレスを設定する」と、この矢印の完成です。
ですが実はこれ、エックスサーバーで独自ドメイン登録際に勝手に設定されています。設定を見てみましょう。
エックスサーバー管理画面、DNSレコード設定で「DNSレコード一覧」を表示できます。ここを見ると（↓）hydrangea-hakone.comのAレコードにエックスサーバーのIPアドレスが設定されていることがわかります。
これによると、サブ・ドメインは「*」アスタリスクのように設定されており、メイン・ドメインと同じエックスサーバーのIPアドレスが設定されていました。
今回のケースでは、この設定画面で、サブ・ドメイン（sharing-village.hydrangea-hakone.com）のAレコードを追加して、Firebase（Google）のサーバーのIPアドレスを登録すれば良さそうです。
ただし、ここに一つ問題があります。
筆者のサブ・ドメインから来たリクエストが、筆者のFirebaseプロジェクトものであることをどのように判断するか？ということです。
上で説明したように、FirebaseのプラットフォームはプロジェクトID付きのデフォルト・ドメインから筆者のファイル群を見つけるでしょう。しかしながら、筆者のドメイン(hydragea-hakone.com)から来た場合はそれがわかりません。
そこで、もう一つDNSレコードの追加が必要とされています。
それが、TXTレコードです。Firebase Hostingの説明ページによると、「hosting-site=[site_id]」の形式の TXT レコードを追加してほしいとあります。
つまり、Firebaseのサーバーは筆者のサブ・ドメインでアクセスされてきた要求に対して、エックスサーバーのDNSサーバーのTXTレコードに書かれている hosting-site=[site_id]をみつけて、筆者のFirebaseプロジェクトを見つける、という仕様になっているようなのです。（site_idとあるのが上述のプロジェクトIDです）。
つまり、エックスサーバーのサブ・ドメインのレコードとして、以下のような設定が必要になります。
ちなみに、真ん中の_acme-challenge.というレコードはFirebaseが、SSLの証明書を発行するためのものです。Firebase Hostingの設定の流れの中で追加することが要求されます。sharing-village.hydrangea-hakone.comというサブ・ドメインが著者所有のものであることを証明するためのもののようです。
Firebase Hostingのカスタムドメイン設定の説明ページを参考までにリンクをしておきます↓
https://firebase.google.com/docs/hosting/custom-domain?hl=jaプロフィール
-
ソフトエンジニア兼不動産オーナー。
某超有名日本メーカーにおいてソフトウエア開発畑を30年近く勤務。
かつてはWindowsのアプリ開発や、組み込み機器のソフト開発を行う。プロジェクトマネジメント・オフショア開発・要件管理などの経験あり。現在は、個人開発で、JavaScript/TypeScript/React/Express、PHP/Laravel、Firebase、Google cloud、Arduino(C++)などでプログラミングを楽しむ。
サラリーマンの傍ら不動産経営を始め、現在、１棟モノの賃貸４物件を東京・神奈川に所有。夫婦でおよそ20年の賃貸経営の実績。
最近の物件では、入居者向けフリーWiFiなど、テック系の設備はDIYで自ら構築。
海外MBA取得。