Netlifyでホスティングしているサイトに独自ドメインを設定する

当ブログも独自ドメインを設定しましたー。
設定方法をメモしておきます。

※2020/4/11
Googleドメインのパターンも追記しました。

前提 #

  • すでにドメインを取得済み(今回はお名前.com or Google Domains)
  • Netlifyでホスティング

設定 #

Netlify側 #

1.Overview画面でDomain Settingsを選択

2.Domain Management → Domains → Custom Domains へ

3.Add domain aliasを選択して、取得したドメインを設定

すると、ドメイン一覧で設定したドメインが灰色で表示されます。
(サブドメイン無しのドメインを指定した場合は、サブドメインにwwwが指定されたドメインも自動的に追加されるそうです。)
一緒に表示されているCheck DNS Configrationを選択すると、DNSレコードの設定の仕方が確認できます。

changeofpace.site ALIAS changeofpace.netlify.com.

changeofpace.site A 104.198.14.52

上記二つの設定方法があるので、このどちらかを設定すればOKです。
あとでDNS設定をする際に使用します。

※2020/4/11追記
2020/4/14より、Netlifyドメインが〇〇.netlify.comから〇〇.netlify.appに移行されます。そのため、これ以降の場合は確認できる情報も.appの方になっているかと思いますので、適宜置き換えてください。
.comの方にアクセスした場合でも、.appの方にリダイレクトするようなので使えなくなるというわけではないようです)

また、サブドメインに関しても同様に確認可能です。
こちらも後で一緒に設定します。

www CNAME changeofpace.netlify.com.

DNS側 #

お名前.comの場合 #

1.ログインして、トップ画面からDNSタブへ

2.ドメインのDNS関連機能設定を選択して次へ

3.ドメイン一覧から、設定するドメインを選択して次へ
お名前.comでのドメイン一覧

4.DNSレコード設定を利用するの設定するを選択
お名前.comのドメイン設定画面

DNSレコードを設定できる画面になります。
ここで先ほどNetlify側で確認したレコードを追加していきます。

自分の場合、AレコードとCNAMEレコードを追加しました。 
お名前.comで設定したレコード一覧

※2020/4/11追記
2020/4/14以降に設定する場合は、必要に応じて.appのNetlifyドメインの方に置き換えて設定してください。

Google Domainsの場合 #

  1. ログインして、サイドバーのマイドメインへ

  2. ドメイン一覧から、設定するドメインを選択

  3. サイトバーのDNSを選択

  4. 一番下のカスタム リソース レコードへ

ここでDNSレコードを設定できます。
画像は以下の内容でAレコードとCNAMEレコードを追加した例です。

  • changeofpace.site A 3600 104.198.14.52
  • www.changeofpace.site CNAME 3600 changeofpace.netlify.com

Google Domainsで設定したレコード一覧

※2020/4/14以降に設定する場合は、必要に応じて.appのNetlifyドメインの方に置き換えて設定してください。

設定後 #

設定したDNS設定が反映されるまで少し時間がかかります。
反映されるとNetlify側でドメインが灰色表示だったのが、青緑色になってCheck DNS Configration表示が消えます。
Netlifyで設定したドメイン

DNS設定が反映されるとHTTPS対応も自動で行ってくれます。
こちらもしばらく時間がかかりますが、設定が終わると以下のような画面になります。
(Domain Management → Domains → HTTPS)
NetlifyのHTTPS対応画面

これで設定は終了です。
ブラウザで設定したドメインでちゃんとページが表示されるか確認してみましょう。


元々、独自ドメイン設定は後回しにしようかなと思っていたのですが、思い付きで設定してしまいました。
そんなに難しいこともなく、Netlify側で案内が表示されるのは親切ですね。
HTTPS対応も自動で行ってくれて楽ちんでした。

独自ドメイン設定したら検索にも引っかかるようになるのかな…?
SEOに関しては全然よくわからないので、これから勉強です。

参考リンクまとめ #