使用者（台北）  使用者（高雄）  使用者（東京）
     |              |              |
     v              v              v
  [ CDN 邊緣節點 — 靜態資源直接回應 ]     ← (3) CDN
     |
     v
  [ Load Balancer — 分配流量 ]            ← (2) Load Balancer
     |         |         |
     v         v         v
  Server A  Server B  Server C           ← (1) Horizontal Scaling
     |         |         |
     v         v         v
  [    Cache 層（Redis）   ]              ← (4) Caching
     |
     v
  [ Database ]

升級前：          升級後：
┌──────────┐     ┌──────────────┐
│ 4 CPU    │ →→→ │ 32 CPU       │
│ 8GB RAM  │     │ 128GB RAM    │
│ 500GB SSD│     │ 2TB NVMe SSD │
└──────────┘     └──────────────┘
   舊機器            新猛獸

擴展前：          擴展後：
┌──────────┐     ┌──────────┐ ┌──────────┐ ┌──────────┐
│ Server   │ →→→ │ Server A │ │ Server B │ │ Server C │
└──────────┘     └──────────┘ └──────────┘ └──────────┘
   一台扛            三台分著扛

所有請求
    |
    v
┌─────────────────┐
│  Load Balancer   │   ← 「你去 A，你去 B，你去 C」
└─────────────────┘
    |      |      |
    v      v      v
 Server  Server  Server
   A       B       C

請求 1 → Server A
請求 2 → Server B
請求 3 → Server C
請求 4 → Server A   ← 回到第一台，繼續輪
請求 5 → Server B
...

Server A: 正在處理 15 個請求
Server B: 正在處理 3 個請求   ← 新請求送這裡
Server C: 正在處理 10 個請求

使用者 IP: 1.2.3.4  → hash → 結果: A → 永遠去 Server A
使用者 IP: 5.6.7.8  → hash → 結果: B → 永遠去 Server B
Code language: CSS (css)

upstream backend {
    # 列出所有後端伺服器
    server 10.0.0.1:8080;    # Server A
    server 10.0.0.2:8080;    # Server B
    server 10.0.0.3:8080;    # Server C
}

server {
    listen 80;                           # 對外只開一個入口
    location / {
        proxy_pass http://backend;       # 把流量轉給上面那組伺服器
    }
}
Code language: PHP (php)

沒有 CDN：
東京使用者 → (海底電纜) → 美國主機 → 回傳圖片
延遲: 200ms+

有 CDN：
東京使用者 → 東京邊緣節點 → 直接回傳圖片
延遲: 20ms

第一次存取（Cache Miss）：
使用者 → CDN 邊緣節點 → 「我沒有這張圖」→ 回源站拿 → 存一份 → 回傳給使用者

第二次存取（Cache Hit）：
使用者 → CDN 邊緣節點 → 「我有！」→ 直接回傳

適合（靜態、不常變）：        不適合（動態、常變）：
✅ 圖片 (.jpg, .png, .webp)  ❌ 使用者個人資料
✅ CSS 樣式檔                 ❌ 購物車內容
✅ JavaScript 檔案            ❌ 即時聊天訊息
✅ 影片串流                   ❌ 股票報價
✅ 字型檔案
Code language: CSS (css)

<!-- 從 CDN 載入 jQuery（不是從自己的伺服器） -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

<!-- 從 CDN 載入字型 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC" rel="stylesheet">
Code language: HTML, XML (xml)

沒有快取：
請求 → 伺服器 → 查資料庫（50ms）→ 計算結果（20ms）→ 回傳
每次都要 70ms

有快取：
請求 → 伺服器 → 查快取（1ms）→ 有！→ 回傳
只要 1ms

使用者的瀏覽器
    ↓ [瀏覽器快取] ← 第 1 層：最快，直接不發請求

CDN 邊緣節點
    ↓ [CDN 快取]   ← 第 2 層：靜態資源

Load Balancer
    ↓
應用伺服器
    ↓ [應用層快取]  ← 第 3 層：Redis / Memcached

資料庫
      [查詢快取]    ← 第 4 層：資料庫自己的快取

HTTP/1.1 200 OK
Cache-Control: max-age=86400    ← 告訴瀏覽器「這個資源 24 小時內不用再問我」
Content-Type: image/jpeg
Code language: HTTP (http)

import redis

cache = redis.Redis(host='localhost', port=6379)  # 連線到 Redis

def get_product(product_id):
    # 第 1 步：先查快取
    cached = cache.get(f"product:{product_id}")    # 用 key 去查
    if cached:
        return json.loads(cached)                   # 有！直接回傳

    # 第 2 步：快取沒有，查資料庫
    product = db.query(f"SELECT * FROM products WHERE id = {product_id}")

    # 第 3 步：存進快取，下次就有了
    cache.set(f"product:{product_id}", json.dumps(product), ex=3600)  # ex=3600 表示 1 小時後過期

    return product
Code language: PHP (php)

時間線：
t=0   商品價格 = $100，快取也存了 $100
t=5   管理員把價格改成 $80（資料庫更新了）
t=10  使用者看到的還是 $100（因為快取沒更新）← 問題！

使用者想買一雙鞋
    |
    v
[CDN] → 商品圖片、CSS、JS 直接從邊緣節點回傳     → 省 80% 靜態請求
    |
    v
[Load Balancer] → 把動態請求分散到 5 台伺服器      → 每台只扛 1/5
    |
    v
[Server A~E] → 查商品資訊
    |
    v
[Redis Cache] → 快取裡有！直接回傳                  → 省 90% 資料庫查詢
    |（只有快取沒有的才到這步）
    v
[Database] → 只處理真正需要的查詢