実は最近Cloudflareで初めてドメインというものを買ってみた. そして,本ウェブサイトのURLを

https://yiRMT.vercel.app から https://yiwashita.com

に変えてみた. 今回はその購入からWebページへの反映までの流れを説明したいと思う.

背景

これまでこのポートフォリオをはじめ,Webサイトのデプロイ先にVercelを用いてきたが,実はURLがずっと気になっていた. Vercelではhttps://*.vercel.appがWebサイトのURLとして設定されるが,自分の制作物であることをわかりやすくするために独自ドメインを取得することが必要だと感じた.

独自ドメインを買うことを決意したのはいいものの,どこでドメインを買うのか決めないといけない. ドメインの販売サイトをいくつか探した結果,

  • ドメインの価格
  • ドメインやDNSの管理のしやすさ

が優れているCloudflareでドメインを購入することにした.

本記事では,Cloudflareのアカウントが作成済みである前提のもと,ドメインの購入手順やDNSの設定方法を説明する.

ドメインの購入

Cloudflareのアカウントを作成し,左のメニューバーから「ドメイン登録」→「ドメインの登録」を選択するとドメイン購入ページが現れる. まずはここで購入したいドメインを検索する.

ドメイン購入ページ

そして購入手続きを済ませると,ついに自分のオリジナルドメインを手に入れることができる.

DNSSECの設定

左のメニューバーから「ドメイン登録」→「ドメインの管理」を選択すると以下のように,購入したドメインの管理画面が表示されると思う. ドメインの管理

右の「管理」を押し,「構成」タブを開くとDNSSECの構成メニューが現れる. そこで,「DNSSECを有効化」を選択し,しばらくするとDNSSECが有効化される. これには時間がかかることがあり,私の場合では15分ほどかかった.

DNSSECの構成

Webサイトの設定1 - SSL/TLS

左のメニューバーから「Webサイト」を選択すると以下のように,購入したドメインに対応するWebサイトが既に追加されているはずだ.

Webサイトの一覧

Webサイトを選択すると,様々な構成メニューが表示されるはずだ. まずは,左のメニューバーから「SSL/TLS」→「概要」を選択し,セキュリティの設定をする. ここでは,「SSL/TLS 暗号化モード」を「フル」,「SSL/TLS 推奨機能」を「オン」にしてほしい. これをしなければ,HTTPSのSSL証明書が正しく設定されず,ドメインを設定したWebサイトにアクセスできなくなる可能性がある.

SSL/TLSの設定

Webサイトの設定2 - DNSレコードの追加

Webサイトのデプロイは何でも良いのだが,ここではVercelを使用した場合を説明する.

Vercel側の設定

まずは追加すべきDNSレコードのType, Name, Valueを確認する必要がある.

Vercelでプロジェクトページを開き,Domainsを開く. するとドメインを追加するメニューがあると思うので,そこに希望するドメインを入力しAddをクリックする. サブドメインも可能である(例えば xxxx.yyyy.com でも yyyy.com でも良い). 追加するとドメインが購入済のものかチェックされ,DNSレコードが表示されるはずである. このとき,DNSレコードのType, Name, Valueをどこかにメモしておく.

Cloudflare側の設定

左のメニューバーから「DNS」→「レコード」を選択する. そして「レコードの追加」ボタンを押すと次のようなメニューが表示されるはずだ. ここで,先ほどメモしたTypeを「タイプ」に,Nameを「名前 (必須)」に,Valueを「IPv4 アドレス (必須)」に入力し,「保存」を押すとレコードの追加が完了する.

DNSレコードの追加

しばらく待つと,登録したドメインを使ってWebサイトにアクセスできるはずである.

まとめ

ここまでCloudflareを使ったドメインの購入手順とDNSの設定について説明してきたが,比較的簡単だったと思う.

実は個人的につまずいたポイントがあり,それはSSL/TLSの設定である. これがわからず暗号化モードを「フレキシブル」にしていたところ,いつまで経ってもWebサイトにアクセスできず,DNSの反映遅いなあとか思っていた. でも実は自分がSSL/TLSまわりをよく知らず,正しく設定していなかったことが原因だった.

この記事が今後ドメインを購入する人にとって何らかの助けになれば良いと思う.