Cloudflareは「ドメイン」と「Vercelのサイト」をつなぐ橋みたいなもの。
悪い人からの攻撃を防いでくれたり、サイトを速くしてくれたりもするよ。無料!
たぬ姉
① Cloudflareに登録してドメインを追加
cloudflare.com でアカウントを作って、
「Add a Site(サイトを追加)」から買ったドメインを入れてね。
プランは Free(無料) でOK!
こん太
ドメインを入力 →「追加」→ プランは「Free」を選んで「Continue」
② ネームサーバーをコピーしてXserverに貼る
Cloudflareが 2行の文字列(ネームサーバー) を教えてくれるよ。
それをコピーして、Xserverの管理画面に貼り付けるだけ!
反映に最大24時間かかるけど、だいたい数時間でOKになるよ。
りんく
dash.cloudflare.com / ネームサーバーを変更
📋 このネームサーバーをコピーしてXserverに貼る
ネームサーバー 1
vida.ns.cloudflare.com
ネームサーバー 2
walt.ns.cloudflare.com
※ 実際の文字列はあなたのドメインによって異なります
この2行をコピー → Xserverの「ネームサーバー設定」に貼り付け → 保存
③ VercelとドメインをDNSでつなぐ
Cloudflareの「DNS」という画面で、
Vercelの「76.76.21.21」というIPアドレスを登録するよ。
Vercelの設定画面に「Add this record」って書いてあるから、それを見ながら入力してね!
こん太
dash.cloudflare.com / DNS / レコード
| タイプ |
名前 |
内容(Value) |
| A |
@ |
76.76.21.21 |
| CNAME |
www |
cname.vercel-dns.com |
↑ この2行を追加する。Vercelの管理画面にコピペ用の値が表示されます。
Vercelの「Domains」設定 → DNSレコードの値をCloudflareに入力 → 保存
④ 完成!独自ドメインでサイトが見える
数時間待つと https://my-awesome-app.com で
あなたのサイトが見られるようになるよ!
🔒 鍵マーク(HTTPS) もCloudflareが自動でつけてくれるから安全!
りんく
🔒 https://my-awesome-app.com
🎉
独自ドメインで公開完了!
https://my-awesome-app.com でサイトが見えます
🔒 SSL証明書も自動で設定済み