NovelArena 素通りされない情報だけを、届けていく。

Cloudflare に独自ドメインを設定する

サイトを Cloudflare Pages で公開 すると、最初は xxxx.pages.dev のような自動ドメインが割り当たります。動作確認には十分ですが、人に見せる・育てるサイトなら、やはり自分のドメインを当てたい。本サイト novelarena.jp も、取得したドメインを Cloudflare につなぎ、Pages にカスタムドメインとして足す形で公開しています。

この記事では、その「ドメインを Cloudflare に載せて、独自ドメインで配信する」までを、実際にやった順番でたどります。DNS をいじるのは初めてだと身構えがちですが、覚えるレコードは数種類で、Pages を使うなら SSL まで自動で付きます。

全体像：3 ステップで終わる

やることは大きく 3 つだけです。

  1. ドメインを Cloudflare の管理下に入れる（ネームサーバーを Cloudflare に向ける）
  2. DNS レコードを整える（どのドメインを、どこに向けるか）
  3. Pages にカスタムドメインを足す（Pages 配信なら、ここが実質ゴール）

順に見ていきます。

ステップ 1：ドメインを Cloudflare に載せる

ドメインをどこで取ったかで、入口が 2 つに分かれます。

(A) Cloudflare で取得する場合（Cloudflare Registrar） ダッシュボードからドメインを買えば、最初から Cloudflare の管理下です。ネームサーバーの設定は不要 ── ステップ 1 はこれで完了します。いちばん迷いません。

(B) 他社（お名前.com・ムームードメイン・Google Domains など）で取った場合 このときは「ネームサーバー（NS）の付け替え」が必要です。流れはこうです。

  1. dash.cloudflare.com → Add a site で自分のドメインを入力。
  2. Cloudflare が既存の DNS レコードを自動スキャンし、見つかった分を取り込んでくれる（後で確認・修正できます）。
  3. プラン選択（個人サイトなら Free で十分）。
  4. Cloudflare が 2 つのネームサーバー（例：xxx.ns.cloudflare.com）を提示する。
  5. ドメインを買った会社の管理画面を開き、ネームサーバーをその 2 つに置き換える。

ここがこの作業でいちばん「サイト側ではなくレジストラ側を触る」ポイントです。置き換えると、そのドメインの DNS の主導権が Cloudflare に移ります。反映には数分〜場合により最大 48 時間かかることがあり、Cloudflare 側のステータスが Active になれば完了です。

ステップ 2：DNS レコードの最小知識

Cloudflare の DNS 画面に並ぶレコードは、種類さえ分かれば怖くありません。個人開発で使うのはほぼ次の 4 つです。

レコード役割値の例
Aドメインを IPv4 アドレスに向ける192.0.2.1
AAAAドメインを IPv6 アドレスに向ける2606:...
CNAME別のホスト名へ転送（別名）your-app.pages.dev
TXT所有確認・メール認証など文字列を置くgoogle-site-verification=...

サーバーの IP に直接向けるなら A レコード、別のホスト名に乗せるなら CNAME ── という大枠だけ掴めば十分です。なお、Pages にカスタムドメインを足す方式（ステップ 3）では、これらのレコードは Cloudflare がほぼ自動で作ってくれるので、手書きする場面はあまりありません。

オレンジ雲（プロキシ）の意味

各レコードの横にある雲アイコンは、Cloudflare の重要な仕掛けです。

  • オレンジ雲（Proxied） … 通信が Cloudflare を経由する。CDN・SSL・キャッシュが効き、元サーバーの IP が隠れる。
  • グレー雲（DNS only） … Cloudflare は名前解決だけして、通信は素通り。

サイト配信なら基本はオレンジ雲です。ただしメール（MX）や一部の認証用レコードはグレー雲にする必要があるので、「Web はオレンジ、メール系はグレー」とざっくり覚えておくと事故りません。

ステップ 3：Pages にカスタムドメインを足す（ここが本命）

Cloudflare Pages でサイトを配信しているなら、DNS を手書きするより、Pages 側からドメインを足すのが正解です。本サイトもこの方式です。

  1. Pages プロジェクトを開く → Custom domains → Set up a domain。
  2. 使いたいドメイン（例：novelarena.jp）を入力。
  3. そのドメインが同じ Cloudflare アカウントにある場合、Cloudflare が必要な CNAME を自動で作成し、SSL 証明書も自動で発行してくれる。

