CDN 完全指南

目錄

• 什麼是 CDN？
• CDN 運作原理
• CDN 架構組成
• 快取策略
• 常見 CDN 服務商
• CDN 配置實戰
• 使用情境
• 效能優化
• 安全功能
• 監控與除錯
• 最佳實踐
• 常見問題
• 總結

什麼是 CDN？

基本概念

CDN（Content Delivery Network） 是一個分散式的伺服器網路，將內容快取到靠近使用者的邊緣節點，減少延遲並加速內容傳遞。

傳統架構：
使用者 (台北) ──────────────────→ 源站伺服器 (美國)
                 延遲高、速度慢

CDN 架構：
使用者 (台北) ────→ 邊緣節點 (台北) ←── 源站伺服器 (美國)
                 延遲低、速度快        （首次請求時回源）

核心優勢

CDN vs 傳統架構

CDN 運作原理

請求流程

DNS 智能解析

CDN 通過 DNS 將使用者導向最佳節點：

使用者請求：cdn.example.com

DNS 解析過程：
1. 本地 DNS → 遞迴 DNS
2. 遞迴 DNS → CDN 權威 DNS
3. CDN 權威 DNS 根據：
   - 使用者 IP 地理位置
   - 節點健康狀態
   - 節點負載情況
   - 網路延遲
   返回最佳節點 IP

結果：
台北使用者 → 台北節點 IP
東京使用者 → 東京節點 IP

回源機制

# 回源觸發條件
回源情況:
  - 快取未命中 (Cache Miss)
  - 快取已過期 (Cache Expired)
  - 快取被清除 (Cache Purged)
  - 動態內容請求

# 回源方式
回源類型:
  直接回源: CDN → 源站
  多層回源: 邊緣節點 → 區域節點 → 源站
  協議回源: HTTP/HTTPS 協議跟隨

CDN 架構組成

核心組件

節點類型

PoP 節點（Point of Presence）

快取策略

快取控制標頭

# 源站回應標頭設定

# Cache-Control（最重要）
Cache-Control: public, max-age=31536000    # 公開快取，1年
Cache-Control: private, max-age=3600       # 私有快取，1小時
Cache-Control: no-cache                     # 每次需驗證
Cache-Control: no-store                     # 不快取

# Expires（舊版，Cache-Control 優先）
Expires: Thu, 01 Dec 2025 16:00:00 GMT

# ETag（驗證快取）
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

# Last-Modified（驗證快取）
Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT

快取策略對照表

CDN 快取層級

┌─────────────────────────────────────────────────────────────┐
│                     快取層級                                 │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  L1: 瀏覽器快取                                               │
│      ↓ (未命中)                                              │
│  L2: CDN 邊緣節點快取                                         │
│      ↓ (未命中)                                              │
│  L3: CDN 區域節點快取                                         │
│      ↓ (未命中)                                              │
│  L4: 源站快取 (Redis/Memcached)                              │
│      ↓ (未命中)                                              │
│  L5: 資料庫/儲存                                              │
│                                                             │
└─────────────────────────────────────────────────────────────┘

快取 Key 設計

# Nginx CDN 快取 Key 範例

# 基本：URL 路徑
proxy_cache_key "$scheme$request_method$host$request_uri";

# 包含查詢參數
proxy_cache_key "$scheme$host$uri$is_args$args";

# 忽略特定參數（追蹤參數）
set $cache_uri $request_uri;
if ($cache_uri ~ ^(.+)\?utm_) {
    set $cache_uri $1;
}
proxy_cache_key "$scheme$host$cache_uri";

# 區分裝置類型
proxy_cache_key "$scheme$host$uri$device_type";

快取清除（Purge）

# 清除單一 URL
curl -X PURGE https://cdn.example.com/path/to/file.js

# 清除目錄（萬用字元）
curl -X PURGE https://cdn.example.com/static/*

# 清除全部快取
curl -X PURGE https://cdn.example.com/*

# API 方式清除（以 Cloudflare 為例）
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
  -H "Authorization: Bearer {api_token}" \
  -H "Content-Type: application/json" \
  --data '{"files":["https://example.com/styles.css"]}'

常見 CDN 服務商

全球 CDN 服務商比較

亞太區域 CDN

選擇建議

你的需求是？
│
├─ 免費/低成本入門 → Cloudflare Free / Bunny CDN
│
├─ 使用 AWS 服務 → CloudFront
│
├─ 使用 Azure 服務 → Azure CDN
│
├─ 使用 GCP 服務 → Google Cloud CDN
│
├─ 需要中國大陸加速 → 阿里雲 CDN / 騰訊雲 CDN
│
├─ 高動態內容/API → Fastly
│
├─ 大型企業/媒體 → Akamai
│
└─ 高性價比 → Bunny CDN / KeyCDN

