CDN 与 Cloudflare（结合本站实测）¶
这篇笔记从零理解 CDN，并用本站 personal-ai-vault.pages.dev 的真实探测数据佐证，
把抽象概念变成看得见的东西。
一、没有 CDN 时的问题¶
假设网站只放在一台服务器上（比如在美国），全球访客都得连到这一台：
graph TD
S[网站服务器<br/>美国·唯一一台]
BJ[北京访客] -->|跨太平洋| S
SH[上海访客] -->|跨太平洋| S
LDN[伦敦访客] -->|跨大西洋| S
TKO[东京访客] -->|跨太平洋| S三个问题：慢（物理距离远，数据往返耗时）、挤（流量全压一台）、脆（这台一挂全球都打不开）。
二、CDN 的核心思想：全球放"分店"¶
CDN（Content Delivery Network，内容分发网络）：把网站内容复制多份， 提前存到全球各地的服务器（边缘节点 / edge）上，让访客就近访问。
graph TD
O[源站<br/>你的原始内容]
O -.复制分发.-> N1[北京节点]
O -.复制分发.-> N2[上海节点]
O -.复制分发.-> N3[东京节点]
O -.复制分发.-> N4[伦敦节点]
BJ[北京访客] -->|就近·快| N1
SH[上海访客] -->|就近·快| N2
TKO[东京访客] -->|就近·快| N3
LDN[伦敦访客] -->|就近·快| N4比喻：没 CDN = 全国人都去北京总仓拿货；有 CDN = 每个城市都设了分仓，本地就能取。
三、缓存与回源（CDN 的核心机制）¶
- 源站（Origin）：内容的"老家"、原始出处。
- 缓存（Cache）：边缘节点上存的副本。
- 回源：节点上没有访客要的内容时，临时去源站取一份存下来。
graph TD
A[访客请求一个页面] --> B{边缘节点<br/>有缓存吗?}
B -->|有 · cache HIT| C[直接返回<br/>超快]
B -->|没有 · cache MISS| D[回源站取一份] --> E[存到本节点<br/>再返回]
E -.下次别人再要.-> C第一次访问某内容可能稍慢（要回源），之后大家都命中缓存，飞快。
四、本站实测：亲眼看到 CDN 在工作¶
用 curl -sI https://personal-ai-vault.pages.dev/ 探测响应头，得到这些证据：
| 观测项 | 实测值 | 说明 |
|---|---|---|
server |
cloudflare |
服务本站的是 Cloudflare 边缘节点，非直连源站 |
cf-ray |
...-LAX |
请求落在 洛杉矶(LAX) 节点——"就近接入"的铁证 |
| DNS 解析 | 172.66.44.158 等 |
域名指向 Cloudflare 的 IP（172.66.x.x 段），不是某台服务器 |
cache-control |
public, max-age=0, must-revalidate |
HTML 每次向节点验证更新，所以 push 后能很快看到新内容 |
cf-ray 的机场码
cf-ray 末尾三字母是最近国际机场码，代表你连到了哪个城市的节点。
不同地区的访客会看到不同的码（如 SJC/HKG/NRT/LAX），
因为每个人都被导向离自己最近的节点。
Anycast：同一个域名，全球就近应答¶
DNS 把 personal-ai-vault.pages.dev 解析到 Cloudflare 的 IP。这个 IP 用了 Anycast
技术——全球几百个节点共用同一个 IP，网络会自动把你路由到最近的那个：
graph LR
D[personal-ai-vault.pages.dev] --> IP[Cloudflare Anycast IP<br/>172.66.x.x]
IP -.你在美西.-> LAX[LAX 节点]
IP -.你在大陆.-> HKG[HKG / SJC 节点]
IP -.你在日本.-> NRT[NRT 节点]一次访问的分步耗时（实测）¶
curl 拆解一次访问的各阶段耗时，把"快/慢"量化：
| 阶段 | 实测 | 含义 |
|---|---|---|
| DNS 查询 | 0.005s | 域名解析（本地有缓存，极快） |
| TCP 连接 | 1.20s | 与节点建立连接 |
| SSL 握手 | 1.41s | HTTPS 加密握手（网址前那把 🔒） |
| 首字节 | 1.66s | 拿到网页第一个字节 |
节点离你越近，这些数字越小——这就是 CDN "快"的量化体现。
五、Cloudflare 在本站扮演的两个角色¶
Cloudflare 对本站身兼两职，别混淆：
graph TD
P[git push .md] --> B[Cloudflare Pages<br/>mkdocs build → HTML]
B -->|角色1: 源站+托管| SRC[存放 site/ 的 HTML]
SRC -->|自动分发| CDN[角色2: 全球 CDN<br/>几百个边缘节点缓存]
CDN -->|就近返回| U[访客拿到网页]- 角色 1 — Pages：存你
mkdocs build出的 HTML，充当源站 + 托管。 - 角色 2 — CDN：把 HTML 铺到全球边缘节点，访客就近取。
因为本站是纯静态（全是提前做好的 HTML/CSS/JS，无后端计算），内容不变， 可以放心全量缓存到每个节点——静态站与 CDN 是绝配，所以又快又稳又免费。
六、Cloudflare 不止是 CDN¶
它起家是 CDN，如今是"网站的门卫 + 加速 + 平台"。本站用到的：
| 功能 | 是什么 | 本站 |
|---|---|---|
| CDN | 全球加速缓存 | ✅ 自动 |
| Pages | 静态托管 + 自动构建 | ✅ |
| DNS | 域名解析 | ✅（Anycast） |
| SSL/TLS | 自动 HTTPS 加密 | ✅ |
| Access | 访问鉴权门 | ⏳ 待配 |
| DDoS 防护 | 挡恶意流量 | ✅ 自动 |
| Workers | 边缘节点跑代码 | 暂不用 |
小结¶
一句话
CDN 就是"把网站内容提前复制到全球各地的服务器，让每个访客就近拿，所以又快又稳"。
本站是纯静态 HTML，天生适合被 CDN 全量缓存；Cloudflare 一家把托管、CDN、HTTPS、
鉴权全办了，个人用免费。实测 cf-ray: ...-LAX、Anycast IP 172.66.x.x 就是它在工作的证据。