🔗

CloudflareをDNSプロバイダーとして使用する場合のCloudflare RegistrarとVercelの設定

2025/01/28に公開

はじめに

この記事は「CloudflareをDNSプロバイダーとして使用する」場合の設定方法です
「Cloudflareをリバースプロキシとして使用する」場合の設定方法はまた別です

以下の構成を作成したい人向け

  • Cloudflare Registrarでドメイン取得しDNSプロバイダーとして使用したい
  • Vercelにサービスをデプロイしたい

前提条件としては以下

  • ドメインは既に取得済み(この記事ではexample.comとしておく)
  • Vercel上でアプリは既にデプロイされている

Vercelの設定

Vercelでは2つのドメイン設定を行います。
Vercelの管理画面からProject Settings > Domains を開いてドメイン設定画面を開きます。

1つ目の設定

元々から存在するexample.vercel.appを編集して、Domainをwww.example.comに更新し、 Redirect to には入力なし(元の設定と変わらないはず)の設定を作成してください。

2つ目の設定

検索formにexample.comを入力後Addボタンを押すことで設定を追加できます。

この画像の状態でAddを押すと、Domainにはexample.com, Redirect to にはwww.example.com, Status Codeには308の設定が追加されます。

2つのドメイン設定を作成後、example.comの説明欄にCloudflare Registrarに登録する必要のあるIPが表示されているのでメモしてください

Cloudflare Registrarの設定

Cloudflare Registrarの管理画面に表示されているドメインからexample.comを押し、左ナビにある DNS > レコードを開き、レコードの追加からDNSの設定を追加します。

以下の2点を追加してください。

  • タイプを CNAME, 名前をwww, ターゲットをcname.vercel-dns.com, プロキシステータスをDNSのみにして保存
  • タイプを A, 名前を@, ターゲットを${Vercelの管理画面で取得したIP}, プロキシステータスをDNSのみにして保存

これで設定は完了です。
少し時間が経ってからhttps://www.example.comにアクセスするとサイトが表示され、https://example.comにアクセスした場合はhttps://www.example.comにリダイレクトされるのが確認できるかと思います。

参考リンク

Discussion