この記事では、Cloudflareの無料機能と外部DNSプロバイダー（お名前ドットコム）を組み合わせ、費用を抑えながらウェブサイトを展開する方法を解説します。自分の例を元に、具体的な設定手順を詳しくご紹介します。
1. 背景と動機
Cloudflareのドメインレジストラは初期契約が有料ですが、お名前ドットコムなどの外部DNSプロバイダーを利用することで、初期費用を無料でデプロイすることができます。
また、Cloudflareの無料プランを利用してDNS管理、CDN、SSLなどの機能を活用することで、安全かつ高速なウェブサイトを低コストで運用できます。
(なお、お名前ドットコムはドメインの更新に年間1500円程度の費用がかかるので、ドメインを維持し続ける場合はcloudflareに移管しても良いと思います)
2. 前提条件
- Cloudflareのアカウント
- お名前ドットコムで取得したドメイン (ここでは
example.comを取得したとします) - Cloudflare Pagesにデプロイするウェブサイトのプロジェクト
3. 手順
ステップ 1: Cloudflareでドメインの追加
Cloudflareのダッシュボード上で、追加→既存のドメインと遷移し、お名前ドットコム等で取得したドメインを入力します。
ここで無料の料金プランを選択し、CloudflareがDNSのスキャンを行います。この後アクティベーションに進むと、最後のステップとしてネームサーバーの更新としてcloudflareからネームサーバーが指定されます。
ステップ 2: お名前ドットコムでの名前サーバー変更
今度はお名前ドットコムのサイト側でネームサーバーの設定を行います。前のステップで割り当てられたcloudflareのネームサーバーを取得したドメインに変更します。
変更が全世界に反映されるまで、最大72時間程を要すると書かれていたりしますが、だいたい30分程度で反映された気がします。(DNS lookup等のツールで反映されたか確認しても良いかもしれません)
反映が完了すると、Cloudflareのネームサーバーがアクティブになります。
ステップ 3: Cloudflare Pagesでのプロジェクトデプロイとカスタムドメイン設定
-
プロジェクトのデプロイ
Cloudflare Pagesから無料プランを利用してウェブサイトのプロジェクトをアップロードします。詳細は割愛しますが、最終的にはexample.pages.dev等のurlからデプロイされたサイトが見れる形になるかと思います。 -
カスタムドメインの設定（wwwサブドメイン）
Cloudflare Pagesの管理画面で、カスタムドメインの設定からwww.example.comを設定します。
※ルートドメイン（example.com）では、ドメイン所有権移管が必要なため、今回はwwwサブドメインを利用します。これにより、SSL証明書が自動的に発行され、HTTPS通信が可能になります。
ステップ 4: CNAMEリダイレクトとルートドメインのリダイレクト設定
-
CNAMEリダイレクトの設定
CloudflareのDNS管理画面で、wwwサブドメインに対してCNAMEレコードを追加し、Cloudflare Pages上のサイトに紐付けます。（名前の部分にwww、ターゲットの部分にexample.pages.devと入力）
この段階で設定が正しければ、www.example.comがアクセスできるようになっているはずです。 -
ルートドメインからwwwへのリダイレクト
ルートドメイン（example.com）にアクセスされた場合、HTTPおよびHTTPSリクエストが自動的にwwwサブドメインに転送されるよう、Cloudflareのリダイレクトルールを設定します。
このリダイレクト設定により、ユーザーはルートurlをアクセスした際も常にSSLが有効なwwwサブドメインにリダイレクトされます。
5. まとめ
反映まで数時間かかってしまう場合がありますが、設定が完了したかどうかはDNS lookupのツールなどを使用して全世界からアクセスできるか確認できます。（ちなみにこれをするとcloudflare側でのトラフィックのリクエストがいろいろな国から来ていることが確認できます）
参考になれば幸いです。