~/VibeHandbook
無料 PDF

16 · 02

カスタムドメインとDNS

*.workers.dev*.vercel.appはテストには十分ですが、自分の名前が欲しくなります。流れは次のとおりです。

  1. ドメインを買う(Namecheap、Cloudflare Registrar、Porkbun のいずれか)。
  2. そのをホストに向ける。これはたいてい CNAMEA レコードを追加するか、ドメインのネームサーバーそのものを変更することを意味します。
  3. ホストのダッシュボードでドメインを追加し、SSL証明書(そのサイトが本当にあなたのものだと証明し、鍵マークと(ハイパーテキスト転送プロトコルの安全な暗号化版です)を有効にしてくれるデジタルの身分証です)を自動発行させる。

レコードが魔法のように感じられなくなるよう、手早いメンタルモデルを持ちましょう。Aレコードは名前をIPアドレスへ直接向けます。CNAMEは一つの名前を別の名前へ向けます(ホストのIPが知らぬ間に変わりうるときに便利です)。そしてネームサーバーはドメイン全体をプロバイダーに引き渡し、すべてのレコードを代わりに管理させます。たいていの現代のホストはCNAMEか完全なネームサーバー切り替えを好みます。SSL証明書とエッジルーティングを自分で管理したいからです。

訪問者のリクエストがたどる鎖全体と、あなたが設定した各部品がその中のどこに住んでいるかは、次のとおりです。

  訪問者が入力
  yourdomain.com
       │
       ▼
 ┌───────────┐  "yourdomain.comの   ┌──────────────┐
 │ ブラウザ  │── IPは?" ────────────▶│     DNS      │  ← 自分の A / CNAME
 │           │◀── IPはこちら ────────┤ (レジストラ) │     レコードがここを指す
 └─────┬─────┘                       └──────────────┘
       │  そのIPへHTTPSリクエスト
       ▼
 ┌───────────┐   ← SSL証明書がこのサイトが
 │  ホスト   │     本物だと証明
 │ (CF/Vercel)│
 └─────┬─────┘
       │  ルーティング
       ▼
 ┌───────────┐
 │  アプリ   │  ページを配信
 └───────────┘

DNSは初心者にとって最も混乱する部分です。その大半は専門用語と反映の遅延のせいです。AIに翻訳させましょう。こう尋ねます。「私のドメインはNamecheapで登録していて、Cloudflare Pagesでホストしています。どのレコードをどんな値で追加するか、そしてうまくいったかどう確認するかを正確に手取り足取り教えて」。それから、ブラウザを更新するだけでなく、自分でも手早くチェックして結果を確認しましょう。

# 世界が実際に見ているレコードを調べる
dig yourdomain.com
nslookup yourdomain.com

# 証明書が有効で期限切れでないか確認する
curl -I https://yourdomain.com

DNSの変更が反映されるまでには、数分から1日かかることがあり、その中で最大の嘘つきはあなた自身のブラウザのキャッシュです。インターネットの他の部分がとっくに更新された後も、平気で古い答えを見せ続けます。すぐにライブにならなくても、それは正常です。何かが壊れたと決めつける前に、携帯のモバイル回線で確認するか、オンラインの「DNS伝播」チェッカーを使ってみましょう。

オフラインでも読みたい?

本編まるごとを PDF または EPUB で無料ダウンロード。