CI/CD

Cloudflare で管理しているドメインを Vercel に設定する完全ガイド

Cloudflare で所有しているカスタムドメインを Vercel プロジェクトに設定する方法をステップバイステップで解説。DNS 設定から Preview Deployment Suffix の設定まで網羅します。

本記事では、Cloudflare で管理しているカスタムドメインを Vercel プロジェクトに設定する方法を解説します。2 つの設定方法と、それぞれのメリット・デメリットを詳しく説明します。

前提条件

  • Cloudflare でドメインを管理している（例: linto.dev）
  • Vercel にプロジェクトがデプロイ済み
  • Vercel アカウントを持っている

設定方法の選択

Vercel にカスタムドメインを設定する方法は 2 つあります:

方法概要メリットデメリット
方法 1: Cloudflare DNS を維持Cloudflare の DNS を使い続けるCloudflare の機能（CDN、WAF など）を利用可能Preview Deployment Suffix が使えない
方法 2: Vercel Nameservers に移行DNS を Vercel に移管Preview Deployment Suffix が利用可能Cloudflare の機能が使えなくなる

どちらを選ぶべきか

  • Preview Deployment Suffix が必要な場合 → 方法 2（Vercel Nameservers）
  • Cloudflare の CDN/WAF/DDoS 保護が必要な場合 → 方法 1（Cloudflare DNS）
  • シンプルに設定したい場合 → 方法 1（Cloudflare DNS）

方法 1: Cloudflare DNS を維持する設定

Cloudflare の DNS を使い続けながら、Vercel にドメインを接続する方法です。

ステップ 1: Vercel でドメインを追加

  1. Vercel ダッシュボード にログイン
  2. プロジェクトを選択
  3. Settings → Domains に移動
  4. Add をクリック
  5. ドメイン名（例: linto.dev）を入力して Add をクリック

ステップ 2: DNS レコード情報を確認

ドメインを追加すると、Vercel が必要な DNS レコード情報を表示します:

Apex ドメイン（例: linto.dev）の場合:

Type: A
Name: @
Value: 76.76.21.21

サブドメイン（例: www.linto.dev）の場合:

Type: CNAME
Name: www
Value: cname.vercel-dns.com

Note: CNAME の値はプロジェクトごとに異なる場合があります。Vercel ダッシュボードに表示される値を使用してください。

ステップ 3: Cloudflare で DNS レコードを設定

  1. Cloudflare ダッシュボード にログイン
  2. 対象のドメイン（例: linto.dev）を選択
  3. DNS → Records に移動
  4. Add record をクリック

Apex ドメインの設定（linto.dev）

項目値
TypeA
Name@
IPv4 address76.76.21.21
Proxy statusDNS only（オレンジの雲をクリックしてグレーに）
TTLAuto

www サブドメインの設定（www.linto.dev）

項目値
TypeCNAME
Namewww
Targetcname.vercel-dns.com
Proxy statusDNS only（グレーの雲）
TTLAuto

重要: Proxy status を「DNS only」にする理由

Cloudflare のプロキシ（オレンジの雲）を有効にすると、以下の問題が発生する可能性があります:

  • SSL 証明書の競合: Vercel と Cloudflare の両方が SSL を終端しようとする
  • リダイレクトループ: Cloudflare の「Always Use HTTPS」と Vercel の設定が競合
  • キャッシュの問題: Cloudflare のキャッシュが Vercel の動的コンテンツをキャッシュ

Tip: Cloudflare の CDN 機能を使いたい場合は、SSL/TLS 設定を「Full (strict)」に変更し、慎重にテストしてください。

ステップ 4: Vercel で検証を確認

  1. Vercel ダッシュボードに戻る
  2. Settings → Domains で追加したドメインを確認
  3. ステータスが Valid Configuration になれば成功

DNS の反映には最大 48 時間かかる場合がありますが、通常は数分〜数時間で完了します。

ステップ 5: www リダイレクトの設定（オプション）

