CloudflareをDNSプロバイダーとして使用する場合のCloudflare RegistrarとVercelの設定
はじめに
この記事は「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