HUGO + Firebaseにカスタムドメインを設定する
概要
Firebase Hostingにカスタムドメインを設定します。
カスタムドメインで運用するためには大雑把に以下のことが必要です。
- 独自のドメインを取得
- ドメインを運用するためのDNSを構築
- DNSにWebサイトのレコードを登録
このブログはお名前.comでドメインを取得し、GCPのCloud DNSでドメインを運用しているので、Cloud DNSを使った方法で構築していきます。
環境
- Macbook Pro 13inch, 2016
- macOS Catalina version 10.15.6
ブラウザだけで大丈夫です。
ドメイン名の検討
まずドメイン名を考えます。
ここで悩み始めるとすごく時間がかかります。
いいものが思いついたら、あとで変えてしまえばいいです。
僕はこの結論に到るまでにすごく時間を掛けてしまいました。
名前はそこそこにして、次に進みましょう。
ドメインの取得
ドメイン登録サービスで検討したドメインを取得します。
使用する予定のクラウドサービスでドメインの取得が可能なら、同じところで取得した方が手間も少なくて楽です。
Google Domainsでは.devドメインが取得できます。
僕の場合は先にドメイン名を持っていたので別々になっています。
いい名前が思いついたら、Google Domainsで.devを取得して切り替えるかもしれません。
人気のトップレベルドメイン（.com, .netなど）では、分かりやすい名前や短い名前はすでに別の誰かや事業者が取得している可能性が高いです。
基本的に早い者勝ちで、5文字以下は大体取得されています。
取られてしまっている場合は別のトップレベルドメイン（.tokyoなど）に変更してみたり、ドメイン名の再検討をしましょう。
また、取得可能でも分かりやすい名前や短い名前は、プレミア価格がついて高額になっていたりするのでご注意ください。
一回こっきりの出費であればいいかもしれませんが、毎年更新するので維持費用も馬鹿になりません。
GCPの登録
Googleのアカウントとクレジットカード1があればGCPを利用できます。
請求を分けたい、普段使いのメールとは別にしたい、などあれば、新規にGoogleアカウントを取得してください。
僕は使い分けるのが面倒なので一緒くたにしています。
DNSの用途だけでアクセスも少ないなら、大した金額にはなりません。
おそらく100円もしないと思います。
無料トライアル期間が90日間あり、その間は$300分のクレジットがつきます。
別のサービスを使い倒すようなことがなければ、3ヶ月は無料で使用できますね。
まず、Google Colud Platformにアクセスします。
「無料で開始」をクリックし、Googleアカウントでログインします。
無料トライアルの申込ウィザードが表示されますので、利用規約に同意し続行します。
アカウントの種類を「個人」にし、支払い方法を入力して、無料トライアルを開始します。
「ようこそ」が表示されます。
「OK」を押して、GCPの利用を開始します。
プロジェクトの作成
各サービスを使用するためにベースになるプロジェクトを作成します。
デフォルトで「My First Project 2」というプロジェクトが作成されているので、これを利用します。
DNSの構築
ナビゲーションメニューを移動し、ネットワーク サービスのCloud DNSを選択します。
ゾーンの作成で新しいDNSゾーンを作成します。
取得したドメインの情報を登録し、作成します。
- ゾーンタイプを「公開」
- DNS名に取得したドメイン名を設定
- あとは任意
DNSゾーンが作成され、SOAレコードとNSレコード 3が登録されます。
ネームサーバの登録
ドメイン登録サービスでNSレコードに登録されたネームサーバ 3を設定します。
下記はお名前.comのキャプチャです。
ネームサーバの反映には少し時間が掛かります。
時間を置いてから、ネームサーバの情報が反映されているか確認しましょう。
僕の場合は5分くらいでした。
反映されていれば完了です。
以下はdigコマンドでNSレコードを問い合わせた結果です。
AnswerセクションでCloud DNSのNSレコードが返ってきたことが分かります。
$ dig ns nkmlab.com
; <<>> DiG 9.10.6 <<>> ns nkmlab.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 54493
;; flags: qr rd ra; QUERY: 1, ANSWER: 4, AUTHORITY: 0, ADDITIONAL: 9
;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;nkmlab.com. IN NS
;; ANSWER SECTION:
nkmlab.com. 21600 IN NS ns-cloud-e4.googledomains.com.
nkmlab.com. 21600 IN NS ns-cloud-e1.googledomains.com.
nkmlab.com. 21600 IN NS ns-cloud-e2.googledomains.com.
nkmlab.com. 21600 IN NS ns-cloud-e3.googledomains.com.
;; ADDITIONAL SECTION:
ns-cloud-e2.googledomains.com. 239993 IN A 216.239.34.110
ns-cloud-e2.googledomains.com. 289766 IN AAAA 2001:4860:4802:34::6e
ns-cloud-e3.googledomains.com. 109805 IN A 216.239.36.110
ns-cloud-e3.googledomains.com. 290038 IN AAAA 2001:4860:4802:36::6e
ns-cloud-e4.googledomains.com. 168211 IN A 216.239.38.110
ns-cloud-e4.googledomains.com. 290362 IN AAAA 2001:4860:4802:38::6e
ns-cloud-e1.googledomains.com. 132457 IN A 216.239.32.110
ns-cloud-e1.googledomains.com. 290198 IN AAAA 2001:4860:4802:32::6e
;; Query time: 49 msec
;; SERVER: 2400:4050:8283:3b00:225:36ff:fe14:c2c3#53(2400:4050:8283:3b00:225:36ff:fe14:c2c3)
;; WHEN: Mon Sep 21 14:42:25 JST 2020
;; MSG SIZE rcvd: 333
Firebase Hostingにカスタムドメインを追加
Firebaseコンソールに接続して、Hostingサービスに移動します。
ダッシュボード上にドメイン情報が表示されています。
下記ではすでに追加が完了していますが、初期値だとデフォルトのドメインだけが表示されています。
以下の手順でルートドメイン（nkmlab.com）でアクセスできるように設定していきます。
「カスタム ドメインを追加」で新しくドメインを追加します。
ドメイン名を入力して「次へ」を押します。
ドメインの存在チェックが行われ、TXTレコードの情報が表示されます。
TXTレコードをコピーし、Cloud DNSにレコードを登録します。
「レコードセットを追加」を押し、TXTレコードを入力してください。
保存するとTXTレコードがDNSに反映されます。
以下のdigコマンドで結果を確認できます。
$ dig txt nkmlab.com
; <<>> DiG 9.10.6 <<>> txt nkmlab.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 13601
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1
;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;nkmlab.com. IN TXT
;; ANSWER SECTION:
nkmlab.com. 300 IN TXT "<設定したTXTレコード>"
;; Query time: 59 msec
;; SERVER: 2400:4050:8283:3b00:225:36ff:fe14:c2c3#53(2400:4050:8283:3b00:225:36ff:fe14:c2c3)
;; WHEN: Mon Sep 21 17:54:25 JST 2020
;; MSG SIZE rcvd: 120
Firebaseに戻り、「所有権の証明」を実行します。
TXTレコードの反映には少し時間が掛かるので、エラーになるようであれば時間を置いてください。
所有権の証明が完了すると、Webサイトで使用しているAレコードが表示されます。
セットアップモードを「クイックセットアップ」にして、Aレコードをメモ帳にコピーして終了します。
ダッシュボードに戻ってくると、ステータスが「設定が必要です」という状態で、追加したドメインが登録されています。
ステータスはDNSの登録状況をみて自動で更新されます。
Cloud DNSに移動して、先ほどメモったAレコードを登録します。
TXTレコードと同様にレコードセットを追加すれば良いです。
これも反映まで少し時間が掛かります。
以下のdigコマンドで結果を確認できます。
$ dig a nkmlab.com
; <<>> DiG 9.10.6 <<>> a nkmlab.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 53319
;; flags: qr rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 1
;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;nkmlab.com. IN A
;; ANSWER SECTION:
nkmlab.com. 300 IN A <設定したAレコード1>
nkmlab.com. 300 IN A <設定したAレコード2>
;; Query time: 53 msec
;; SERVER: 2400:4050:8283:3b00:225:36ff:fe14:c2c3#53(2400:4050:8283:3b00:225:36ff:fe14:c2c3)
;; WHEN: Mon Sep 21 17:53:00 JST 2020
;; MSG SIZE rcvd: 71
Firebaseのダッシュボードに戻ってくると、ステータスが「保留中」に変わっています。
内部的にSSL証明書が発行され、Webサイトへの適用が行われています。
これは結構時間が掛かるのでのんびり待ってください。
僕の場合は1時間〜2時間くらいでした。
こちらが完了すると、ステータスが「接続済み」に変わり、カスタムドメインでアクセスできるようになります。
まとめ
Firebase Hostingにカスタムドメインを設定しました。
ドメインを取得し、DNSを構築して、Firebaseと連携させれば実現できます。
ドメインの取得元やDNSはどこでもいいです。
値段や好みで選びましょう。
AWSのRoute53といった他のサービスだろうとやることは変わりません。
それぞれの設定方法で方言があるくらいです。
Cloud DNSを使用した理由はGoogleでサービスを纏めたかったということと、GCPを使ってみたかったというだけです。
大層な理由はありません。
自前でLinuxなどのサーバOS上にBINDを構築する場合は、それ以前の作業も山ほどあるので、もう少ししんどいです。
以上です。