www.linto.dev から linto.dev へのリダイレクト（または逆）を設定できます:

  1. Vercel の Settings → Domains に移動
  2. リダイレクト元のドメインの Edit をクリック
  3. Redirect to でリダイレクト先を選択

方法 2: Vercel Nameservers に移行する設定

Preview Deployment Suffix を使用するには、ドメインの DNS を Vercel に移管する必要があります。

ステップ 1: Vercel でドメインを追加

方法 1 と同様に、Vercel でドメインを追加します。

ステップ 2: Nameservers 方式を選択

  1. ドメイン追加後、設定画面で Nameservers タブを選択
  2. Vercel が提供する Nameservers をメモ:
ns1.vercel-dns.com
ns2.vercel-dns.com

ステップ 3: Cloudflare から DNS レコードをエクスポート

Vercel に移行する前に、既存の DNS レコードをバックアップします:

  1. Cloudflare ダッシュボードで DNS → Records に移動
  2. Export をクリックして DNS レコードをダウンロード

ステップ 4: Cloudflare で Nameservers を変更

  1. Cloudflare ダッシュボードにログイン
  2. 対象のドメインを選択
  3. Overview ページで Advanced Actions → Remove site from Cloudflare をクリック

Warning: この操作により、Cloudflare のすべての機能（CDN、WAF、DDoS 保護など）が無効になります。

次に、ドメインレジストラ（Cloudflare Registrar を使用している場合は Cloudflare）で Nameservers を変更:

  1. Domain Registration → Manage Domains に移動
  2. 対象のドメインを選択
  3. Nameservers セクションで Edit をクリック
  4. Vercel の Nameservers に変更:
    • ns1.vercel-dns.com
    • ns2.vercel-dns.com
  5. Save をクリック

ステップ 5: Vercel で DNS レコードを追加

Cloudflare からエクスポートした DNS レコードを Vercel に追加します:

  1. Vercel ダッシュボードで Settings → Domains に移動
  2. ドメインをクリック
  3. DNS Records セクションで必要なレコードを追加

メール（MX レコード）などを使用している場合は、必ず追加してください:

Type: MX
Name: @
Value: mail.example.com
Priority: 10

ステップ 6: 検証を待つ

Nameservers の変更が反映されるまで、最大 48 時間かかる場合があります。Vercel ダッシュボードでステータスを確認してください。

Preview Deployment Suffix の設定

Preview Deployment Suffix は Pro プランまたは Enterprise プランで利用可能です。

前提条件

  • Vercel Pro または Enterprise プラン
  • ドメインが Vercel Nameservers を使用している（方法 2）

ステップ 1: Preview Deployment Suffix を有効化

  1. Vercel ダッシュボードでチームを選択
  2. Settings → Billing に移動
  3. Add-Ons セクションで Preview Deployment Suffix を Enabled に設定

ステップ 2: カスタムドメインを設定

  1. Settings → General に移動
  2. Preview Deployment Suffix セクションまでスクロール
  3. カスタムドメイン（例: preview.linto.dev）を入力
  4. Save をクリック

ステップ 3: ワイルドカード DNS レコードの確認

Vercel Nameservers を使用している場合、ワイルドカードレコードは自動的に設定されます。

設定後、Preview デプロイメントの URL は以下のように変わります:

変更前: https://my-app-git-feature-username.vercel.app
変更後: https://my-app-git-feature.preview.linto.dev

Vercel Nameservers を使わずに Preview Deployment Suffix を使う方法

Cloudflare DNS を維持したまま Preview Deployment Suffix を使いたい場合、以下の制限付きで可能です:

ステップ 1: Cloudflare でワイルドカード CNAME を設定

Type: CNAME
Name: *.preview
Target: cname.vercel-dns.com
Proxy status: DNS only

ステップ 2: Vercel でドメインを追加

*.preview.linto.dev として追加します。

Note: この方法は公式にはサポートされておらず、動作しない場合があります。確実に動作させるには Vercel Nameservers への移行を推奨します。

