ネームサーバーを変更せずにCloudflare Pagesにカスタムドメインを設定したい
背景
- Cloudflare Pagesにデプロイしたサイトにカスタムドメインを設定したい
- カスタムドメインのDNSレコードの管理・設定を別サービス（記事内ではXサーバー）で行いたい（ネームサーバーをデプロイ先に変更したくない）
- Cloudflare Pagesは無料プラン
結論
（無料プランでは） apexドメイン（ example.com ）はネームサーバーの変更必須。
サブドメイン（ www.example.com や blog.example.com など ）はネームサーバーを変更せずに追加可能。
無料プランの場合、 example.com をCloudflare Pagesに追加するにはネームサーバーをCloudflareに向ける必要があるそうです。
代わりのホスティングサービス3選
ドメインの管理を一箇所にしたいという条件は譲れないため、apexドメイン（ example.com ）をネームサーバーを変更せずに追加できる代わりのホスティングサービスを探してみました。
Vercel
Cloudflare Pagesと同じように数クリックでGitHubのリポジトリと連携してビルド・デプロイが可能。
カスタムドメインの設定はデプロイ後、Setting > Domainからカスタムドメインを追加 => 表示される内容に従ってDNSレコードを設定。
GitHub Pages
GitHub Actionsを利用してビルド・デプロイ。
カスタムドメインの追加は「カスタムドメインの検証」=>「該当のリポジトリでカスタムドメインの追加・DNSレコードの設定」という流れ。
気になる点
- リポジトリは公開されている必要がある（プライベートリポジトリは不可）
- GitHub Actionsに不慣れ
Kinsta
Cloudflare Pagesと同じように数クリックでGitHubのリポジトリと連携してビルド・デプロイが可能。
カスタムドメインはデプロイ後、[ドメインを追加]から行い、画面に表示された内容に従ってドメイン管理側でDNSレコードの設定をするだけ（反映には最大24時間程度かかる）。
気になる点
Time to First Byte (TTFB) が若干遅いとのデータあり。
NetlifyやRenderもKinsta同様、Vercelと比べるとTTFBやロードがやや遅いというデータがあるため検討せず。
サブドメインの設定方法
ここではドメインの管理がXサーバーの場合の設定方法です。
Cloudflare Pages
- サイトをデプロイする
- Custom domains > [Set up a custom domains]
- 追加したいサブドメイン（
www.example.comやblog.example.comなど ）を入力 - DNSの設定方法で「My DNS provider」の [Begin CNAME setup] を選択
- DNSレコード設定内容が表示されたらXサーバーへ移動
Xサーバー
（該当ドメインのネームサーバー設定が「Xserverレンタルサーバー」になっていること）
6. 該当のドメインのDNSレコード設定画面を表示
7. 「5.」で表示された通りにDNSレコードを追加または編集する（以下例）
・ホスト名: <YOUR-SUB-DOMAIN>.example.com
・種別: CNAME
・内容: <YOUR-DOMAIN>.pages.dev（Cloudflare Pagesのデフォルトのドメイン）
8. DNSレコードの設定が完了したらCloudflare Pagesへ
Cloudflare Pages
- [Continue]をクリック
ドメインの設定が完了するとステータスが「Active」になる
Discussion