Cloudflare Pagesに独自ドメインを設定する方法｜お名前.comからDNS移行・301リダイレクトまで

このブログは当初、Cloudflare Pagesのpages.devドメインで公開していました。その後、独自ドメインを取得し、Cloudflare Pagesへ接続して正式URLを独自ドメインへ移行しました。

この記事では、実際に行った流れをもとに、お名前.comで取得したドメインをCloudflareへ移し、Pagesへ接続し、旧URLから301リダイレクトするまでをまとめます。

今回の構成

公開元：Cloudflare Pages
旧URL：*.pages.dev
ドメイン取得：お名前.com
DNS管理：Cloudflare
新URL：独自ドメイン

なぜ独自ドメインへ移行したのか

pages.devでもサイト自体は問題なく公開できます。ただ、ブログとして長く運用するなら、独自ドメインの方がURLを覚えてもらいやすく、サービス移転時にもURLを維持しやすくなります。

今回は、Cloudflare Pagesの構成を変えずに、公開URLだけ独自ドメインへ移しました。

1. お名前.comで独自ドメインを取得

まずお名前.comでドメインを取得しました。今回の申込画面では初年度の取得料金が0円表示でしたが、キャンペーンや更新料金は時期によって変わるため、申込時点の表示を確認する必要があります。

追加オプションは必要なものだけを選び、Whois情報公開代行は無料設定を利用しました。

2. Cloudflareへドメインを追加

Cloudflareのダッシュボードから「ドメインを接続」を選び、取得した独自ドメインを追加します。

Cloudflare Pagesでルートドメイン（例：example.com）を使う場合、Cloudflare公式では、そのドメインをCloudflareのゾーンとして追加し、ネームサーバーをCloudflareへ向ける手順が案内されています。

3. 自動検出されたDNSレコードを確認する

Cloudflareは現在のDNSをスキャンして既存レコードを取り込みます。

今回の新規取得ドメインでは、お名前.com側の初期設定と思われるA、MX、TXT、大量のサブドメイン向けNSレコードが検出されました。

このブログでは独自メールや既存サービスを使っていなかったため、Cloudflareへ移す前に不要な初期レコードを整理しました。

注意：すでにメールや別サービスを使っているドメインでは、MX・SPF・DKIM・DMARCなどを勝手に削除しないでください。今回のような「新規取得直後で何も使っていないドメイン」とは条件が違います。

4. お名前.comのネームサーバーをCloudflareへ変更

Cloudflareから割り当てられた2つのネームサーバーを、お名前.com側の「その他のネームサーバーを使う」へ設定しました。

今回割り当てられたネームサーバーはドメイン固有の値なので、別ドメインで同じ値を使うものではありません。Cloudflare画面に表示された値をそのまま登録します。

変更後はCloudflare側で反映待ちになり、しばらくして「ドメインはCloudflareによって保護されています」と表示されました。

5. Cloudflare Pagesへ独自ドメインを追加

ネームサーバー反映後、CloudflareのWorkers & Pages → 対象プロジェクト → カスタムドメインから独自ドメインを追加しました。

Cloudflare Pages公式でも、PagesプロジェクトのCustom domainsから独自ドメインを設定する手順が案内されています。

検証中にCNAMEの作成を求められたため、Cloudflare DNSでルートドメインをPagesの*.pages.devへ向け、プロキシを有効にしました。

6. wwwをルートドメインへ301リダイレクト

www.example.comとexample.comの両方が別URLとして残るのを避けるため、www側をルートドメインへ301リダイレクトしました。

Cloudflare公式では、www用にプロキシされたDNSレコードを作り、リダイレクトルールを使う方法が案内されています。

今回の構成では、www用AレコードをプロキシONで作成し、301でルートドメインへ転送しました。

7. pages.devを独自ドメインへ301リダイレクト

独自ドメインが表示できても、旧pages.devがそのまま開けると同じ内容が2つのURLで存在する状態になります。

そこでCloudflareのBulk Redirects（一括リダイレクト）を使い、旧pages.devから独自ドメインへ301転送しました。

Cloudflare公式のPages向け手順では、次の設定が案内されています。

301
Preserve query string
Subpath matching
Preserve path suffix

これにより、トップページだけでなく各記事URLも同じパスを保ったまま新ドメインへ転送できます。

8. canonical・OGP・sitemapを新ドメインへ変更

DNSが通っただけでは、サイト内部の正式URLは旧URLのままです。

このブログでは設定ファイルのサイトURLを独自ドメインへ変更し、ビルド時に生成される以下をまとめて切り替えました。

canonical
OGP URL
sitemap.xml
構造化データ
内部の管理用掲載URL

9. 外部サービスの登録URLも変更

独自ドメインへ移行した後、利用中のサービスも新URLへ揃えました。

Google Search Console
Google Analytics 4
Google AdSense
Amazonアソシエイト
A8.net
楽天アフィリエイト

特にアフィリエイトサービスは、リンクを掲載しているサイトURLの登録情報も確認しておいた方が安全です。

10. Search Consoleで新ドメインを確認

Search Consoleには新ドメインを追加し、新しいsitemap.xmlを送信しました。

また、旧URLから新URLへの301を設定後、アドレス変更ツールも確認しました。Google公式では、アドレス変更ツールは301などの移転準備を終えた後に使うよう案内されています。

今回、旧サイトはまだ十分にインデックスされていない段階だったため、最終的には新ドメイン側のURL検査とインデックス登録リクエストを優先しました。

実際に詰まったポイント

新規ドメインなのに大量のDNSレコードが自動検出された
wwwのリダイレクトルールがDNSレコード不足で警告された
pages.devからの301はBulk Redirectsでリストとルールの2段階設定が必要だった
Search Consoleでは過去のクロール結果が403でも、ライブテストでは正常になることがあった

特にSearch Consoleの403については別記事で詳しく切り分けます。

まとめ

Cloudflare Pagesのルート独自ドメインではCloudflare DNSへ移す
ネームサーバー変更前に既存DNSレコードを確認する
Pagesのカスタムドメインを有効化してから正式URLを切り替える
wwwとpages.devは301で正規URLへ統一する
canonical・sitemap・Search Console・GA4なども新URLへ揃える

WordPress.comからCloudflare Pagesへ移行した全体構成はこちら

独自ドメイン移行後にGA4を設定した手順はこちら

Cloudflare PagesをSearch Consoleへ登録する手順はこちら