无服务器部署与 CI CD 自动化
11.3 CDN概念
Tip
再快的跑车（服务器），也跑不过光速的物理限制（延迟）。
1. 为什么要学这个?
你在北京部署了一台高性能服务器。 北京用户访问很快 (10ms)。 但是，你远在伦敦的表弟访问时，信号需要通过海底光缆横跨半个地球。 物理延迟：光速跑完这个距离加上路由转发，至少需要 300ms。 如果页面有 10 张图片，由于 HTTP 握手，这种延迟会被放大数倍。 结果：你表弟看到的是一张张慢慢刷出来的图片，像回到了拨号上网时代。
CDN (Content Delivery Network) 就是把你的网站"复印"无数份，撒在世界各地的"前置仓"里。
2. 核心概念：物流系统
1. 源站 (Origin)
这是你的总仓库（你的 Vercel Server 或 AWS S3）。 这里存着唯一的、最新的原始文件。
2. 边缘节点 (Edge Node)
这是你家楼下的快递柜。 全球有成千上万个这样的节点。
3. 缓存策略 (Caching)
- 首次访问 (Miss): 快递柜没货 -> 去总仓库取货 -> 放进柜子 -> 给用户。
- 后续访问 (Hit): 快递柜有货 -> 直接给用户 (只需 10ms)。
3. 解决方案 (HOW)
运作流程图
graph TD
User["伦敦用户"] -->|"请求 logo.png"| EdgeUK["CDN 节点 (伦敦)"]
EdgeUK --"命中 (Hit)"--> User
EdgeUK --"未命中 (Miss)"--> Origin["源站服务器 (北京)"]
Origin --"回源取货"--> EdgeUK
EdgeUK --"缓存文件"--> EdgeUK
style EdgeUK fill:#fff9c4,stroke:#fbc02d
style Origin fill:#c8e6c9,stroke:#2e7d32
避坑指南
| ✅ 推荐做法 (Do) | ❌ 禁忌 (Don't) |
|---|---|
| Hash 文件名 | main.8a7d9f.js (文件名自带版本号，CDN 可设置永久缓存) |
| 区分动静 | API 接口不要乱缓存 (除非你希望所有人都看到张三的个人资料) |
| 刷新缓存 | 如果非要用同名文件覆盖 (如 logo.png)，记得手动通过 API 刷新 CDN |
4. 真实案例
Story
一夜破产的视频网站
某初创公司在主页放了一个 50MB 的高清宣传视频，直接放在自己的 ECS 服务器上。 突然，这个视频在社交媒体火了。 几万人在同一时间点击播放。 结果 1：服务器带宽瞬间被打满，所有人都在转圈圈，网站瘫痪。 结果 2：云厂商按流量计费，第二天收到了 $10,000 的账单。 复盘：如果他们用了 CDN：
- 99.9% 的流量会被 CDN 扛住，源站毫无压力。
- CDN 的流量费通常是源站带宽费的 1/10。
Vibe 心法： CDN 是互联网的防波堤。它不仅让你快，更重要的是——它保护你的源站不被流量洪峰冲垮。甚至在遭受 DDoS 攻击时，CDN 也是你的第一道防线。
5. 本章小结
- 距离即延迟：物理距离是无法逾越的，只能靠 CDN 缩短。
- 缓存为王：离用户越近的缓存，价值越高。
- 默认开启：在 Vercel 这种现代平台上，CDN 是默认自带且免费的，你甚至感觉不到它的存在。