トラブルシューティング

DNS レコードが反映されない

# DNS の反映状況を確認
dig A linto.dev +short

# 期待される出力
76.76.21.21

反映されていない場合:

  1. Cloudflare の DNS レコードが正しく設定されているか確認
  2. TTL が過ぎるまで待つ（通常は数分〜数時間）
  3. ブラウザのキャッシュをクリア

SSL 証明書エラー

Cloudflare のプロキシが有効になっている可能性があります:

  1. Cloudflare で DNS レコードの Proxy status を確認
  2. DNS only（グレーの雲）に変更
  3. 数分待ってから再度アクセス

リダイレクトループ

Cloudflare と Vercel の両方で HTTPS リダイレクトが設定されている場合に発生します:

  1. Cloudflare の SSL/TLS → Edge Certificates に移動
  2. Always Use HTTPS を無効化

または:

  1. Cloudflare の SSL/TLS → Overview に移動
  2. Full (strict) を選択

「Domain is already in use」エラー

別の Vercel アカウントでドメインが使用されている場合に表示されます:

  1. TXT レコードによる所有権の検証が必要
  2. Vercel が表示する TXT レコードを Cloudflare に追加
  3. 検証完了後、ドメインが追加可能に

推奨構成

Production 環境

linto.dev           → A レコード → 76.76.21.21
www.linto.dev       → CNAME → cname.vercel-dns.com

Preview 環境（Vercel Nameservers 使用時）

*.preview.linto.dev → Vercel が自動設定

環境変数の設定

# Production
NEXT_PUBLIC_SITE_URL=https://linto.dev
BETTER_AUTH_URL=https://linto.dev

# Preview（GitHub Actions で動的に設定）
NEXT_PUBLIC_SITE_URL=https://my-app-git-feature.preview.linto.dev
BETTER_AUTH_URL=https://my-app-git-feature.preview.linto.dev

まとめ

設定項目Cloudflare DNS 維持Vercel Nameservers
設定難易度簡単やや複雑
Cloudflare CDN利用可能利用不可
Cloudflare WAF利用可能利用不可
Preview Deployment Suffix利用不可利用可能
SSL 証明書Vercel が発行Vercel が発行

ほとんどのユースケースでは、方法 1（Cloudflare DNS を維持） がシンプルで推奨されます。

Preview Deployment Suffix を使用して Preview 環境と Production 環境間で Cookie を共有したい場合は、方法 2（Vercel Nameservers） を選択してください。

目次

前提条件設定方法の選択どちらを選ぶべきか方法 1: Cloudflare DNS を維持する設定ステップ 1: Vercel でドメインを追加ステップ 2: DNS レコード情報を確認ステップ 3: Cloudflare で DNS レコードを設定Apex ドメインの設定（linto.dev）www サブドメインの設定（www.linto.dev）重要: Proxy status を「DNS only」にする理由ステップ 4: Vercel で検証を確認ステップ 5: www リダイレクトの設定（オプション）方法 2: Vercel Nameservers に移行する設定ステップ 1: Vercel でドメインを追加ステップ 2: Nameservers 方式を選択ステップ 3: Cloudflare から DNS レコードをエクスポートステップ 4: Cloudflare で Nameservers を変更ステップ 5: Vercel で DNS レコードを追加ステップ 6: 検証を待つPreview Deployment Suffix の設定前提条件ステップ 1: Preview Deployment Suffix を有効化ステップ 2: カスタムドメインを設定ステップ 3: ワイルドカード DNS レコードの確認Vercel Nameservers を使わずに Preview Deployment Suffix を使う方法ステップ 1: Cloudflare でワイルドカード CNAME を設定ステップ 2: Vercel でドメインを追加トラブルシューティングDNS レコードが反映されないSSL 証明書エラーリダイレクトループ「Domain is already in use」エラー推奨構成Production 環境Preview 環境（Vercel Nameservers 使用時）環境変数の設定まとめ