ボタンを押してから、画面が返ってくるまで

左のあなた（ブラウザ）から出たお願いが、右のデータまで往復して戻ってくる——これが1リクエストの流れです。各マスをクリックすると、その機械の解説へ飛べます（このあと1つずつ作っていきます）。

ポイントは2つの「囲い」：

• ネットワーク＝これらの機械をつなぐ土台。図の線はぜんぶネットワーク。
• セキュリティ＝あなたの手元（端末）以外を、まとめて守る囲い。

1. あなた（ブラウザ ※1）が「このページください」とお願いを出す
2. 画像や見た目の部品は、まず近くの CDN（※2） が持っていれば即返す（往復が短くて速い）
3. データが要るお願いは、入口（※3） が受け取り、空いているサーバへ振り分ける（同時に、あやしいお願いは門番が弾く）
4. フロントサーバ（※4） が画面の器を用意し、中身を バックエンド（※5） に頼む
5. バックエンドが「何を返すか」を考え、必要なデータを DBサーバ（※6） に取りに行く
6. よく使うデータは キャッシュ（※7） にあれば、DBまで行かずに即返す（近道）
7. 画像・動画など大きな塊は ストレージサーバ（※8） から出す
8. 集めたデータでバックが答えを組み立て、フロント経由であなたに返る → 画面が表示される

登場人物メモ（※の説明）:

• ※1 ブラウザ — あなたの手元の画面。お願いを出し、返ってきたものを表示する。この図では「フロント（前面）」の役
• ※2 CDN — 世界中に分散した“利用者の近くの倉庫”。変わらないもの（画像・CSS・JS）を配る係。無ければオリジンに取りに行く
• ※3 入口（ロードバランサ／WAF） — 混雑を捌く受付（振り分け）＋あやしいお願いを弾く門番
• ※4 フロントサーバ — 画面（見た目）を組み立てて返す係
• ※5 バックエンドサーバ — 「何を返すか」を考える頭脳。判断・計算・データ出し入れの指示
• ※6 DBサーバ — 表の形に整理されたデータの保管係。探す・並べるが得意
• ※7 キャッシュ — よく使う答えを手元に置く“メモ”。DBより速い（Redisなど）
• ※8 ストレージサーバ — 画像・動画・ファイルなど大きな塊の倉庫

基本は「ブラウザ→入口→フロント→バック→DB」の一本道。そこに、快適さのための脇役が足されます。

• CDN — “配信”を速く。近くの倉庫から静的なものを返す
• キャッシュ — “処理”を速く。よく使う答えを手元に置き、DBまで行かない
• 入口（ロードバランサ） — 混雑に強く。同時に来たお願いを複数のサーバへ振り分ける

CDNとキャッシュは名前が似ていますが、CDN＝配信の近道／キャッシュ＝処理の近道、と向きが違います。

• 混雑 — アクセスが集中。入口が複数サーバに分散するが、それでも溢れると「503（混んでいます）」
• 見つからない — そのページが無い →「404」
• 裏で失敗 — サーバの処理でエラー →「500」
• 遅い — 毎回DBまで行くと遅い → キャッシュ・CDNで近道を作る

どれも「どの機械で起きたか」を知っていると、原因の見当がつくようになります。