Xserverドメインで取ったドメインを、Netlifyで公開しているサイトにつなぐ手順をまとめた覚え書です。

サイトのデプロイ（公開）は終わっていて、○○.netlify.app というアドレスでは表示できている。ここから www.example.com のような自分のドメインで表示させたい、という場面を想定しています。

大まかなながれ

Netlifyに「このドメインを使います」と登録し、

Xserverドメインに「このドメインへのアクセスはNetlifyへ」という道案内を書きます。

あとは反映を待てば、HTTPS（鍵マーク）も自動で付きます。

始める前に知っておくこと

前提

  • Xserverドメインでドメインを取得済み
  • Netlifyにサイトをデプロイ済みで、○○.netlify.app のアドレスで表示できる
  • XserverアカウントとNetlifyに、それぞれログインできる

解説: 何をしているのか

ドメインは、インターネット上の住所の名前のようなものです。ただ、名前を持っているだけでは、その住所にどの建物（サーバー）があるのかは分かりません。

そこで使うのが DNS（ディーエヌエス） です。「example.com に来た人は、この場所へ案内してください」という道案内の表だと考えると分かりやすいです。この表の1行1行を「DNSレコード」と呼びます。

今回の作業は、次の2つです。

  • Netlify側：「example.com というドメインで来た人には、このサイトを見せます」と登録する
  • Xserverドメイン側：道案内の表に「example.com へ来た人はNetlifyへ」と書き込む

両方がそろって、初めて自分のドメインでサイトが表示されます。片方だけでは表示されません。

「www」あり・なしの両方を設定する

example.com（wwwなし）と www.example.com（wwwあり）は、DNSの上では別の住所として扱われます。どちらで入力されても表示されるように、この記事では両方を設定します。

Netlifyは、片方を「メイン」にして、もう片方からメインへ自動で転送してくれます。この記事では、wwwなし（example.com）をメインにして進めます。wwwありで来た人は、wwwなしへ自動で切り替わります。

なお、Netlifyの公式マニュアルでは、今回のようにXserverドメイン側でDNSを管理する場合、wwwありをメインにすることを勧めています。wwwなしは世界中にあるNetlifyの配信拠点を直接使えないためです。ただし、wwwなしをメインにしても、サイトは問題なく表示され、HTTPSも付きます。

設定の手順

① Netlifyのサイトのアドレスを控える

Netlifyにログインし、対象のサイトを開きます。サイトの概要画面に表示されている ○○.netlify.app のアドレスをメモしておきます。

何のため？　手順④で、Xserverドメインに「ここへ案内してください」と書き込む行き先になるからです。

② Netlifyにドメインを登録する

サイトの画面の左側にあるメニューから Domain management を開きます

Add a domain を選び、続けて Add a domain you already own（すでに持っているドメインを追加）を選びます

  1. 入力欄に example.com を入力し、画面の案内に沿って進めます

DNSをどこで管理するかを聞かれたら、Netlify DNSではなく、外部のDNS（External DNS）を使う方を選びます

登録が終わると、Production domains の一覧に example.com と www.example.com の2つが並びます。wwwなしを登録すると、wwwありもNetlifyが自動で追加し、wwwなしへ転送するように設定してくれます。最初に入力した方がメインになるので、wwwを付けずに入力するのがポイントです。

この時点では、ドメインの横に Pending DNS verification（DNSの確認待ち）と表示されます。まだXserverドメイン側の道案内を書いていないので、これで正常です。この表示を選ぶと、そのドメイン専用の設定内容も確認できます。

Pending DNS Verification をクリックすると 外部のDNS承認についての案内がでます。

ここで示される A レコードの数値を覚えておきます。

③ Xserverドメインのネームサーバーを確認する

「ネームサーバー」は、手順④で書く道案内の表を置いておく場所です。表を書き込むXserverドメインと、表を置く場所が一致している必要があります。

Xserverドメインのネームサーバーは、次の3つです。

  • ns1.xdomain.ne.jp
  • ns2.xdomain.ne.jp
  • ns3.xdomain.ne.jp

Xserverアカウントにログインし、ドメイン一覧から対象ドメインの行の右端にある クイックメニュー を開いて ネームサーバー設定 を選ぶと、今の設定を確認できます。上の3つ以外になっている場合は、Xserverドメインのネームサーバーを使う設定に変更し、確認画面へ進む → 設定を変更する の順に進めます。

何のため？　ネームサーバーが別の場所を指していると、Xserverドメインの画面で道案内を書いても、誰にも読まれません。取得した直後のドメインなら、たいていは最初から上の3つになっています。

④ XserverドメインにDNSレコードを2つ追加する

いよいよ道案内の表を書き込みます。

  1. Xserverアカウントのドメイン一覧で、対象ドメインの行の クイックメニュー から DNSレコード設定 を開きます
  2. ページ下の DNSレコード設定を追加する を選びます
  3. 下の表の1行目を入力し、確認画面へ進む で内容を確かめてから追加します
  1. 同じように2行目も追加します
