サーバーとドメインを選ぶ|Cloudflare Pages と、ドメイン・DNS・ネームサーバーのしくみ

コース4 Webサイト編 4 / 6・読む時間 約8分・最終確認日

このレッスンの要点

  • 置き場所は Cloudflare Pages。GitHub とつなぐだけで、push のたびに公開されます。上限や料金は公式のページで確かめます
  • ドメインはレジストラで取ります。名前をサーバーの住所に置きかえるのが DNS で、その答えを持つのがネームサーバーです
  • example.com(apex)を Pages につなぐには、ネームサーバーを Cloudflare に移します

置き場所(サーバー)を選ぶ

このコースでは、サイトの置き場所に を使います。この講座のサイトも同じです。GitHub のリポジトリとつなぐと、push のたびに自動でビルドして公開してくれます。

見るところCloudflare Pages では
つなげるものGitHub か GitLab のリポジトリ(1つのプロジェクトに1つ)
公開のしかたpush すると自動。ブランチごとのプレビューもできる
上限と料金公式の上限のページで確かめる(変わることがあるため)
新しく始めるならCloudflare は、新しいプロジェクトには Workers をすすめている
(イラスト)このコースは、Pages の手順で進めます。Pages は、本番とプレビューを自動で分けてくれて、ネームサーバーを移さなくても www などのサブドメインをつなげます(Workers は、ネームサーバーが Cloudflare のドメインしかつなげません)。Workers を選ぶときは、Astro の公式の Cloudflare のページの手順を Claude Code に読んでもらいます。

ドメインを取る

はじめは、Pages が用意する プロジェクト名.pages.dev という住所でサイトが見られます。自分の名前の住所にしたいときは、(example.com のような名前)を、レジストラ(ドメインを登録する会社)で取ります。この講座のサイトは、国内のレンタルサーバーの会社(Xserver)で取りました。

1名前を考える(短く、読みやすく)
2レジストラで空いているか調べる
3料金・更新のしかた・ネームサーバーを変えられるかを確かめる
4取る
(イラスト)料金や更新のしかたはレジストラごとにちがいます。取る前に、そのレジストラの案内を読みます。

DNS とネームサーバー

ブラウザで example.com を開くと、まず「example.com はどこにあるの?」と調べます。この、名前をサーバーの住所(IP アドレス)に置きかえるしくみが です。答えを持っているサーバーを、ネームサーバーといいます。

1ブラウザ「example.com はどこ?」
2ネームサーバー(DNS)が答える
3ブラウザがそのサーバーからページを受け取る
(イラスト)ドメインを取る会社(レジストラ)と、ネームサーバーを動かす会社は、別でもかまいません。

DNS の設定は「レコード」という行の集まりです。サイトのための行のほかに、メールのための行(MX)や、持ち主の確認に使う行(TXT)もあります。レッスン6で Search Console に登録するときにも、TXT の行を使います。

example.com と www.example.com

いちばん短い形(example.com)を apex、前に名前の付いた形(www.example.com・blog.example.com など)をサブドメインといいます。Pages につなぐときは、この2つで条件がちがいます。

example.com(apex)www.example.com(サブドメイン)
Pages につなぐ条件ドメインが Cloudflare で管理されていること(ネームサーバーを Cloudflare に移す)移さなくても、CNAME の行(プロジェクト名.pages.dev を指す行)でつなげる
このコースでは本番の住所にするCloudflare の Bulk Redirects で、example.com に転送する
(イラスト)www で来た人も example.com に転送すれば、どちらで来た人も同じサイトに着きます。設定はレッスン5でします。Workers を選ぶときは、どちらもネームサーバーを Cloudflare に移す必要があります。
よくある勘違い

「ドメインを取った会社でしか、DNS の設定はできない」わけではありません

ドメインを取った会社の画面で、全部を設定し続ける
Pages に example.com をつなぐには、そのドメインが Cloudflare で管理されている必要があります
ドメインを取る会社と、DNS を動かす会社は別でもいい
ネームサーバーを Cloudflare に移せば、ドメインはそのまま、DNS の設定は Cloudflare でできます

やってみよう

  1. Cloudflare Pages の上限のページ(developers.cloudflare.com/pages/platform/limits/)を開いて、無料プランで足りるかを確かめます
  2. 使いたいドメインの名前を3つ考えて、レジストラ(ドメインを登録する会社)で空いているかを調べます
  3. 取る前に、そのレジストラで「ネームサーバーを変えられるか」「料金と更新のしかた」を確かめます
  4. 下の依頼文を Claude Code に送って、自分のサイトの場合の手順をメモにしてもらいます
公開の手順をメモにしてもらう依頼文(Claude Code に)このサイトを Cloudflare Pages で公開して、レジストラで取ったドメイン(example.com)をつなぎたい。ネームサーバーを Cloudflare に移して、example.com をつなぎ、www.example.com から example.com へ転送する手順を、Cloudflare の公式ドキュメントを読んで docs/公開の準備.md にまとめて。私が画面でやることと、Claude Code がやれることを分けて書いて。まだ何も変えないで。

確認問題

Q1. DNS がしていることは?
Q2. example.com(apex)を Cloudflare Pages につなぐには?
今日の練習

自分のサイトに付けたいドメインの名前を書き出し、「example.com の形」と「www の付いた形」の両方を書いてみましょう。

この記事の用語

コース4 Webサイト編の目次

  1. 1Webサイトができるまでの全体図
  2. 2どんなサイトにするか決める
  3. 3Claude Code でサイトを作る
  4. 4サーバーとドメインを選ぶ
  5. 5公開する
  6. 6検索に出るようにする