CloudflareでWebサイトに独自ドメインを設定する

Cloudflareでは、ドメイン取得・DNS管理・Pagesへの紐付けをすべて一元管理できる。このハンズオンでは、実例として vibecodingnotes.com を使いながら、ドメイン取得から公開URLへの設定までを進める。

Cloudflare Pagesでサイトが公開済みであることを前提とする。

用語メモ：ドメインと DNS まわりの一般用語:

• ドメイン … Web サイトの住所になる名前（例：example.com、bbs.example.com）。ブラウザにこれを入れると、そのサイトにたどり着く。example.com 本体も、その前に名前を足した bbs.example.com も、どちらも「ドメイン」に含まれる
• URL（Uniform Resource Locator の略）… Web 上の住所の完全な書き方。https://blog.example.com/posts のように「プロトコル＋ドメイン＋ページのパス」でできていて、ドメインはその一部（「どのサイトか」の部分）。住所でたとえると、ドメイン＝東京都渋谷区恵比寿、URL＝そこの 1丁目1-1 ○○ビルまで（どの一点か）
• サブドメイン … あるドメインの先頭に名前を「.」で足して作る、下位のドメイン（例：example.com に対する blog.example.com・www.example.com）。足した blog の部分の名前で区別し、blog.example.com は「example.com のサブドメイン」と呼ぶ。それ自体も1つのドメインなので、1つのドメインからいくつでも作れて、別々のサイトに割り当てられる
• apex（エイペックス） … サブドメインの付かないドメイン本体（example.com や example.co.jp など。.com でも .co.jp でも考え方は同じ）。ルートドメイン／DNS では「ゾーンの頂点＝zone apex」とも。仕様上 apex には CNAME を付けられないため、扱いが分かれる
• IPアドレス（IP は Internet Protocol の略）… インターネット上のサーバーに割り振られた“番号の住所”（例：188.23.1.12）。機械同士はこの番号で通信する。設定画面で見かける数字の住所はこれ
• DNS（Domain Name System の略。最後の S は server ではなく system）… 人が覚えやすいドメインを、機械が使うIPアドレスに変換する仕組み。ドメインの“住所録”（example.com → 188.23.1.12 のように引く）
• ネームサーバー（NS）（NS は Name Server の略）… その住所録を管理しているサーバー。ネームサーバーを Cloudflare に変更 ＝ DNS の管理を Cloudflare に任せること
• ゾーン … 1ドメイン分の DNS を管理する単位。ここでの「1ドメイン」は apex（example.com）を指し、配下のサブドメイン（www.example.com・bbs.example.com など）も同じゾーンの中でまとめて管理される。「Cloudflare にゾーンとして追加」 ＝ そのドメインの DNS を Cloudflare で管理し始めること（Cloudflare 独自語ではなく一般用語）
• DNS レコード … 住所録（ゾーン）に書かれた1件1件の対応のこと。「この名前は → ここ」という1行で、用途ごとに種類がある（A＝IPアドレス、CNAME＝別名、MX＝メール、TXT＝認証用テキスト など）
• CNAME（Canonical Name＝正規名 の略）… その DNS レコードの一種で、「このドメイン名は別のドメイン名を見て」という“別名”。blog.example.com を xxx.pages.dev に CNAME ＝「blog はそっちを参照して」という意味

1. Cloudflare でドメインを取得する

1-1. ドメインを検索する

Cloudflareダッシュボード → 左メニュー Domains → Registrations → Buy domain

Registrations

検索窓にドメイン名を入力する。

例：vibecodingnotes.com

Suggested domain names

検索結果に表示されれば取得可能。

1-2. 購入する

検索結果の取得したいドメインの右の Confirm → 支払い情報（住所・カード）を入力して購入完了。

Payment option

Registrant information

• 価格はほぼ原価。更新時も同様
• WHOISプライバシーは無料
• 自動更新（Auto Renewal）がデフォルトで有効

1-3. 登録状態を確認する

購入完了後、CloudflareにDNSゾーンが自動作成される。ネームサーバーはCloudflare固定で、追加設定は不要。

2. 外部で取得したドメインを使う場合

他社レジストラなど Cloudflare 以外で取得済みのドメインも、Cloudflare のプロジェクトの公開URLに使える。ドメインを Cloudflare に移管する必要はない。ポイントは「Cloudflare にゾーンとして追加（ネームサーバーを Cloudflare に変更）するか／外部の DNS のままにするか」で、これは Pages か Workers か、サブドメインか apex かで変わる。

公開先	サブドメイン（例 blog.example.com）	apex（例 example.com）
Pages	外部 DNS のまま CNAME を xxx.pages.dev に向けるだけでOK（ゾーン化不要）。Cloudflare ゾーンなら自動	ゾーン化（NS 変更）が必要
Workers	ゾーン化（NS 変更）が必要・DNS は自動作成	ゾーン化が必要・DNS は自動作成

apex（example.com）はどちらも Cloudflare のゾーンが必要。一番手軽なのは Pages × サブドメイン（外部 DNS に CNAME 1 本）。逆に Workers は独自ドメインを使うなら必ずゾーン化（EmDash など Workers 系はこれ）。

