はじめに
サーバーがシンガポールにある場合、ハノイのユーザーはリクエストごとに往復で最大 50 ミリ秒待つ必要があります。米国のユーザーは最大 200 ミリ秒待つ必要があります。 CDN は、できるだけユーザーの近くにコンテンツを配置することで、この問題を解決します。
1.CDNとは何ですか?
CDN は、プロキシ サーバーのグローバルに分散されたネットワークであり、ユーザーに最も近い場所からコンテンツを提供します。
Không có CDN:
User (Hà Nội) ──── 200ms ────► Origin Server (US)
Có CDN:
User (Hà Nội) ──── 10ms ────► CDN Edge (Hà Nội)
│ cache miss
▼
CDN Edge ── 200ms ──► Origin Server (US)
│ cache result
▼
User (Hà Nội) ──── 10ms ────► CDN Edge (Hà Nội) ← Lần sau = 10ms!
1.1 CDN アーキテクチャ
Origin Server
│
┌──────────┼──────────┐
▼ ▼ ▼
┌────────┐ ┌────────┐ ┌────────┐
│Regional│ │Regional│ │Regional│
│ PoP │ │ PoP │ │ PoP │
│ (Asia) │ │ (EU) │ │ (US) │
└───┬────┘ └───┬────┘ └───┬────┘
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Edge │ │Edge │ │Edge │
│Servers│ │Servers│ │Servers│
└───────┘ └───────┘ └───────┘
▲ ▲ ▲
Users Users Users
2. プッシュ CDN とプル CDN の比較
2.1 プッシュ CDN
Origin Server ──push──► CDN Edge
Khi content thay đổi, origin chủ động push lên CDN
Flow:
1. Developer deploy new image
2. CI/CD pipeline push image to CDN
3. CDN distributes to all edges
4. User request → Edge server → Return immediately
| 利点 | デメリット |
|---|---|
| コンテンツはいつでも利用可能 | プッシュプロセスを管理する必要があります |
| 「最初のリクエスト」の遅延はありません | すべてのエッジでストレージを消費します |
| フルコントロール | コンテンツが大幅に変更されると複雑になる |
次の場合に最適: 小さな変更がほとんどない静的コンテンツ
2.2 プル CDN
User ──request──► CDN Edge
Edge: "Tôi không có content này"
Edge ──request──► Origin Server
Origin ──response──► Edge
Edge: cache content + return to user
Lần sau:
User ──request──► CDN Edge
Edge: "Tôi có rồi!" → Return from cache
| 利点 | デメリット |
|---|---|
| 自動、管理不要 | 最初のリクエストが遅い (キャッシュミス) |
| キャッシュ コンテンツのみが要求される | TTL 戦略が必要 |
| 簡単なセットアップ | キャッシュスタンピードのリスク |
最適な用途: 動的コンテンツ、高トラフィック
3. キャッシュの無効化戦略
3.1 TTL (生存時間)
CDN cache product image với TTL = 1 giờ
T=0: User request → Cache MISS → Fetch from origin → Cache 1 giờ
T=30m: User request → Cache HIT → Return cached
T=61m: Cache expired → Fetch from origin → Cache lại
Trade-off: TTL ngắn = fresh hơn nhưng nhiều origin hits
TTL dài = nhanh hơn nhưng content có thể cũ
3.2 キャッシュのパージ
CDN API: DELETE /cache?url=https://blog.xdev.asia/images/logo.png
→ Xóa content khỏi tất cả edge servers
Use case: Cập nhật logo, fix typo trong hình ảnh
3.3 キャッシュ無効化
Thay đổi URL khi content thay đổi:
Trước: /style.css
Sau: /style.css?v=2
Hoặc: /style.a1b2c3d4.css (hash trong filename)
→ CDN coi đây là content mới → fetch from origin
3.4 再検証中に失効する
Cache expired, nhưng:
1. Trả cached content ngay (stale)
2. Đồng thời fetch fresh content từ origin
3. Update cache khi origin respond
→ User luôn nhận response nhanh
→ Content cuối cùng sẽ fresh
4. エッジ コンピューティング
Traditional CDN:
Edge chỉ serve static files
Edge Computing:
Edge chạy code (logic) tại edge location
Ví dụ Cloudflare Workers:
- A/B testing tại edge
- Geolocation-based redirects
- Authentication tại edge
- Image resizing tại edge
- API response transformation
5. CDN プロバイダーの比較
| 特長 | クラウドフレア | AWS クラウドフロント | 早く |
|---|---|---|---|
| ポップ | 300+ | 450+ | 90+ |
| エッジ コンピューティング | 労働者 | ラムダ@エッジ | コンピューティング@エッジ |
| 無料利用枠 | 寛大 | 限定 | なし |
| 価格 | $ | $$ | $$$ |
| DDoS 保護 | 内蔵 | AWS シールド | 限定 |
| こんな用途に最適 | 一般、中小規模 | AWS エコシステム | パフォーマンス重視 |
6. CDN アンチパターン
| アンチパターン | 問題 | ソリューション |
|---|---|---|
| パーソナライズされたコンテンツをキャッシュする | ユーザー A がデータを参照 ユーザー B | キャッシュ制御: プライベート |
| API の TTL が長すぎます | データが古い | 短い TTL + 再検証中の失効 |
| API に CDN を使用しない | リモートの API が遅い | GET API をエッジでキャッシュする |
| すべての CDN | CDN 経由で POST/PUT/DELETE | GET リクエストのみの CDN |
概要
| コンセプト | 重要なポイント |
|---|---|
| CDN | ユーザーに最も近い場所からコンテンツを提供する |
| プッシュ vs プル | 静的場合はプッシュ、動的場合はプル |
| キャッシュの無効化 | TTL + パージ + キャッシュ無効化 |
| エッジコンピューティング | エッジでロジックを実行し、レイテンシーを削減 |
演習
-
CDN 戦略: 製品画像 (変更はほとんどありません)、製品価格 (頻繁に変更されます)、ユーザー プロファイル (パーソナライズされた) を考慮して、電子商取引サイトの CDN 戦略を設計します。
-
キャッシュの無効化: ブログ プラットフォームは、作成者が編集したらすぐに投稿を更新する必要があります。キャッシュ無効化戦略を設計します。
-
コストの見積もり: Web サイトは 1 日あたり 1,000 万ページビューあり、各ページは 2MB (500KB HTML + 1.5MB 画像) です。推定 CDN 帯域幅/月とコスト (CloudFront: $0.085/GB)。