サーバーとドメインを選ぶ|Cloudflare Pages と、ドメイン・DNS・ネームサーバーのしくみ
このレッスンの要点
- 置き場所は Cloudflare Pages。GitHub とつなぐだけで、push のたびに公開されます。上限や料金は公式のページで確かめます
- ドメインはレジストラで取ります。名前をサーバーの住所に置きかえるのが DNS で、その答えを持つのがネームサーバーです
- example.com(apex)を Pages につなぐには、ネームサーバーを Cloudflare に移します
置き場所(サーバー)を選ぶ
このコースでは、サイトの置き場所に Webサイトを置いて公開できる Cloudflare のサービス。GitHub とつなぐと、push するたびに自動でビルドして公開します。
くわしく見る を使います。この講座のサイトも同じです。GitHub のリポジトリとつなぐと、push のたびに自動でビルドして公開してくれます。
| 見るところ | Cloudflare Pages では |
|---|---|
| つなげるもの | GitHub か GitLab のリポジトリ(1つのプロジェクトに1つ) |
| 公開のしかた | push すると自動。ブランチごとのプレビューもできる |
| 上限と料金 | 公式の上限のページで確かめる(変わることがあるため) |
| 新しく始めるなら | Cloudflare は、新しいプロジェクトには Workers をすすめている |
ドメインを取る
はじめは、Pages が用意する プロジェクト名.pages.dev という住所でサイトが見られます。自分の名前の住所にしたいときは、インターネット上のサイトの住所の名前(example.com など)。レジストラ(ドメインを登録する会社)で取ります。
くわしく見る(example.com のような名前)を、レジストラ(ドメインを登録する会社)で取ります。この講座のサイトは、国内のレンタルサーバーの会社(Xserver)で取りました。
DNS とネームサーバー
ブラウザで example.com を開くと、まず「example.com はどこにあるの?」と調べます。この、名前をサーバーの住所(IP アドレス)に置きかえるしくみが ドメインの名前を、サーバーの住所(IP アドレス)に置きかえるしくみ。答えを持っているサーバーをネームサーバーといいます。
くわしく見る です。答えを持っているサーバーを、ネームサーバーといいます。
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 に転送する |
「ドメインを取った会社でしか、DNS の設定はできない」わけではありません
やってみよう
- Cloudflare Pages の上限のページ(
developers.cloudflare.com/pages/platform/limits/)を開いて、無料プランで足りるかを確かめます - 使いたいドメインの名前を3つ考えて、レジストラ(ドメインを登録する会社)で空いているかを調べます
- 取る前に、そのレジストラで「ネームサーバーを変えられるか」「料金と更新のしかた」を確かめます
- 下の依頼文を Claude Code に送って、自分のサイトの場合の手順をメモにしてもらいます
確認問題
自分のサイトに付けたいドメインの名前を書き出し、「example.com の形」と「www の付いた形」の両方を書いてみましょう。
この記事の用語
コース4 Webサイト編の目次
- 1Webサイトができるまでの全体図✓ できた
- 2どんなサイトにするか決める✓ できた
- 3Claude Code でサイトを作る✓ できた
- 4サーバーとドメインを選ぶ✓ できた
- 5公開する✓ できた
- 6検索に出るようにする✓ できた