こん太 りんく たぬ姉

STEP4
Cloudflare(クラウドフレア)

ドメインとVercelをつなぐ「交換台」。速く・安全にしてくれる無料サービス

4

🟠 Cloudflare(クラウドフレア)とは?

ドメインとVercelをつなぐ「交換台」。速く・安全にしてくれる無料サービス
たぬ姉
Cloudflareは「ドメイン」と「Vercelのサイト」をつなぐ橋みたいなもの。
悪い人からの攻撃を防いでくれたり、サイトを速くしてくれたりもするよ。無料!
たぬ姉
① Cloudflareに登録してドメインを追加
こん太
cloudflare.com でアカウントを作って、
「Add a Site(サイトを追加)」から買ったドメインを入れてね。
プランは Free(無料) でOK!
こん太
dash.cloudflare.com
サイトを追加する
my-awesome-app.com
追加 →
Pro
$20/月
Free ← これ!
$0 / 無料
Business
$200/月
ドメインを入力 →「追加」→ プランは「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証明書も自動で設定済み

🐙
GitHub
コードを保存
Vercel
自動で公開
🌐
ドメイン取得
自分のURL
🟠
Cloudflare
つなぐ+守る
🎉
公開完了!
たぬ姉
わからなくなったら、エラー画面のスクショを撮ってAIに貼るだけで解決できるよ!
Claude・Cursor・ChatGPTなど何でもOK 🤖