ToolNote
💡 Tips

Cloudflare Pages カスタムドメイン設定手順【外部レジストラ対応】

はじめに：Cloudflare Pagesに独自ドメインは必須か？

Cloudflare Pagesでデプロイすると、デフォルトで your-project.pages.dev という形式のURLが払い出されます。開発・テスト用途なら十分ですが、本番公開・ブランディング・SEO を考えると独自ドメイン（カスタムドメイン）の設定はほぼ必須です。

この記事では、Xserverドメインなど外部レジストラで取得したドメインをCloudflare Pagesに紐づける具体的な手順を、設定画面の構成に沿って解説します。

前提条件

項目状態
Cloudflareアカウント作成済み
Cloudflare Pagesプロジェクトデプロイ済み
独自ドメイン取得済み（外部レジストラ）

ドメインをまだ取得していない方は、まずドメインを用意するところから始めましょう。Xserverドメインは .com が低価格で取得でき、管理画面も直感的です。

🔗 おすすめサービス 格安ドメイン名取得サービス『XServerドメイン』

設定の全体像

外部レジストラのドメインをCloudflare Pagesに紐づける方法は 2パターン あります。

方法概要難易度
① ネームサーバーをCloudflareに移管ドメインのNSレコードをCloudflareのものに変更し、DNS管理を丸ごとCloudflareへ移す★★☆
② CNAMEレコードを外部レジストラ側で設定レジストラのDNS管理画面にCNAMEだけ追加する簡易版★☆☆

推奨は①です。CDN・セキュリティ・証明書更新などCloudflareの恩恵をフルに受けられます。本記事では①を中心に、②も補足します。

手順①：ネームサーバーをCloudflareに移管する

Step 1. CloudflareにドメインをZoneとして追加

  1. Cloudflareダッシュボード にログインし、右上の 「サイトを追加」 をクリック
  2. 取得済みの独自ドメイン（例: example.com）を入力して 「サイトを追加」
  3. プランは Free を選択して続行

CloudflareがDNSレコードを自動スキャンし、既存レコードの候補を表示します。既存サービス（メールなど）がある場合はここで確認・取り込みを行います。

Step 2. Cloudflareのネームサーバーをメモ

セットアップ画面に以下のような2つのNSが表示されます（プロジェクトによって異なります）。

arya.ns.cloudflare.com
boyd.ns.cloudflare.com

この2つをコピーしておきます。

Step 3. 外部レジストラのネームサーバーを変更

Xserverドメインの場合：

  1. Xserver会員ページ → 「ドメイン」→「ドメイン一覧」
  2. 対象ドメインの 「ネームサーバー設定」 をクリック
  3. 「その他のネームサーバーを使用する」を選択
  4. Step 2でメモしたCloudflareのNS2つを入力して保存

⚠️ ネームサーバーの変更は浸透に最大24〜48時間かかります。Cloudflareダッシュボードに「有効」と表示されたら完了です。

Step 4. Cloudflare PagesにカスタムドメインをConnect

  1. Cloudflareダッシュボード → 「Workers & Pages」 → 対象プロジェクトを選択
  2. 「カスタムドメイン」 タブ → 「カスタムドメインのセットアップ」
  3. 独自ドメイン（例: example.com または www.example.com）を入力して 「続行」
  4. Cloudflare側でCNAMEレコードが自動作成されます → 「DNSレコードをアクティブ化」 をクリック

数分後、ステータスが 「有効」 に変わり、HTTPSで独自ドメインからアクセスできるようになります。

手順②：CNAMEのみ外部レジストラで設定する（簡易版）

ネームサーバー移管なしにサブドメインだけ使いたい場合は、以下のCNAMEレコードをレジストラのDNS管理画面に追加します。

タイプ : CNAME
ホスト : www（またはサブドメイン名）
値     : your-project.pages.dev
TTL    : 3600（自動でもOK）

ただし、ルートドメイン（example.com そのもの）にCNAMEは設定できません（DNSの仕様）。ルートドメインを使いたい場合はネームサーバー移管が必要です。

SSL証明書の確認

Cloudflare Pagesはカスタムドメイン設定後、Let’s Encryptベースの証明書を自動発行・自動更新 します。追加料金・手動更新は不要です。

「カスタムドメイン」タブで証明書ステータスが 「有効」 になっているか確認してください。有効化直後は数分かかることがあります。

よくあるトラブルと対処法

❌ 「このドメインはすでにCloudflareに存在します」エラー

別のCloudflareアカウントでZoneが作られている場合に発生します。同じアカウントを使っているか確認し、別アカウントならそちらで削除してから再登録します。

❌ ネームサーバー変更後もPendingのまま

48時間待っても変わらない場合は、レジストラ側のネームサーバー入力が正しいか再確認してください。全角スペースの混入などが原因になることがあります。

❌ www へのアクセスは動くが example.com は動かない（またはその逆）

Pages側のカスタムドメインに www.example.com と example.com の両方を登録し、Cloudflare DNS側でリダイレクトルールを設定します。「ルール」→「リダイレクトルール」から example.com/* → https://www.example.com/$1 へ301リダイレクトを設定するのが定石です。

Cloudflare Pagesの独自ドメイン設定をマスターしたら

DNS設定に自信がついたら、次のステップとして以下もおすすめです。

  • Cloudflare Workers でAPIエンドポイントを同一ドメイン下に追加
  • Cloudflare R2 で画像・アセットを配信してさらに高速化
  • Access（Zero Trust） でステージング環境をIP制限なしに保護

Web開発のDNS・インフラ周りをより体系的に学びたい方には、以下の書籍も参考になります。

📚 おすすめ書籍

インフラエンジニアの教科書2

DNS・ネットワーク基礎からCloudまで体系的に学べる一冊

Amazonで見る →

まとめ

ポイント内容
推奨方法ネームサーバーをCloudflareに移管（フル機能が使える）
簡易方法レジストラ側でCNAMEのみ追加（サブドメイン限定）
SSL証明書自動発行・自動更新で追加コストなし
反映時間NS変更は最大48時間、CNAME追加は数分〜1時間

Cloudflare PagesへのカスタムドメインのConnectは、一度やれば手順を覚えてしまうほどシンプルです。まずは独自ドメインを取得して、ぜひ試してみてください。

#Cloudflare #Cloudflare Pages #独自ドメイン #DNS #Web開発