Webサイトが表示されるしくみ

この記事のゴール：ブラウザにURLを入力してからページが表示されるまでに、何がどの順で動くかを説明できるようになる
読む時間：5分
前提知識：前提知識なし

表示されるまでの流れ

図のテキストを読む

sequenceDiagram
    participant U as ブラウザ
    participant D as DNS
    participant S as サーバー
    U->>D: ドメイン名（example.com）のIPアドレスを問い合わせる
    D-->>U: IPアドレスを返す
    U->>S: IPアドレスあてにページをリクエストする
    S-->>U: HTMLを返す
    Note over U: HTMLを読み込んでページを表示する

用語	1文の説明
ブラウザ	Webからページを取得して表示するプログラムです。
ドメイン名	`example.com` のような、サイトの名前です。
DNS	ドメイン名をIPアドレスに変換する仕組みです。Cloudflareは「インターネットの電話帳」とたとえています。
サーバー	クライアントと呼ばれる利用者にサービスを提供する、ソフトウェアまたはハードウェアです。
HTML	Webページの構造を指定する記述言語（HyperText Markup Language）です。

ブラウザ、サーバー、HTMLの説明は、MDN Web Docsの用語集（日本語版）に基づいています。

EmDashのサイトでサーバーがすること

図のテキストを読む

flowchart LR
    U["ブラウザ"] -- "リクエスト" --> W["サーバー<br/>（AstroとEmDash）"]
    W -- "公開済みのエントリーを読む" --> DB["データベース"]
    W -- "HTMLを返す" --> U

Astroでアクセス時に描画するページは、リクエストがあるたびにサーバーで作られます。Astro公式は、この処理をする環境を「ランタイム（リクエスト時にページを生成するサーバー環境）」と説明しています。
EmDashのサイトは、サーバーがデータベースから公開済みのエントリーを読み、HTMLを作って返します。
Astroは、ブラウザで描画するよりもサーバーで描画することを重視する「サーバーファースト」の設計です。Astro公式は、これをPHPやWordPressなど従来のサーバーサイドのフレームワークと同じアプローチと説明しています。

ドメインとEmDashのサイト

Cloudflare Workersに最初にデプロイすると、サイトには workers.dev のURLが割り当てられます。
自分のドメインを使うには、そのドメインが、Workerと同じCloudflareアカウントで管理されている有効なドメインである必要があります。

AIに聞いてみよう

本サイトの補足 · AIへの依頼文

目的：自分のサイトのURLで、ページが表示されるまでの流れを確かめる

依頼文（コピーしてAIに貼り付けます）

Webページが表示されるまでの流れ（DNSでドメイン名をIPアドレスに変換し、
サーバーにリクエストしてHTMLを受け取る流れ）を、
次のURLを例にして、初心者向けに4ステップで説明してください。

URL：（ここに調べたいURLを書く）

条件：
・DNSの説明は、Cloudflareの解説「DNSとは？」（https://www.cloudflare.com/ja-jp/learning/dns/what-is-dns/）の範囲にする
・説明の各ステップに、参照先のページのどの記述にもとづくかを添える

回答する前に、参照先のページの現在の内容を確認してください。

自分で確認すること

AIの説明の4ステップが、Cloudflareの解説「DNSとは？」に書かれた流れ（ドメイン名 → IPアドレス → リクエスト → ページの受け取り）と一致している

根拠にした公式ページ

Cloudflareラーニングセンター「DNSとは？」：https://www.cloudflare.com/ja-jp/learning/dns/what-is-dns/
Astro公式「オンデマンドレンダリング」：https://docs.astro.build/ja/guides/on-demand-rendering/
Astro公式「Astroを選ぶ理由」：https://docs.astro.build/ja/concepts/why-astro/
EmDash公式「Cloudflareへのデプロイ」（本サイトの訳）：https://docs.emdashcms.com/deployment/cloudflare/
EmDash公式「アーキテクチャ」（本サイトの訳）：https://docs.emdashcms.com/concepts/architecture/
MDN Web Docsの用語集「ブラウザー」：https://developer.mozilla.org/ja/docs/Glossary/Browser
MDN Web Docsの用語集「サーバー」：https://developer.mozilla.org/ja/docs/Glossary/Server
MDN Web Docsの用語集「HTML」：https://developer.mozilla.org/ja/docs/Glossary/HTML

次に読むページ

CMSとは