ホスト名種別内容意味
（空欄）A75.2.60.5wwwなしで来た人をNetlifyへ
wwwCNAME○○.netlify.appwwwありで来た人をNetlifyへ

TTLと優先度は、最初から入っている値のままで大丈夫です。○○.netlify.app の部分には、手順①で控えたアドレスを入れます。

AレコードとCNAMEレコードの違い

  • Aレコード：行き先を「数字の住所（IPアドレス）」で指定します。75.2.60.5 はNetlifyが用意している受付の住所です
  • CNAMEレコード：行き先を「別の名前」で指定します。「www.example.com は ○○.netlify.app と同じところです」という書き方です

wwwなしのドメインには、決まりの上でCNAMEが使えません。そのため、wwwなしはAレコード、wwwありはCNAMEと、書き方を分けています。

先に入っているレコードとぶつけない

DNSレコード設定の一覧に、すでに次のような行がある場合は注意が必要です。

  • ホスト名が空欄（wwwなし）の Aレコード が、75.2.60.5 以外にもある
  • ホスト名が www の Aレコード がある
  • AAAAレコード（IPv6用の住所）がある

こうした行が残っていると、道案内が2つに分かれてしまい、表示されなかったり、HTTPSの鍵マークが付かなかったりします。Netlifyの受付はIPv6に対応していないため、AAAAレコードは削除するよう案内されています。種別がNSのレコードは、手順③のネームサーバーの情報なので、そのまま残します。

注意: Xserver レンタルサーバー か Xserver ドメインか

Xserverのレンタルサーバーを利用していなければ読み飛ばしてください。

Xserverのレンタルサーバーを利用していると、ドメイン取得時にネームサーバーがレンタルサーバー側になっている場合があります。その場合は

  1. レンタルサーバー側のDNSレコードを設定する。
  2. DNSサーバーを Xserver ドメイン側に設定する。

Xserverのサービスを利用している場合に限りますが、Xserverはレンタルーバーもドメインサービスも両方提供しているので、勘違いしやすい。

Xserver ドメイン側の設定をいくらおこなっても、そもそもXserver ドメイン側のDNSサーバーに接続が向けられていなければ、認証できません。つまずくポイントかもしれません。

⑤ 反映されるまで待つ

DNSの変更は、すぐには世界中に行き渡りません。Xserverドメインでは24時間程度、Netlifyでも「まる1日かかることがある」と案内されています。

何のため？　道案内の表は、世界中のあちこちで一時的に写しが保存されています。古い写しが新しいものに入れ替わるまで、時間がかかるのです。設定直後に表示されなくても、慌てて設定を変えないことが大切です。

認証が完了すると｢Pending DNS Verification｣が消えて、追加したドメインでウェブサイトにアクセスできるようになります。

⑥ 表示とHTTPSを確認する

しばらくしたら、ブラウザで https://www.example.com と https://example.com を開いてみます。どちらもサイトが表示され、wwwありで開いたときはwwwなしへ自動で切り替われば成功です。

NetlifyのDomain managementを開き、HTTPS の欄も確認します。Netlifyは、DNSの設定が確認できると、Let's Encrypt（レッツエンクリプト） という無料の証明書を自動で取得し、更新も自動で続けてくれます。

何のため？　HTTPSは、サイトとの通信を暗号化するしくみです。これがないと、ブラウザのアドレス欄に「保護されていない通信」と表示され、見た人を不安にさせてしまいます。

うまくいかないときの直し方

1日たっても「Pending DNS verification」のまま

次の順に確認します。

  • 入力の打ち間違い：75.2.60.5 の数字や、○○.netlify.app の綴りが合っているか
  • ホスト名：wwwなしの行は空欄、wwwありの行は www になっているか
  • ネームサーバー：手順③の3つになっているか

DNSの反映状況は、dnschecker.org のようなサイトで、ドメインを入れて調べられます。種別をAにして 75.2.60.5、CNAMEにして ○○.netlify.app が返ってくれば、道案内は正しく届いています。

サイトは表示されるのに、HTTPSにならない

証明書の取得に失敗しても、Netlifyは最初の24時間は10分ごと、その後2日間は1時間ごとに自動で再挑戦します。まずは少し待ってみます。

それでも鍵マークが付かないときは、手順④の「先に入っているレコードとぶつけない」を見直します。特に、AAAAレコードが残っている、wwwなしのAレコードが2つ以上ある、の2つがよくある原因です。

まとめ

  • Netlifyに example.com を登録する（wwwなしをメインに）
  • Xserverドメインに、wwwなしのAレコード（75.2.60.5）と、wwwありのCNAMEレコード（○○.netlify.app）を追加する
  • ぶつかる古いレコードを消して、1日ほど待つ
  • 表示とHTTPSを確認する

YMWorksでは、ホームページの制作から、ドメインやサーバーの設定、公開後の運用までお手伝いしています。設定に不安がある場合はご相談ください。