CloudflareをDNSプロバイダーとして使用する場合のCloudflare RegistrarとVercelの設定
はじめに
この記事は「CloudflareをDNSプロバイダーとして使用する」場合の設定方法です
「Cloudflareをリバースプロキシとして使用する」場合の設定方法はまた別です
以下の構成を作成したい人向け
- Cloudflare Registrarでドメイン取得しDNSプロバイダーとして使用したい
- Vercelにサービスをデプロイしたい
前提条件としては以下
- ドメインは既に取得済み(この記事では
example.comとしておく) - Vercel上でアプリは既にデプロイされている
Vercelの設定
Vercelでは２つのドメイン設定を行います。
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