つまり、A レコードや CNAME を自分で打つ必要がほぼありません。Active になれば、https://あなたのドメイン でサイトが開きます。HTTPS（鍵マーク）も自動で、証明書の更新も Cloudflare 任せ ── ここが Pages のいちばん楽なところです。

補足：Cloudflare Pages 以外（自前の Workers や外部サーバー）に向けるなら、ステップ 2 の A / CNAME を手で設定します。Workers にデプロイした API に独自ドメインを当てるときは、Workers 側の Custom Domains / Routes から設定するのが定石です。

www と apex（裸ドメイン）をどうするか

「example.com と www.example.com の両方で開きたい」問題です。

  • apex（裸ドメイン） … novelarena.jp のように www が付かない形。本来 CNAME は apex に置けませんが、Cloudflare の CNAME フラッティングが裏で吸収するため、Pages のカスタムドメインとして普通に使えます。
  • www … www.novelarena.jp。これも Pages の Custom domains から別途足せます。

実務では、どちらかを正（canonical）に決めて、もう一方をリダイレクトします。Cloudflare の **Redirect Rules（リダイレクトルール）**で「www → 裸ドメイン」のように 301 で寄せれば、URL が 2 つに割れて 検索評価が分散する のを防げます。本サイトは裸ドメイン novelarena.jp を正にしています。

SSL は自動、ただしモードだけ確認

Pages のカスタムドメインなら証明書は自動発行なので、基本ノータッチで HTTPS になります。自前サーバーに向ける場合だけ、SSL/TLS のモードを見ておきます。

  • Full（strict） … 推奨。元サーバーも正しい証明書で暗号化していることが前提。
  • Flexible … 訪問者〜Cloudflare 間だけ暗号化。手軽だが元サーバーまでは平文 ── 可能なら避ける。

Pages 利用なら、ここは Cloudflare が適切に管理してくれるので、深追い不要です。

挫折ポイント

  • ネームサーバーを変えたのに反映されない … レジストラ側の保存忘れ、または単に伝播待ち。Cloudflare の overview が Active になるまで待つ（数分〜最大 48 時間）。慌てて何度も変えない。
  • Pages 配信なのに DNS を手書きして二重定義 … Custom domains から足せば CNAME は自動。さらに手で A/CNAME を打つと競合します。Pages を使うなら Pages 側からが原則。
  • オレンジ雲とグレー雲の取り違え … Web をグレー雲にすると CDN も SSL も効かない。メール系をオレンジ雲にすると配送がおかしくなる。「Web はオレンジ、メール系はグレー」。
  • www と裸ドメインを両方とも“正”にしてしまう … 両方が 200 で開くと URL が割れる。片方を 301 リダイレクトで寄せる。
  • 元サイトがまだ別 DNS を見ている … ネームサーバーを移す前の古いレコードが残っていると、思った先に向かない。Cloudflare のスキャン結果を一度棚卸しする。
  • TXT（所有確認）を消してしまう … Search Console や各種サービスの確認用 TXT を整理時に消すと認証が切れる。用途不明の TXT は消す前に確認。

まとめ：Pages なら「載せて・足す」だけ

独自ドメイン設定は、身構えるほど複雑ではありません。

  1. ドメインを Cloudflare に載せる（他社取得ならネームサーバーを Cloudflare へ）
  2. DNS は A / CNAME / TXT の役割だけ押さえる（Pages 方式なら手書きはほぼ不要）
  3. Pages の Custom domains から足す → CNAME も SSL も自動 → https://あなたのドメイン で公開

本サイト novelarena.jp も、この流れで pages.dev の仮ドメインから独自ドメインへ切り替えました。いちばんの肝は、Pages を使うなら DNS を手で組まず、Pages 側からドメインを足すこと ── これだけで、SSL を含めて大半が自動で片づきます。

公開の土台（Pages デプロイ）、API の置き場（Workers）、データの置き場（D1 / KV / R2）と合わせれば、個人開発のホスティングはひと通り Cloudflare で完結します。

ドメインを当て、HTTPS で公開し、解析まで入れた ── それでも 読まれない／登録に至らない なら、足りないのは技術ではなく言葉かもしれません。公開した後に効く「素通りされない書き方」を、個人開発者・インディー Web 作者・動画作者向けに WHY → HOW で 1 冊にまとめたのが、下記の本です。

#個人開発#Cloudflare#リファレンス