CDN 配置實戰

Cloudflare 配置

# DNS 設定（橘色雲朵開啟 CDN）
Type: A
Name: @
Content: 203.0.113.1
Proxy status: Proxied (橘色雲朵)

# Page Rules 快取規則
Rule 1:
  URL: *example.com/static/*
  設定:
    - Cache Level: Cache Everything
    - Edge Cache TTL: 1 month
    - Browser Cache TTL: 1 year

Rule 2:
  URL: *example.com/api/*
  設定:
    - Cache Level: Bypass
    - Disable Performance

AWS CloudFront 配置

# CloudFront Distribution 設定
Distribution:
  Origins:
    - DomainName: origin.example.com
      S3OriginConfig:
        OriginAccessIdentity: origin-access-identity/cloudfront/XXXXX

  DefaultCacheBehavior:
    ViewerProtocolPolicy: redirect-to-https
    CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6  # CachingOptimized
    Compress: true

  CacheBehaviors:
    - PathPattern: /api/*
      CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad  # CachingDisabled
    - PathPattern: /static/*
      CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6  # CachingOptimized
      TTL:
        DefaultTTL: 86400
        MaxTTL: 31536000

  PriceClass: PriceClass_All  # 全球節點

Nginx 作為 CDN 快取層

# nginx.conf - 反向代理快取配置

# 定義快取路徑
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=cdn_cache:100m
                 max_size=10g inactive=60m use_temp_path=off;

server {
    listen 80;
    server_name cdn.example.com;

    # 全局快取設定
    proxy_cache cdn_cache;
    proxy_cache_valid 200 302 1d;
    proxy_cache_valid 404 1m;
    proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
    proxy_cache_lock on;

    # 添加快取狀態標頭
    add_header X-Cache-Status $upstream_cache_status;

    # 靜態資源 - 長期快取
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
        proxy_pass http://origin_server;
        proxy_cache_valid 200 30d;
        add_header Cache-Control "public, max-age=2592000";
    }

    # API - 不快取
    location /api/ {
        proxy_pass http://origin_server;
        proxy_cache off;
        add_header Cache-Control "no-store";
    }

    # HTML - 短期快取
    location / {
        proxy_pass http://origin_server;
        proxy_cache_valid 200 1h;
        add_header Cache-Control "public, max-age=3600";
    }
}

源站配置（配合 CDN）

# 源站 Nginx 配置

server {
    listen 80;
    server_name origin.example.com;

    # 靜態資源（含 hash）- 永久快取
    location ~* \.[0-9a-f]{8,}\.(js|css)$ {
        expires max;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # 一般靜態資源
    location ~* \.(jpg|jpeg|png|gif|ico|svg|woff2?)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }

    # HTML 頁面
    location ~* \.html$ {
        expires 1h;
        add_header Cache-Control "public, max-age=3600, must-revalidate";
    }

    # API 路由
    location /api/ {
        add_header Cache-Control "no-store, no-cache, must-revalidate";
        proxy_pass http://backend;
    }
}

使用情境

1. 靜態網站加速

情境：部落格、文件網站、行銷頁面

架構：
┌────────────┐     ┌─────────────┐     ┌────────────┐
│   使用者    │ ──→ │   CDN 節點   │ ──→ │ S3/OSS 源站│
└────────────┘     └─────────────┘     └────────────┘
                        快取 HTML/CSS/JS/圖片

配置建議：
- HTML: max-age=3600 (1小時)
- CSS/JS (含hash): max-age=31536000 (1年)
- 圖片: max-age=2592000 (30天)

2. 動態網站 + 靜態資源分離

情境：電商網站、Web 應用

架構：
                    ┌─────────────┐
                    │   CDN 節點   │
                    └──────┬──────┘
                           │
              ┌────────────┴────────────┐
              ↓                         ↓
        /static/*                   其他請求
    ┌─────────────┐            ┌─────────────┐
    │  物件儲存    │            │  應用伺服器   │
    │  (S3/OSS)   │            │  (動態內容)  │
    └─────────────┘            └─────────────┘

配置：
- 靜態資源: cdn.example.com/static/
- 動態內容: example.com/api/（Bypass CDN 或短 TTL）

3. 影音串流

情境：影片網站、直播平台

架構：
┌────────────┐     ┌─────────────┐     ┌────────────┐
│   使用者    │ ──→ │   CDN 節點   │ ──→ │ 影片源站    │
└────────────┘     └─────────────┘     └────────────┘
                     HLS/DASH 分段
                     Adaptive Bitrate

技術要點：
- 支援 Range Request（分段下載）
- 支援 HLS (.m3u8, .ts) / DASH (.mpd)
- 自適應串流 (ABR)
- 預熱熱門影片

4. API 加速

情境：全球化 API 服務

架構：
                    ┌─────────────┐
                    │   CDN 節點   │
                    │  (邊緣運算)  │
                    └──────┬──────┘
                           │
              ┌────────────┴────────────┐
              ↓                         ↓
        可快取 API                  不可快取 API
    (GET /products)              (POST /orders)
    ┌─────────────┐              ┌─────────────┐
    │   快取返回   │              │  回源處理     │
    └─────────────┘              └─────────────┘

策略：
- GET 請求：根據內容動態設定快取時間
- POST/PUT/DELETE：Bypass CDN
- 使用 Vary 標頭區分不同回應

5. 軟體下載

情境：App 更新、遊戲下載、軟體分發

特點：
- 大檔案（GB 級別）
- 斷點續傳支援
- 版本管理
- 區域限制

配置：
- 支援 Range Request
- 長 TTL（版本化檔案）
- 預熱新版本到各節點

6. 全站加速（動態 + 靜態）

情境：需要全球低延遲的應用

技術：
┌────────────────────────────────────────────────────┐
│                    全站加速                         │
├────────────────────────────────────────────────────┤
│                                                    │
│  靜態內容加速：                                      │
│  - 邊緣快取                                         │
│  - 壓縮傳輸                                         │
│                                                    │
│  動態內容加速：                                      │
│  - 路由優化（避開擁塞路徑）                            │
│  - 連線複用（減少 TCP 握手）                          │
│  - 協議優化（HTTP/2、QUIC）                          │
│  - 邊緣運算（在邊緣執行邏輯）                          │
│                                                    │
└────────────────────────────────────────────────────┘

效能優化

壓縮設定

# Nginx Gzip 壓縮
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/xml
    application/xml+rss
    image/svg+xml;

# Brotli 壓縮（更高壓縮率）
brotli on;
brotli_comp_level 6;
brotli_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/xml;

HTTP/2 與 HTTP/3

# HTTP/2 設定
server {
    listen 443 ssl http2;

    # HTTP/2 Push（主動推送）
    http2_push /static/css/main.css;
    http2_push /static/js/app.js;
}

# HTTP/3 (QUIC) - Nginx 需要額外模組
server {
    listen 443 quic reuseport;
    listen 443 ssl http2;

    add_header Alt-Svc 'h3=":443"; ma=86400';
}

圖片優化

# CDN 圖片優化功能

自動格式轉換：
  - 瀏覽器支援 WebP → 自動轉換
  - 瀏覽器支援 AVIF → 自動轉換
  - 減少 30-50% 檔案大小

自動調整尺寸：
  URL: https://cdn.example.com/image.jpg?w=800&h=600&fit=cover

品質調整：
  URL: https://cdn.example.com/image.jpg?quality=80

範例（Cloudflare）：
  https://cdn.example.com/cdn-cgi/image/width=800,quality=80,format=auto/image.jpg

預載入與預連接

<!-- DNS 預解析 -->
<link rel="dns-prefetch" href="//cdn.example.com">

<!-- 預連接（DNS + TCP + TLS） -->
<link rel="preconnect" href="https://cdn.example.com">

<!-- 預載入關鍵資源 -->
<link rel="preload" href="https://cdn.example.com/critical.css" as="style">
<link rel="preload" href="https://cdn.example.com/hero.webp" as="image">

<!-- 預取次要頁面資源 -->
<link rel="prefetch" href="https://cdn.example.com/next-page.js">

安全功能

DDoS 防護

CDN DDoS 防護機制：

┌─────────────────────────────────────────────────────────┐
│                     攻擊流量                             │
│                        ↓                                │
│  ┌──────────────────────────────────────────────────┐   │
│  │              CDN 邊緣節點                         │   │
│  │  ┌─────────────────────────────────────────┐     │   │
│  │  │  Layer 3/4 防護                          │    │   │
│  │  │  - SYN Flood 防護                        │    │   │
│  │  │  - UDP Flood 防護                        │    │   │
│  │  │  - 流量清洗                               │    │   │
│  │  └─────────────────────────────────────────┘     │   │
│  │                    ↓                             │   │
│  │  ┌─────────────────────────────────────────┐     │   │
│  │  │  Layer 7 防護                            │     │   │
│  │  │  - HTTP Flood 防護                       │     │   │
│  │  │  - 速率限制                               │     │   │
│  │  │  - Bot 識別                              │     │   │
│  │  │  - WAF 規則                              │     │   │
│  │  └─────────────────────────────────────────┘     │   │
│  └──────────────────────────────────────────────────┘   │
│                        ↓                                │
│                   合法流量到達源站                         │
└─────────────────────────────────────────────────────────┘

WAF（Web Application Firewall）

# CDN WAF 規則範例

# OWASP 規則集
OWASP_Rules:
  - SQL Injection 防護
  - XSS 防護
  - CSRF 防護
  - 路徑遍歷防護

# 自訂規則
Custom_Rules:
  - name: "Block Bad Bots"
    condition:
      field: user-agent
      operator: contains
      value: ["curl", "wget", "python-requests"]
    action: block

  - name: "Rate Limit API"
    condition:
      field: uri
      operator: starts_with
      value: "/api/"
    action: rate_limit
    rate: 100/minute

SSL/TLS 設定

# CDN SSL 設定建議

SSL 配置：
  最低版本: TLS 1.2
  推薦版本: TLS 1.3

加密套件（優先順序）：
  1. TLS_AES_256_GCM_SHA384
  2. TLS_CHACHA20_POLY1305_SHA256
  3. TLS_AES_128_GCM_SHA256
  4. ECDHE-RSA-AES256-GCM-SHA384
  5. ECDHE-RSA-AES128-GCM-SHA256

HSTS:
  max-age: 31536000
  includeSubDomains: true
  preload: true

憑證：
  - 自動續約（Let's Encrypt / CDN 託管）
  - 支援 ECDSA + RSA 雙憑證

存取控制

# IP 白名單/黑名單
IP_Access:
  whitelist:
    - 203.0.113.0/24
  blacklist:
    - 192.0.2.1

# 地理位置限制
Geo_Restriction:
  type: whitelist
  countries: [TW, JP, US]

# Referer 防盜連
Hotlink_Protection:
  allowed_referers:
    - example.com
    - *.example.com
  allow_empty_referer: false

# Token 驗證（簽名 URL）
Signed_URL:
  expiry: 3600  # 1 小時
  secret: "your-secret-key"

監控與除錯

快取狀態判斷

# 檢查回應標頭
curl -I https://cdn.example.com/image.jpg

# 關鍵標頭
X-Cache: HIT          # 快取命中
X-Cache: MISS         # 快取未命中
X-Cache: EXPIRED      # 快取過期
X-Cache: BYPASS       # 繞過快取

CF-Cache-Status: HIT  # Cloudflare
X-Cache-Status: HIT   # Nginx

# 查看快取時間
Age: 3600             # 已快取 3600 秒
Cache-Control: max-age=86400

除錯工具

# 測試不同節點
# 指定使用特定 DNS 解析
curl --resolve cdn.example.com:443:203.0.113.1 https://cdn.example.com/test.js

# 查看完整請求過程
curl -v https://cdn.example.com/test.js

# 測試壓縮
curl -H "Accept-Encoding: gzip, br" -I https://cdn.example.com/test.js

# 測試回源
curl -H "Cache-Control: no-cache" https://cdn.example.com/test.js

# 清除快取測試
curl -X PURGE https://cdn.example.com/test.js

效能指標監控

# 關鍵監控指標

快取指標：
  - Cache Hit Ratio（快取命中率）: > 90% 為佳
  - Origin Requests（回源請求數）: 越低越好
  - Cache Bandwidth Saved（節省頻寬）

效能指標：
  - TTFB（首位元組時間）: < 200ms
  - Total Download Time: 依資源大小
  - Latency by Region: 各區域延遲

流量指標：
  - Requests per Second: 每秒請求數
  - Bandwidth: 頻寬使用量
  - Status Code Distribution: 狀態碼分布

安全指標：
  - Blocked Threats: 攔截的威脅數
  - DDoS Mitigation: DDoS 緩解情況
  - WAF Events: WAF 事件

日誌分析

// CDN 存取日誌範例
{
  "timestamp": "2024-12-05T10:30:00Z",
  "client_ip": "203.0.113.1",
  "client_country": "TW",
  "request_uri": "/static/app.js",
  "request_method": "GET",
  "status_code": 200,
  "bytes_sent": 125000,
  "cache_status": "HIT",
  "edge_location": "TPE",
  "ttfb_ms": 15,
  "total_time_ms": 45,
  "user_agent": "Mozilla/5.0...",
  "referer": "https://example.com/"
}

最佳實踐

1. 快取策略設計

# ✅ 正確做法
靜態資源策略:
  - 檔名包含 hash（app.a1b2c3.js）
  - 設定長期快取（1年）
  - 使用 immutable 標記

  Cache-Control: public, max-age=31536000, immutable

# ❌ 錯誤做法
  - 不帶版本的檔名（app.js）
  - 短期快取頻繁回源
  - 所有資源同一策略

2. 回源優化

# ✅ 減少回源的方法
優化措施:
  - 提高快取命中率（合理設定 TTL）
  - 使用多層快取架構
  - 預熱熱門內容
  - 設定 stale-while-revalidate

# 回源連線優化
  - 啟用 Keep-Alive
  - 減少源站回應時間
  - 設定合理的超時時間

3. 安全設定

# ✅ 安全檢查清單
必要設定:
  - [ ] 啟用 HTTPS（強制跳轉）
  - [ ] 設定 HSTS
  - [ ] 啟用 WAF
  - [ ] 設定存取控制（Referer/Token）
  - [ ] 隱藏源站 IP
  - [ ] 設定速率限制

源站保護:
  - [ ] 僅允許 CDN IP 回源
  - [ ] 驗證回源請求標頭
  - [ ] 設定源站防火牆規則

4. 版本管理

# ✅ 資源版本化策略

方式 1：檔名 Hash（推薦）
  app.a1b2c3d4.js
  styles.e5f6g7h8.css
  優點：快取最佳化，檔名變更即自動更新

方式 2：查詢參數
  app.js?v=1.2.3
  優點：簡單
  缺點：某些 CDN 可能忽略查詢參數

方式 3：目錄版本
  /v1.2.3/app.js
  優點：方便回滾
  缺點：管理複雜

5. 監控告警

# 關鍵告警設定
告警規則:
  - 快取命中率 < 80%
  - 回源錯誤率 > 1%
  - TTFB > 500ms
  - 5xx 錯誤 > 0.1%
  - 流量異常（突增/驟降）
  - SSL 憑證即將過期

常見問題

快取不生效？

檢查清單:
  1. 源站 Cache-Control 設定正確？
     curl -I https://origin.example.com/file.js

  2. CDN 規則是否覆蓋？
     檢查 CDN 快取規則設定

  3. 是否有 Set-Cookie？
     帶 Cookie 的回應可能不快取

  4. Vary 標頭是否合理？
     Vary: * 會導致不快取

  5. 請求是否帶 Authorization？
     認證請求通常不快取

快取更新不及時？

解決方案:
  1. 使用檔名 Hash
     - 修改內容 → 檔名改變 → 自動更新

  2. 主動清除快取
     - API 清除
     - 控制台清除

  3. 設定合理 TTL
     - 頻繁更新的內容用短 TTL

  4. 使用 stale-while-revalidate
     Cache-Control: max-age=60, stale-while-revalidate=3600

源站被直接存取？

防護措施:
  1. 設定源站防火牆
     - 僅允許 CDN IP 範圍

  2. 驗證請求標頭
     - 檢查 CDN 添加的特殊標頭

  3. 使用簽名驗證
     - CDN 與源站共享密鑰

  4. 不暴露源站 IP
     - 使用內網回源
     - DNS 不解析源站域名

CORS 問題？

# CDN 需要正確傳遞 CORS 標頭

源站設定:
  Access-Control-Allow-Origin: https://example.com
  Access-Control-Allow-Methods: GET, POST, OPTIONS
  Access-Control-Allow-Headers: Content-Type
  Vary: Origin  # 重要！不同 Origin 需要不同快取

CDN 設定:
  - 保留 Vary 標頭
  - 快取 Key 包含 Origin
  - 處理 OPTIONS 預檢請求

總結

CDN 核心概念

快取策略速查

CDN 選擇決策

免費入門 → Cloudflare Free
AWS 用戶 → CloudFront
Azure 用戶 → Azure CDN
GCP 用戶 → Google Cloud CDN
中國加速 → 阿里雲/騰訊雲 CDN
高性價比 → Bunny CDN
企業級 → Akamai

效能優化檢查清單

• 啟用 Gzip/Brotli 壓縮
• 啟用 HTTP/2 或 HTTP/3
• 設定正確的 Cache-Control
• 使用檔名 Hash 版本化
• 圖片格式優化（WebP/AVIF）
• 預載入關鍵資源
• 監控快取命中率

建立日期：2025-12-05 最後更新：2025-12-05