m's blog

備忘録とかメモとか

Netlify に独自ドメインを設定する方法

Image from Gyazo

静的コンテンツのホスティングサービス「 Netlify 」では、無料枠の範囲で独自ドメインの利用が可能です。

今回は Netlify に独自ドメインを設定する方法 について解説したいと思います。

目次

はじめに

本記事では、以下の記事で公開したページをベースに解説を進めていきます。

Netlify + GitHub 環境で簡単にサイトを公開する方法

まだ Netlify を利用していない、または、独自ドメイン設定用のサイトがない場合は、上記のページを参考にサイトを公開してください。

簡単な流れ

本記事では、以下のような流れで解説を進めていきます。

  1. Netlify でドメイン追加設定
  2. DNS プロバイダで CNAME レコードを追加
  3. サイトチェック
  4. まとめ

それでは、早速、Netlify に独自ドメインを設定していきたいと思います。

カスタムドメインの設定

Netlify での設定

Netlify の管理ページで、独自ドメインを設定するサイトの Settings ページを開いてください。

Settings > Domain management > Domains > Custom domains の順に進み、Custom domains項目へ移動してください。

Image from Gyazo

Custom domains 項目へ移動したら、Add custom domain ボタンをクリックしてください。

カスタムドメインの追加設定ページが開くので、設定したい独自ドメインを入力して、Verify ボタンをクリックしてください。

Image from Gyazo

ドメインのオーナーかどうか聞かれるので、Yes を選択してください。 Image from Gyazo

DNS 設定

Settings > Domain management > DomainsCustom domains 項目へ戻ってください。

追加した独自ドメインの設定に Check DNS configuration と表示されているので、クリックしてください。

Image from Gyazo

以下のような指示が表示されるので、これに従って DNS プロバイダで CNAME レコードを設定します。

Point m-sample-netlify-trial CNAME record to m-sample-netlify-trial.netlify.app

Cloudflare の場合だと、以下のような感じの設定となります。 Image from Gyazo

サイトチェック

設定したドメインでサイトを開いてみてください。

サイトが表示されれば、独自ドメインの設定は完了です!

まとめ

以上、「 Netlify に独自ドメインを設定する方法」について解説してみました。

最後に、今回の内容について簡単にまとめてみたいと思います。

  • Netlify は無料枠の範囲で独自ドメインが使える!設定も簡単!
  • Netlify でドメイン追加設定をして、DNS プロバイダで CNAME レコードを追加するだけ