🕌

Netlifyに自前のサブドメインを設定する

2024/04/30に公開

お名前.comで取得し、Xサーバーでブログを運用している自前ドメインのサブドメインを利用して、NetlifyにNext.jsアプリをデプロイしてみました。この記事は、お名前.com、Xサーバー、Netlifyでのサブドメインの設定方法を紹介します。

前提

今回は以下のような状況から、Netlifyに自前のサブドメインを設定してみました。

  • お名前.comで自前ドメインを取得済み(以下、"example.com")
  • ネームサーバとしてXサーバーを利用している
  • すでにNetlifyにアプリをデプロイ済みで、"xxxxx.netlify.app"のようなNetlifyのサブドメインでアプリにアクセスできる
  • "subdomain.example.com" というサブドメインで、Netlifyにアプリをデプロイしたい

現状、お名前.comで取得した自前ドメインを利用して、Xサーバーでブログを運用しています。今回、新たにNetlifyにデプロイするアプリは、ブログのテーマに関連したものなので、そのブログのサブドメインを利用したい、という状況です。

Xサーバーでブログを運営するため、取得した"example.com"のネームサーバーを、ドメインを取得したお名前.comではなく、Xサーバーのネームサーバーに変更しています。

以下、手順を説明していきます。

1. ネームサーバーの確認

まず、自前ドメインのネームサーバーを確認します。ドメインを取得した事業者とレンタルサーバーの事業社が同じ場合は問題ありませんが、今回のように、ドメインを取得したのはお名前.com、レンタルサーバーはXサーバーを利用しているような状況だと、ネームサーバーとしてどちらを利用しているのかを事前に確認する必要があります。

お名前.comでは、ログイン後、ドメイン → 利用ドメイン一覧で表示されるドメインのうち、サブドメインを利用したいドメイン名をクリックすると「ドメイン詳細」が表示されます。

ドメイン詳細のうち、ネームサーバー情報を確認します。

お名前.comのネームサーバー情報
お名前.comのネームサーバー情報

今回の場合は、前提のところで記載したとおり、Xサーバーのネームサーバを利用していることがわかります。

もし、自前ドメインのネームサーバーがお名前.comのものになっていたら、次の2.の作業をお名前.comで実施することになります。

2. XサーバーでCNAMEを設定

自前ドメイン "example.com" のネームサーバーはXサーバーであることがわかったので、次はXサーバーにログインして、DNSの設定をしていきます。

Xサーバーにログイン後、サーバー管理 → ドメインDNSレコード設定 → DNSレコード追加を選び、以下のように設定します。

XサーバーでのCNAMEの設定画面
XサーバーでのCNAMEの設定画面

ホスト名にはサブドメイン部分の"subdomain"を、種別は"CNAME"を、内容はNetlifyにデプロイしたアプリのNetlifyでのドメイン名("xxxxx.netlify.app"など)を設定します。TTLや優先度はそのままで構いません。

設定したあとは、「DNSレコード一覧」で、先ほど追加したCNAMEのレコードが表示されるか、内容に間違いがないかを確認します。

設定が反映されるまで少し時間がかかる場合があります。今回は、すぐに反映されました。なかなか反映されない場合は、PCのDNSキャッシュなどが影響しているかもしれません。DNSキャッシュの削除など試してみて下さい。

3. Netlifyでdomain aliasを設定

最後に、Netlifyで domain alias を設定します。

Netlifyにログイン後、Sitesからサブドメインを設定したいサイト(アプリ)を選びます。サイトの設定画面になったら、メニューからDomain managementを選びます。Production domainのAdd domain aliasを押し、以下のようにサブドメイン"subdomain.example.com"を設定します。

Netlifyのdomain aliasの設定画面
Netlifyのdomain aliasの設定画面

これで、Netlifyにデプロイしたアプリを、自前ドメインのサブドメインでアクセスできるようになります。もちろん、今回設定したサブドメイン以外の"example.com"へのアクセスは、これまでどおりとなります。

【まとめ】自前ドメインのネームサーバーにCNAMEを設定する

  • 自前ドメイン(example.com)のネームサーバーに、Netlifyにデプロイした時のサブドメイン(netlifyのサブドメイン → xxxxx.netlify.app みたいなやつ)をCNAMEとして設定する
  • Netlifyの Domain alias として自前ドメインのサブドメイン(subdomain.example.com)を設定する

参考

以下の記事を参考にさせていただきました。

https://qiita.com/jonakp/items/3b85841e914faf2e52d7

https://blog.kimizuka.org/entry/2022/07/23/000000

Discussion