はじめに
釣潮スカウターをこの度、Flutterで書き換えてWeb版を作成しました。(これは別記事)
WEBアプリケーションに広告を入れようとしたのですが、スマホではないため、admobが使えません。そこで、adsenseで入れようと思いましたが、このwebアプリだけだと審査が通らなかったので、ホームページの傘下に入れてadsenseで広告を出せればと思ったのでサブドメイン化を検討しました。
Firebaseで新しいウェブアプリをホスティングし、サブドメイン(tide.take1bit.com)として追加したいと思いましたので、DNS周りの設定をしました。しかし、躓いた箇所があったので紹介します。
釣潮スカウターアプリの説明はこちらです。
webアプリケーションはHPからもいけますが、以下にになります。
環境情報
- レジストラ:お名前.com
- レンタルサーバー:ロリポップ
- ホスティングサービス:Firebase
DNSレコードの基礎知識
DNSレコードの種類と役割を以下に記載します。
Aレコード
- IPアドレスとドメインを紐付ける
- 例:take1bit.com → 157.7.107.114
- ウェブサイトにアクセスする際の基本的な経路を指定
CNAMEレコード
- あるドメインを別のドメインの別名として設定
- 例:tide.take1bit.com → tide-score.web.app
- FirebaseのホスティングURLとサブドメインを紐付け
MXレコード
- メールサーバーの指定
- 例:take1bit.com → mx01.lolipop.jp
- メールの送受信に必要
TXTレコード
- ドメインに関する追加情報を記録
- 例:SPFレコード(メール認証)、ドメイン所有権の確認
- “v=spf1 include:_spf.lolipop.jp ~all”
NSレコード
- ドメインのネームサーバーを指定
- DNSの問い合わせ先を示す
Firebaseでの初期設定
すでにfirebaseにはデプロイ環境があった状態から説明します。
tide-score.web.appとtide.take1bit.comを紐づけしたいので、カスタムドメインの追加をします。take1bit.comのtide.の部分がサブドメインの名称になります。
![](https://take1bit.com/wp-content/uploads/2024/12/image-25.png)
![](https://take1bit.com/wp-content/uploads/2024/12/image-25.png)
設定が必要ですと表示されるので、そこをクリックすると、クイックセットアップと詳細セットアップがあります。一般的にはクイックだけで良さそうですが、今回は色々て手こずり、両方を設定しました。(おかしな挙動をするかもしれませんが、現時点問題なく動作してます。)
![](https://take1bit.com/wp-content/uploads/2024/12/image-17.png)
![](https://take1bit.com/wp-content/uploads/2024/12/image-17.png)
レジストラ側の設定
接続できない原因
レジストラであるお名前.comでDNS設定をしますが、CNAMEやTXTなどを設定し、いくら待ってもネットワークエラーとなっていました。お名前.comのDNSを使用せず、ロリポップのDNSサーバーを使用していることが判明しました。
前回、レンタルサーバーの引っ越しの際にDNSの設定に苦労しました。その時は、HPが表示されたので問題ないと思っていましたが、実は意図した設定になっておらず、今回それが原因で躓くことになりました。
調べた情報は以下です。
digコマンドでドメイン周りを調べます。digはDomain Information Groperの略だそうです。
ちなみに、nslookup take1bit.comでも同じ情報を引き出せます。
dig take1bit.com ANY
結果は以下のようになり、 uns0*.lolipop.jpとなっており、DNSが指しているのはロリポップのDNSでした。表示するだけであれば問題なかったのですが、サブドメインはお名前.comのは以下で追加する必要があったので、これを修正する必要があります。
take1bit.com. 600 IN NS uns01.lolipop.jp.
take1bit.com. 600 IN NS uns02.lolipop.jp.
take1bit.com. 600 IN A 157.7.107.***
設定手順
ネームサーバーを変更します。
![](https://take1bit.com/wp-content/uploads/2024/12/image-18.png)
![](https://take1bit.com/wp-content/uploads/2024/12/image-18.png)
以下のようになっており、ロリポップのDNSを指してましたので変更します。
![](https://take1bit.com/wp-content/uploads/2024/12/image-19.png)
![](https://take1bit.com/wp-content/uploads/2024/12/image-19.png)
変更は簡単で、以下の「お名前.comのネームサーバーを使う」を選択し、確認ボタンを押すだけです。
![](https://take1bit.com/wp-content/uploads/2024/12/image-20-1024x597.png)
![](https://take1bit.com/wp-content/uploads/2024/12/image-20-1024x597.png)
DNSレコードを設定
![](https://take1bit.com/wp-content/uploads/2024/12/image-21.png)
![](https://take1bit.com/wp-content/uploads/2024/12/image-21.png)
![](https://take1bit.com/wp-content/uploads/2024/12/image-22.png)
![](https://take1bit.com/wp-content/uploads/2024/12/image-22.png)
先ほどのコマンド現在情報を調べ、DNSレコードに設定するのが確実です。
dig take1bit.com ANY
基本レコードを設定します。これはロリポップを参照するための設定です。
Aレコード: take1bit.com → [IPアドレス]
MXレコード: take1bit.com → mx01.lolipop.jp
TXTレコード: take1bit.com → "v=spf1 include:_spf.lolipop.jp ~all"
次にfirebase用レコードも設定します。
CNAMEレコード: tide.take1bit.com → tide-score.web.app
TXTレコード: [認証情報は非表示]
設定後の例を以下に記載しておきます。firebaseの詳細は不要だと思いますが、載せてます。
こんな感じになります。
![](https://take1bit.com/wp-content/uploads/2024/12/image-24.png)
![](https://take1bit.com/wp-content/uploads/2024/12/image-24.png)
確認
300秒に設定してるので、5分程度で一部反映されるはずです。そこから完全に伝搬するまでは1日、2日かかるそうですが、2,3時間で検索にひかかるようになりました。
Firebase側に戻り、設定されていないという文言が証明書を作成していますと変化します。これは自動でfirebase上でSSLの証明書を作成してくれます。SSL証明書がないとhttpでのアクセスとなり、通信内容が暗号化されない状態になるので注意が必要です。
まとめ
今回はDNSが良く割らない状態で進めていて、中途半端な状態になっていたので原因を見つけるまでに苦労しました。特に、DNSは最大24時間かかりますなどの設定変更してから効果確認まで長いので、とりあえずやってみるというより、現状調査をきっちりと行ってからやるべきだったと反省してます。