2-1. ゾーン化して使う（Workers、および apex はこちら）

ドメインを Cloudflare に ゾーンとして追加し、現レジストラのネームサーバーを Cloudflare のものに変更する。これは「移管」ではなく DNS の管理を Cloudflare に移すだけ（登録は元のレジストラのまま・無料）。Cloudflare ダッシュボードのホーム → Add a domain から進め、案内に従ってネームサーバーを変更する。ゾーンが Active になれば、あとは「3. プロジェクトに独自ドメインを設定する」の手順で割り当てるだけで、DNS レコードは自動作成される。

ネームサーバーを変えると、そのドメインの DNS 全体が Cloudflare 管理になる。メールの MX など既存のレコードが引き継がれているか確認しておく。

2-2. 外部 DNS のまま使う（Pages × サブドメインのみ）

ドメインを Cloudflare に移さず、いま使っている DNS 事業者の管理画面で CNAME を 1 本足すだけで済む。「3. プロジェクトに独自ドメインを設定する」で blog.example.com を追加すると、向ける先（<プロジェクト名>.pages.dev）が表示されるので、それを自分の DNS に CNAME として登録する。

3. プロジェクトに独自ドメインを設定する

Cloudflare で管理しているドメイン（1 で取得、または 2-1 でゾーン化したもの）なら、Pages・Workers いずれも手順は同じ。

3-1. Custom domainsを開く

Compute → Workers & Pages → 対象プロジェクト（例：vibecoding） → Custom domains → Set up a custom domain

3-2. ドメインを入力して設定する

取得したドメインを入力する。

例：vibecodingnotes.com

Continue を進めると、Cloudflare管理のドメインなのでDNSレコードが自動設定される。（2-2 の「外部 DNS のまま」運用にする場合は、ここで表示される CNAME を自分の DNS に手動で追加する。）

Cloudflare will add the following DNS record(s) ...

数分で設定完了。手動でのDNS設定やSSL証明書の取得は不要。

Done!

3-3. 別プロジェクトにサブドメインを割り当てる

1つのドメインは、サブドメインごとに別々のプロジェクトへ割り当てられる。たとえば vibecodingnotes.com 本体はこのサイト、bbs.vibecodingnotes.com は掲示板アプリ、というように共存できる。サブドメインは1つのドメインからいくつでも作れる。

すでに Cloudflare で管理しているドメイン（1 で取得、または 2-1 でゾーン化したもの）なら、操作は 3-1・3-2 とまったく同じで、割り当て先のプロジェクトの Custom domains から行うだけ。

• 割り当てたいプロジェクト（例：BBS）を開く → Custom domains → Set up a custom domain
• ドメイン欄に サブドメインを含めて入力する（例：bbs.vibecodingnotes.com）
• Continue すると、ゾーンが Cloudflare 管理なので DNS レコードは自動作成され、SSL も自動発行される

外部 DNS のとき（2-2）と違い、Pages でも Workers でもサブドメインがそのまま使える（CNAME を手で張る必要はない）。ドメイン本体を別プロジェクトで使っていても、サブドメインの割り当ては独立して行える。

4. 動作確認

ブラウザで https://vibecodingnotes.com にアクセスし、以下を確認する。

• ページが表示されること
• アドレスバーのURLが https:// で始まっていること

補足

www あり／なしを統一する

www.vibecodingnotes.com も使いたい場合は、同じく Custom domains から追加する。

どちらかをメインにしてリダイレクトしたい場合は、Cloudflare の Redirect Rules が使える。Cloudflareダッシュボードのホーム画面でドメイン名（vibecodingnotes.com）をクリック → 左メニュー Rules → Overview → Create rule。

テンプレートが用意されており、目的に合ったものを選ぶだけで設定できる。

テンプレート名	用途
Redirect from WWW to root	www.vibecodingnotes.com → vibecodingnotes.com にリダイレクト
Redirect from root to WWW	vibecodingnotes.com → www.vibecodingnotes.com にリダイレクト

URLから .html が省略される（Pretty URLs）

Cloudflare Pages はデフォルトで Pretty URLs が有効になっており、.html なしのURLに自動リダイレクトする。たとえば /page.html にアクセスすると /page にリダイレクトされる。ダッシュボードにオン/オフの設定はなく、常に有効な動作。

HTMLファイル内のリンクは .html 付きのままにしておく。ローカルでHTMLファイルをブラウザで開いたときもリンクが動作するので。

再デプロイしても設定は維持される

GitHub ActionsでPagesにデプロイするたびに自動で反映される。ドメインの設定は一度だけでよい。

備忘録

• Cloudflare管理のドメインであれば、Custom domains設定時にDNSレコードが自動作成される
• SSL証明書も自動発行。数分で Active / SSL enabled になる
• www ありのURLを使いたい場合は別途 Custom domains に追加が必要
• ドメイン購入時の自動更新（Auto Renewal）はデフォルトで有効。不要な場合はオフにする