Vercel 国内访问优化指南：域名被墙、Cloudflare 中转与加速方案全解

Vercel 默认域名（*.vercel.app）在国内的访问体验一直是个痛点：DNS 解析慢、部分地区直接无法访问、图片/静态资源加载经常超时。这对于把项目部署在 Vercel 上的国内开发者来说，是必须解决的基础设施问题。本文基于大量实战验证，从被墙原因 → 最优加速方案 → 完整配置步骤 → 备选方案，给你一套系统性的国内访问优化方案。

一、Vercel 国内访问现状

先给一个客观现状总结，帮你判断：

1.1 *.vercel.app 域名在国内的表现

1.2 根本原因

1. Vercel 在中国大陆没有边缘节点

   • Vercel 的 CDN PoP 分布在北美、欧洲、亚太（新加坡/日本/香港等），中国大陆境内几乎没有自建节点
   • 用户请求被路由到最近的海外节点（通常是日本或香港），链路穿越运营商国际出口，延迟在 80-200ms 之间

2. vercel.app 域名被部分 DNS 污染

   • 部分省市的 DNS 解析器对 *.vercel.app 返回错误或不完整的 IP，导致 “域名解析失败”
   • 这不是 Vercel “故意” 被墙，而是域名/IP 段被某些网络环境的 DNS 策略波及

3. 国际出口带宽波动

   • 中国大陆的国际出口带宽在高峰期（晚高峰、促销日）明显拥堵，跨国请求延迟飙升
   • 视频/图片等大流量文件受影响最重

关键结论： *.vercel.app 在国内不是"完全不能用"，但体验不稳定（30% 的用户可能遇到间歇性故障）。对生产项目来说，必须做加速或换域名。

1.3 网络诊断工具与命令

在动手优化之前，先用系统性的诊断命令确认瓶颈在哪一层（DNS、网络、传输、应用），避免盲目调整。

DNS 诊断：dig 与 nslookup

# 查看 vercel.app 在本地 DNS 的解析结果
dig my-project.vercel.app +trace

# 指定使用 Google DNS（8.8.8.8）对比国内 DNS（如 223.5.5.5）
dig @8.8.8.8 my-project.vercel.app
dig @223.5.5.5 my-project.vercel.app

# Windows 用户用 nslookup
nslookup my-project.vercel.app 8.8.8.8
nslookup my-project.vercel.app 223.5.5.5

判断 DNS 污染的方法：如果国内 DNS（如 223.5.5.5、114.114.114.114）返回的 A 记录与海外 DNS（8.8.8.8、1.1.1.1）不一致，或返回的 IP 属于非 Vercel 网段，说明存在 DNS 污染或策略性劫持。这种情况自定义域名是最直接的解决方案。

路由追踪：traceroute / tracert / mtr

# Linux/macOS
traceroute my-project.vercel.app

# Windows
tracert my-project.vercel.app

# mtr（推荐，实时统计每一跳的丢包率和延迟）
mtr --report --report-cycles 100 my-project.vercel.app

重点关注第 8-15 跳：如果延迟在某一跳突然从 20ms 飙升到 200ms+，说明该节点位于国际出口或海外骨干网。如果最后几跳出现 * * *（超时），说明目标 IP 段在国内路由不可达。

HTTP 层诊断：curl -I 与 curl -w

# 查看完整的响应头信息，确认 CDN 状态、缓存行为
curl -I -s https://www.yourdomain.com

# 输出示例中关注：
# CF-Cache-Status: HIT / MISS / DYNAMIC
# Server: cloudflare
# X-Vercel-Cache: HIT / MISS / STALE

# 精确测量各阶段耗时
curl -w "\nDNS: %{time_namelookup}s\nConnect: %{time_connect}s\nSSL: %{time_appconnect}s\nTTFB: %{time_starttransfer}s\nTotal: %{time_total}s\n" \
  -o /dev/null -s https://www.yourdomain.com

网络质量测量：httping 与 tcping

# httping：基于 HTTP 的 ping，测量 Web 服务器的响应时间和可用性
httping -g https://www.yourdomain.com -c 20

# tcping：测试目标端口的 TCP 连通性和延迟
tcping www.yourdomain.com 443 -n 20

httping 比传统 ping 更贴近真实访问场景，因为它经过完整的 TCP 三次握手和 HTTP 请求。如果 tcping 延迟低但 httping 延迟高，说明问题出在应用层（如 Vercel Serverless 冷启动或数据库查询慢）。

判断问题层级的决策树

国内访问慢
  ├─ dig 返回异常 IP → DNS 层问题 → 换自定义域名 + 换 DNS 服务商
  ├─ traceroute 在某跳延迟飙升 → 网络层问题 → 加 CDN / 中转 / 换线路
  ├─ tcping 正常，httping 慢 → 应用层问题 → 优化 Serverless / 缓存 / 数据库
  └─ CF-Cache-Status: MISS → 缓存层问题 → 配 Cloudflare 缓存规则

建议每次优化前后都用同一组命令记录基线数据，方便对比效果。

二、最优方案：自定义域名 + Cloudflare 橙云代理

经过大量项目验证，“自定义域名 + Cloudflare DNS + 橙云代理” 是目前最稳定、成本最低、配置最简单的 Vercel 国内加速方案。

2.1 方案原理

用户浏览器 (中国)
    ↓
Cloudflare DNS (Anycast 节点遍布中国)
    ↓
Cloudflare 边缘节点 (北京/上海/广州等城市)
    ↓
Cloudflare 橙云代理 (Proxy 模式)
    ↓
Vercel 源站 (HKG / NRT / SIN 等)

核心优势：

1. 域名用你自己的（非 vercel.app）→ 避开 DNS 污染
2. DNS 解析走 Cloudflare 全球 Anycast → 解析快、稳定
3. Cloudflare Proxy 中转 → 流量先到 Cloudflare 中国合作节点（如北京/上海），再由 Cloudflare 内部网络转发到 Vercel 源站，避免用户直接跨运营商国际出口
4. Cloudflare CDN 缓存静态资源 → 图片/CSS/JS 等直接命中中国区 Cache，不再回源 Vercel

2.2 完整配置步骤

假设你已经在 Vercel 部署了项目 my-project，默认域名为 my-project.vercel.app。现在把 www.yourdomain.com 绑定上去。

Step 1：在 Vercel Dashboard 添加域名

1. 打开 Vercel Dashboard → 选择你的项目 → 点击 Settings → Domains
2. 在输入框中填入 www.yourdomain.com → 点击 Add
3. Vercel 会检查域名是否可用，最终提示你配置 CNAME 记录
4. 记下 Vercel 给出的目标域：

CNAME    www    cname.vercel-dns.com.

（有些项目也可能是 cname-china.vercel-dns.com.，根据项目 Region 决定）

Step 2：在域名服务商修改 NS 记录（方式 A：全托管给 Cloudflare）

推荐方式：把域名的 NS 记录完全托管到 Cloudflare

1. 去 Cloudflare 注册账号，点击 “Add Site” → 输入 yourdomain.com
2. Cloudflare 会扫描现有 DNS 记录，然后给你两个 NS（如 bill.ns.cloudflare.com 和 gail.ns.cloudflare.com）
3. 去你的域名注册商（如 Namecheap / Godaddy / 阿里云 / 腾讯云），把域名的 DNS 服务器改为 Cloudflare 提供的两个 NS
4. 等待 NS 生效（通常 5-30 分钟，TTL 取决于注册商）

Step 2b：或者在域名服务商添加 CNAME（方式 B：仅单条记录）

如果你不想改 NS，可以在现有 DNS 服务商直接添加一条记录：

类型：CNAME
主机：www
值：cname.vercel-dns.com.
TTL：自动/600

⚠️ 注意：这种方式 Cloudflare 的 Proxy 功能不可用（Proxy 只在全托管域名下生效），加速效果较弱。强烈建议用方式 A。

Step 3：在 Cloudflare DNS 面板添加记录并开启 Proxy

1. 域名全托管到 Cloudflare 后，进入 Cloudflare Dashboard → DNS → Records
2. 添加一条记录：

类型：CNAME
名称：www
目标：cname.vercel-dns.com
代理状态：已代理（橙色云朵 ☁️）
TTL：自动

3. 最关键：确保橙色云朵亮起 → 这就是 “橙云代理” 模式

Step 4：在 Vercel Dashboard 确认域名已验证

1. 回到 Vercel Dashboard → Settings → Domains
2. 等几分钟，Vercel 会自动检测到 DNS 记录，状态从 “Pending” 变为 “Valid”
3. 此时访问 https://www.yourdomain.com，应该能正常打开你的 Vercel 项目

Step 5：配置 Cloudflare SSL 加密模式

1. Cloudflare Dashboard → SSL/TLS → Overview
2. 选择加密模式：Full (strict) 或 Full
   • Full (strict)：Cloudflare 和 Vercel 之间强制 HTTPS，安全性最高
   • Full：Cloudflare 和 Vercel 之间也走 HTTPS，但不验证 Vercel 的证书链（更容易配通）
3. 如果配置后遇到 525 错误（SSL Handshake Failed），降级到 Full 模式

2.3 配置 Cloudflare 缓存规则（进一步提升速度）

Cloudflare 默认会缓存静态资源（如图片、JS、CSS），但不缓存 HTML 页面（因为 Vercel Serverless 页面可能包含动态内容）。如果你的站点以静态页面为主，可以做更激进的缓存：

规则 1：缓存静态文件（默认已开启）

在 Cloudflare Dashboard → Caching → Configuration → 确认 “Caching Level” 为 “Standard”。

规则 2：为纯静态页面添加 Page Rules（可选）

如果你有一些纯静态页面不需要 Vercel SSR（如 /about、/terms），可以添加一条 Page Rule：

URL：www.yourdomain.com/about*
设置：
  - Cache Level: Cache Everything
  - Edge Cache TTL: 1 小时（或更长）

这样 /about 页面会被 Cloudflare 缓存，用户访问时直接命中 Cloudflare 中国节点，不再回源 Vercel。

规则 3：图片/媒体文件缓存优化

如果你的项目里有大量图片，额外添加：

URL：www.yourdomain.com/_next/static/*
设置：
  - Cache Level: Cache Everything
  - Edge Cache TTL: 1 年（静态资源文件名含 hash，内容变更后 URL 会变）

URL：www.yourdomain.com/images/*
设置：
  - Cache Level: Cache Everything
  - Browser Cache TTL: 7 天
  - Edge Cache TTL: 7 天

2.4 验证加速效果

配置完成后，用以下工具验证：

方法 1：curl 测延迟

# 测试经 Cloudflare 代理后的域名
curl -w "@curl-format.txt" -o /dev/null -s https://www.yourdomain.com

# curl-format.txt 内容：
time_namelookup: %{time_namelookup}
time_connect: %{time_connect}
time_appconnect: %{time_appconnect}
time_pretransfer: %{time_pretransfer}
time_redirect: %{time_redirect}
time_starttransfer: %{time_starttransfer}
time_total: %{time_total}

正常结果（Cloudflare 代理后，从中国大陆发起）：

• time_namelookup: < 100ms（DNS 解析快）
• time_starttransfer: < 500ms（Cloudflare 中国有 PoP 的情况下）
• time_total: < 1s（纯 HTML 小页面）

方法 2：浏览器 DevTools

打开 Chrome DevTools → Network 面板 → 选择 Doc 类型 → 刷新页面：

• DNS Lookup 应 < 50ms
• SSL 应 < 100ms
• TTFB（第一字节时间）应 < 500ms（如果在 Cloudflare Cache Hit 状态下）

方法 3：第三方测速工具

• boce.com — 中国大陆多节点 ping/HTTP 测速
• 17ce.com — 国内三网测速
• GTmetrix / Pingdom — 全球节点测速

2.5 Cloudflare 高级优化配置

基础配置（自定义域名 + 橙云代理）完成后，如果你的项目对性能有更高要求，可以进一步启用 Cloudflare 的高级特性。

Cloudflare Workers 定制路由（基于地理位置的智能路由）

Cloudflare Workers 可以在边缘节点上运行 JavaScript/TypeScript 代码，实现更细粒度的流量调度：

// workers-site/index.js
export default {
  async fetch(request, env, ctx) {
    const country = request.cf.country;
    const url = new URL(request.url);

    // 中国大陆用户：优先命中 Tiered Cache，减少回源
    if (country === 'CN') {
      url.hostname = 'cn-origin.yourdomain.com';
      const modifiedRequest = new Request(url, request);
      return fetch(modifiedRequest, {
        cf: { cacheTtl: 3600, cacheEverything: true }
      });
    }

    // 其他地区：直接回源 Vercel
    return fetch(request);
  }
};

通过 Workers 可以实现：

• A/B 测试：按地区分流到不同版本
• 灰度发布：中国大陆用户先体验新版本
• 故障转移：Vercel 源站返回 5xx 时自动切换到备用源

Argo Smart Routing 的性价比分析

Argo 是 Cloudflare 的付费智能路由功能（$5/月 + $0.10/GB），它通过 Cloudflare 的私有骨干网传输数据，绕过公共互联网的拥塞节点。

实测数据显示，Argo 对中国大陆到 Vercel（日本/新加坡节点）的路由改善明显，因为可以避免国际出口拥塞。但如果你的 Cloudflare 已经命中中国节点缓存（Cache HIT），Argo 的作用会减小。

Cloudflare 中国网络的 ICP 备案要求与节点分布

Cloudflare 在中国大陆没有直接运营的 CDN 节点（受 ICP 备案政策限制），但通过与国内运营商的合作，Cloudflare 在中国大陆拥有以下接入点：

• 北京（电信/联通/移动）
• 上海（电信/联通/移动）
• 广州（电信/联通/移动）
• 成都、杭州、武汉 等二线城市逐步覆盖

关键区别：这些节点仅提供缓存服务，不处理未缓存的动态请求（动态请求仍需回源到海外）。此外，Cloudflare 中国网络不要求 ICP 备案即可使用基础 CDN 功能（与阿里云/腾讯云 CDN 不同）。但如果你要在中国大陆境内架设源站服务器，则必须进行 ICP 备案。

Cloudflare CDN 的 Tiered Cache 配置

Tiered Cache 允许 Cloudflare 边缘节点之间共享缓存，减少回源次数：

1. Cloudflare Dashboard → Caching → Tiered Cache
2. 启用 Tiered Cache Topology
3. 选择拓扑：Generic Global Topology（通用全球）或 Cloudflare China Network（如果可用）

对于中国大陆用户，Tiered Cache 的工作原理是：如果上海节点没有缓存，它会先向香港或新加坡的"上层缓存"请求，而不是直接回源 Vercel。这样减少了跨国回源次数，提升命中率。

Always Online 与 Automatic Rewrites

• Always Online：当 Vercel 源站完全不可用时，Cloudflare 可以展示网站的静态缓存副本（基于 Internet Archive 抓取的版本或 Cloudflare 自己缓存的版本）。在 Cloudflare Dashboard → Caching → Configuration 中开启。
• Automatic Rewrites：Cloudflare 自动将 HTML 中的 http:// 链接重写为 https://，防止混合内容警告。在 Cloudflare Dashboard → SSL/TLS → Edge Certificates 中开启 “Always Use HTTPS” 即可。

两个功能都是自动的、零配置，建议所有项目默认开启。

三、进阶方案：前端分离 + API 回源

如果你的流量极大（日活数万以上），或者对首屏速度有极致要求，可以考虑分离架构。

3.1 架构思路

用户 (中国)
    ↓
Cloudflare / 阿里云 CDN / 腾讯云 CDN
    ↓ 绝大多数 HTTP 请求
静态站点（HTML/CSS/JS/图片，托管在 Cloudflare Pages / R2 / 阿里云 OSS）
    ↓ 少量 API 请求
Vercel Serverless（Next.js API Routes / Edge Functions）
    ↓ 大部分业务没变化
Postgres / Redis / 外部数据库

核心思路：

• 前端 HTML/CSS/JS：托管在中国访问更快的平台（如 Cloudflare Pages、R2 + 中国 CDN、阿里云 OSS）
• API 请求：仍然回到 Vercel（因为 API 调用量相对少，且 Vercel Edge 适合轻量逻辑）
• 数据库：放在海外（如 Neon、Supabase），API 走海外链路但可以接受

3.2 适用场景

• 大型内容站（博客、新闻、电商前端）
• 对 SEO 页面加载速度要求极高（Core Web Vitals 需要 LCP < 2.5s）
• 已有中国 CDN 资源或预算充足

3.3 Next.js 的实现方式

在 Next.js 中，可以配置 assetPrefix 将静态资源（_next/static/*）重定向到 CDN：

// next.config.js
const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  assetPrefix: isProd ? 'https://cdn.yourdomain.com' : undefined,
  images: {
    domains: ['cdn.yourdomain.com'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.yourdomain.com',
      },
    ],
  },
};

步骤：

1. 构建 Next.js 项目：npm run build
2. 把 _next/static 目录上传到 Cloudflare R2 / 阿里云 OSS / AWS S3
3. 配置 CDN 域名 cdn.yourdomain.com 加速这件存储桶
4. Next.js 渲染 HTML 时自动引用 cdn.yourdomain.com/_next/static/... 的资源
5. API 请求仍走 www.yourdomain.com/api/... → Vercel Serverless

3.4 多区域部署策略

对于用户遍布全球、且中国大陆访问量占比高的项目，单一架构往往无法满足所有地区的需求。多区域部署是终极解决方案。

Vercel + Cloudflare 的全球分布架构设计

                    用户请求
                       │
          ┌────────────┼────────────┐
          ▼            ▼            ▼
    ┌─────────┐  ┌─────────┐  ┌─────────┐
    │ 中国大陆  │  │   海外   │  │  其他地区 │
    │  用户   │  │  用户   │  │  用户   │
    └────┬────┘  └────┬────┘  └────┬────┘
         │            │            │
         ▼            ▼            ▼
    ┌─────────┐  ┌─────────┐  ┌─────────┐
    │ Cloudflare│  │ Cloudflare│  │ Vercel  │
    │ 中国节点  │  │ 海外节点  │  │ 边缘节点  │
    └────┬────┘  └────┬────┘  └────┬────┘
         │            │            │
         ▼            ▼            ▼
    ┌─────────┐  ┌─────────┐  ┌─────────┐
    │ 阿里云/  │  │ Cloudflare│  │ Vercel  │
    │ 腾讯云   │  │  Pages   │  │ 源站    │
    │ Functions│  │ / Workers│  │ (HKG)   │
    └─────────┘  └─────────┘  └─────────┘

中国大陆镜像站的搭建（使用阿里云/腾讯云 Functions 作为 fallback）

以阿里云函数计算（FC）为例，将 Next.js 项目打包为镜像站：

# 1. 构建 Next.js 为静态导出
# next.config.js
module.exports = {
  output: 'export',
  distDir: 'dist',
};

npm run build

# 2. 将 dist 目录上传到阿里云 OSS
ossutil cp -r dist/ oss://your-cn-bucket/

# 3. 配置阿里云 CDN 加速域名（需 ICP 备案）
# 创建 CDN 域名 cn.yourdomain.com，源站指向 OSS Bucket

对于需要 SSR 的页面，使用阿里云函数计算 FC 运行 Next.js：

# serverless.yml（Serverless Devs 框架）
service:
  name: nextjs-cn-mirror
  description: "Next.js 中国大陆镜像"

provider:
  name: aliyun
  runtime: nodejs18

functions:
  nextjs:
    handler: index.handler
    codeUri: ./.next/standalone
    memorySize: 1024
    timeout: 30

GeoDNS 配置（国内用户解析到国内节点、海外用户解析到 Vercel）

使用 Cloudflare DNS 的地理位置路由功能（需要 Cloudflare Pro 或配合第三方 DNS）：

# 中国大陆用户（通过 Cloudflare 的 Geo Steering 或第三方 GeoDNS）
A     www     123.45.67.89    (国内 CDN / 阿里云)

# 海外用户
CNAME www     cname.vercel-dns.com    (Vercel 源站)

如果不使用 Cloudflare Pro，可以用 DNSPod（腾讯云）的线路解析功能：

这样中国大陆用户解析到阿里云/腾讯云，海外用户解析到 Vercel，实现无感知的智能分流。

多区域数据同步策略

多区域部署最大的挑战是数据一致性。以下是常见方案：

方案 A：数据库主从（只读副本）

主库（海外，如 Supabase / Neon）
  ├── 只读副本 1：新加坡
  ├── 只读副本 2：日本
  └── 只读副本 3：香港（中国大陆用户读取）

中国大陆镜像站只读，写操作通过 API 回源到 Vercel → 主库。适合内容型站点（博客、新闻）。

方案 B：双写方案

用户写请求
  ├── 中国大陆用户 → 阿里云 RDS（主库）
  └── 海外用户 → Neon / Supabase（主库）
         ↓
    双向同步（通过 CDC 或应用层双写）

适合对写延迟敏感的应用（如电商订单、用户评论）。实现复杂度高，需要处理冲突（Last-Write-Wins 或向量时钟）。

方案 C：无状态架构（推荐）

将状态完全外置到独立服务：

• 用户数据：Clerk / Auth0（全球分布的身份服务）
• 内容数据：Contentful / Sanity（CDN 分发的 CMS）
• 配置数据：Redis（Upstash Redis 支持全球 Edge）

这样每个区域都是无状态的，无需处理数据同步问题。

四、其他备选方案

4.1 Cloudflare Pages 替代 Vercel 前端

如果你的项目不是 Next.js（比如 Vue、Astro、纯静态站），可以考虑前端直接部署到 Cloudflare Pages，API 用 Cloudflare Workers：

如果你不需要 Next.js 的高级特性，纯 Cloudflare 栈在国内更快更便宜。

4.2 阿里云/腾讯云静态托管

如果你的用户 100% 在中国大陆，且管理员愿意维护中国云厂商环境：

• 阿里云 OSS + CDN：绑定自定义域名、配 HTTPS，静态资源极致加速
• 腾讯云 COS + CDN：同阿里云
• 腾讯云 Serverless Cloud Function：可以跑 Next.js / Node，但冷启动比 Vercel 差

缺点：需要备案（ICP）、操作界面不如 Vercel 友好、Serverless 生态不如 Vercel 成熟。

4.3 Vercel Edge + 地理位置路由

Vercel Edge Middleware 可以读取用户地理位置（通过 Cloudflare/Vercel 边缘节点的 GeoIP），然后根据地区做不同路由：

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const country = request.geo?.country || 'US';

  // 中国大陆用户：重定向到 Cloudflare Pages 镜像站
  if (country === 'CN') {
    return NextResponse.rewrite(new URL('https://cn-mirror.yourdomain.com' + request.nextUrl.pathname, request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

这样做的好处：全球用户走 Vercel，中国大陆用户走镜像站。但工程量较大，适合有专门的工程团队的项目。

4.4 备案与合规考量

在中国大陆运营网站，备案与数据合规是不可回避的问题。以下是 Vercel 项目在此方面的实际影响与应对策略。

ICP 备案对 Vercel 项目的影响（何时需要备案）

ICP 备案（Internet Content Provider）是中国工信部对所有在中国境内提供信息服务的主机的要求。与 Vercel 项目相关的备案触发条件：

实用建议：如果你的项目绝大部分用户在中国大陆，且涉及商业运营，建议尽早完成 ICP 备案。备案后可使用阿里云/腾讯云的全套 CDN 和 Serverless 资源，访问速度提升显著。

使用国内 CDN 的备案要求对比

如果已经持有备案域名，阿里云/腾讯云 CDN 在中国大陆的性能优于 Cloudflare 免费版。但如果未备案，Cloudflare 是唯一不需要备案即可享受中国大陆 CDN 加速的方案。

GDPR 与数据驻留的法律考量

如果你的用户包含欧盟居民，需要关注 GDPR（通用数据保护条例）的数据驻留要求：

• Vercel 默认将数据存储在美国（部分地区可选欧盟节点）
• Cloudflare 的数据处理协议（DPA）已涵盖 GDPR 合规
• 用户个人信息（邮箱、IP 地址、Cookie）的存储和处理需要明确的法律依据

建议在隐私政策中明确说明：

1. 数据可能通过 Cloudflare 全球网络传输
2. 服务器可能位于海外（美国/新加坡/日本）
3. 用户享有 GDPR 赋予的数据删除和导出权利

跨境数据传输的合规建议

中国《数据安全法》和《个人信息保护法》（PIPL）对跨境数据传输有明确要求：

对于 Vercel 项目：

• 方案 A（推荐）：将用户个人数据存储在境内（阿里云/腾讯云数据库），匿名统计类数据可出境到 Vercel Analytics
• 方案 B：在隐私政策中明确告知数据出境，取得用户单独同意（符合 PIPL 要求）
• 方案 C：使用 Vercel 的 Edge Config 或 Cloudflare KV 存储非敏感配置数据，避免个人数据跨境

五、常见问题排查

配置域名后访问提示 “404 Not Found”

原因：Vercel 项目中没有 www.yourdomain.com 的域名白名单，或者 DNS 记录还没生效。

排查步骤：

1. 确认 Vercel Dashboard → Domains 中 www.yourdomain.com 显示 “Valid”（不是 Pending）
2. DNS 记录生效可能需要 5-30 分钟，用 dig www.yourdomain.com 检查是否解析到 Cloudflare IP（如 104.21.x.x、172.67.x.x）
3. 如果是新域名，检查是否在 Vercel 中设置了 Redirect to www 或 Redirect to non-www，导致跳转死循环

Cloudflare 显示 “Error 525: SSL Handshake Failed”

原因：Cloudflare 和 Vercel 之间的 HTTPS 握手失败，通常是因为 Vercel 默认启用了强制 HTTPS，但 Cloudflare 的 SSL 模式不匹配。

修复：

1. Cloudflare Dashboard → SSL/TLS → Overview → 将加密模式从 “Full (strict)” 改为 “Full”
2. 如果不行，临时改为 “Flexible”（不推荐长期使用，因为 Cloudflare 和 Vercel 之间会是 HTTP）
3. 等 5 分钟后刷新测试

网站图片/静态资源仍然加载很慢

原因：Cloudflare 没有缓存这些资源，每次都回源到 Vercel。

排查步骤：

1. Chrome DevTools → Network → 点击一张慢的图片 → Headers → 查看 CF-Cache-Status
   • HIT：命中 Cloudflare 缓存 ✓
   • MISS：未命中，回源 Vercel ✗（需要优化缓存规则）
   • DYNAMIC：Cloudflare 不缓存这类内容 ✗
2. 在 Cloudflare → Caching → Configuration → 确认 “Caching Level” 是 “Standard”
3. 如果图片在 _next/static/*，确认 URL 匹配规则正确
4. 尝试添加 Cache Rules（见上方 Step 3）

用户反馈部分地区仍然打不开

原因：Cloudflare 在中国大陆的节点并非所有运营商全覆盖，极少数用户仍可能走海外 PoP。

排查：

1. 让用户提供具体城市和运营商（电信/联通/移动）
2. 用 boce.com 从该地区模拟测试
3. 如果是大规模问题，考虑用 阿里云 DCDN（全站加速）替代 Cloudflare，它在中国大陆节点覆盖更好

Vercel 提示 “This domain is already in use”

原因：域名可能绑在其他 Vercel 账户上，或者之前的域名链接还没有及时释放。

修复：

1. 检查 Vercel Dashboard 中其他项目是否已经使用了这个域名
2. 如果域名是从其他账户转移过来的，联系 Vercel 客服（support@vercel.com）请求释放
3. 临时使用子域名（如 staging.yourdomain.com）测试

Cloudflare 返回 521 / 522 / 523 错误排查

这三个错误都与 Cloudflare 和源站（Vercel）之间的连接有关：

通用修复步骤：

1. 暂停 Cloudflare 代理（灰色云朵）直接访问 Vercel 默认域名，确认源站是否正常
2. 检查 Cloudflare Dashboard → Analytics → Security Events，确认没有被防火墙拦截
3. 查看 Vercel Dashboard → Monitoring，检查 Functions Errors 和 5xx 错误率
4. 对于 522，尝试在 Cloudflare → Speed → Optimization 中关闭 “Auto Minify” 和 “Rocket Loader”，测试兼容性

Vercel Edge Function 在国内的表现差异

Vercel Edge Function 在 Cloudflare 橙云代理下的行为与直接访问有差异，常见问题包括：

现象 1：Edge Function 返回的 Header 被 Cloudflare 修改

• Cloudflare 会覆盖部分响应头（如 Server、CF-Cache-Status、CF-Ray）
• 如果你依赖自定义 Header 做前端判断，需要在 Cloudflare → Rules → Transform Rules 中配置保留

现象 2：Edge Function 的地理定位（request.geo）不准确

• 经过 Cloudflare 代理后，Vercel Edge Function 看到的 CF-Connecting-IP 是 Cloudflare 的边缘节点 IP，而非用户真实 IP
• 解决：在 Edge Function 中读取 CF-IPCountry Header（Cloudflare 注入的用户国家），而非 request.geo.country

// middleware.ts
export function middleware(request: NextRequest) {
  // Cloudflare 代理后，用 CF-IPCountry 获取真实用户国家
  const country = request.headers.get('cf-ipcountry') || request.geo?.country || 'US';

  if (country === 'CN') {
    // 中国大陆用户逻辑
  }
}

现象 3：Edge Function 冷启动在国内更慢

• 经 Cloudflare 代理后，请求到 Vercel Edge Function 的路径变长
• 解决方案：增加 Edge Function 的预热频率（如用 UptimeRobot 定时 ping），或改用 Cloudflare Workers 替代部分轻量逻辑

微信小程序 / H5 内嵌 Vercel 链接的特殊问题

在微信生态（小程序、公众号 H5）中访问 Vercel 部署的站点，会碰到一些特有的问题：

问题 1：微信内置浏览器对 vercel.app 域名屏蔽

• 微信公众号菜单、小程序 web-view 组件中，直接访问 *.vercel.app 可能被微信安全策略拦截
• 解决：必须使用自定义域名（如 www.yourdomain.com），并通过微信的 “业务域名” 白名单校验

问题 2：微信小程序 web-view 要求业务域名配置

• 登录微信公众平台 → 开发 → 开发管理 → 业务域名 → 添加你的域名
• 需要下载微信提供的校验文件放到 Vercel 项目的 public/ 目录下，重新部署
• Cloudflare 代理不影响此校验，只要域名解析正确即可

问题 3：H5 页面被微信缓存

• 微信内置浏览器对 HTML 页面有 aggressive 缓存
• 解决：在 Cloudflare 规则中添加 Cache-Control: no-cache, no-store, must-revalidate，或在 URL 后加随机参数 ?t=123456 强制刷新

问题 4：HTTPS 证书链不完整导致微信报错

• 微信对 HTTPS 证书的校验比浏览器更严格
• 解决：在 Cloudflare → SSL/TLS → Overview 中使用 “Full (strict)” 模式，并确保证书链完整；可用 SSL Labs 检测

六、性能测试与持续监控

加速方案落地后，持续监控是防止"配置完就忘"的关键。以下是一整套监控体系建议。

使用 Lighthouse CI 监控国内访问性能

Lighthouse CI 可以在 CI/CD 流程中自动测试页面性能，确保每次部署不引入性能回归。

// lighthouserc.js
module.exports = {
  ci: {
    collect: {
      url: ['https://www.yourdomain.com/'],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
        'first-contentful-paint': ['error', { maxNumericValue: 1800 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

在 GitHub Actions 中集成：

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [push]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli
          lhci autorun

注意：GitHub Actions 的服务器在海外，测试的是海外访问性能。如需测试国内性能，需接入国内的 Lighthouse 代理或使用 PageSpeed Insights 的中国节点。

使用 UptimeRobot / Pingdom 多区域监控

UptimeRobot（免费版支持 50 个监控项，5 分钟检测间隔）：

1. 注册 UptimeRobot，创建 HTTP(s) 监控
2. 设置监控 URL：https://www.yourdomain.com
3. 选择监控节点：建议勾选 Asia (Singapore)、North America、Europe 至少三个区域
4. 设置告警通知：邮件 + 微信/飞书 Webhook

Pingdom（付费，但支持中国大陆节点测试）：

• Pingdom 的上海/北京节点可以模拟中国大陆用户的访问
• 设置 TTFB（Time to First Byte）阈值告警，超过 1 秒即触发

使用 GTmetrix 的中国节点测试

GTmetrix Pro 版提供中国节点（香港服务器模拟中国大陆用户）：

1. 登录 GTmetrix → New Test
2. Test Server Region 选择 Hong Kong, China
3. Browser 选择 Chrome (Desktop) 和 Chrome (Mobile) 分别测试
4. 重点关注：
   • LCP（Largest Contentful Paint）< 2.5s
   • TTFB < 800ms
   • Fully Loaded Time < 3s

测试完成后保存报告链接，作为性能基线文档。

性能基线建立与回归检测

建立基线的步骤：

1. 选择 3-5 个核心页面（首页、落地页、产品页、文档页）
2. 在每个优化阶段（优化前、基础优化后、高级优化后）用同一工具、同一节点测试 3 次取平均值
3. 记录以下指标：

回归检测策略：

• 每次代码发布前，CI 自动运行 Lighthouse 测试，与基线对比
• 如果某个指标下降超过 10%，阻断发布流程，通知团队排查
• 每月使用 GTmetrix 中国节点做一次全量回归测试

告警阈值的设置建议

TTFB > 1s 告警 是一个经验值。对内容型站点，TTFB 在 500ms 以下是理想状态；超过 1s 说明 Cloudflare 缓存失效或 Vercel 函数响应变慢，需要立即排查。

七、方案决策总结

根据你的项目规模和技术栈，选择最适合的方案：

常见问题（FAQ）

为什么直接用 vercel.app 不行？一定要买域名吗？

*.vercel.app 没有中国境内 CDN 节点，且部分 DNS 解析器对这个域名返回异常。花几十块买一个域名（如 Namecheap $5-15/年），绑定 Cloudflare NS，是最廉价也最一劳永逸的解决方案。域名中国站访问加速数倍，且看起来更专业。

Cloudflare 的免费计划够用吗？

对于绝大多数 Vercel SaaS/博客项目，Cloudflare Free 完全够用：

• DNS 解析无限
• Proxy/缓存/CDN 无限流量
• DDoS 防护基础版
• 3 个 Page Rules（足够配置静态资源缓存）

除非你需要：高级 WAF 规则、自定义 SSL 证书、Argo Smart Routing 等，才需要升级到 Pro（$20/月）。

配置 Cloudflare 后还能用 Vercel 的 Preview 功能吗？

可以。生产域名（如 www.yourdomain.com）走 Cloudflare，Preview 域名（如 my-project-xxx.vercel.app）仍然是 Vercel 默认域名。每次 PR 触发部署后，你仍然可以访问 Preview URL 测试，只是 Preview URL 不会经过 Cloudflare 加速（但 Preview 测试的流量通常不大）。

Vercel 可以和阿里云 CDN 一起用吗？

可以，但更复杂：

• 在阿里云开通 CDN → CNAME 指向 Vercel 的 cname
• 需要配置 HTTPS 证书回源
• 阿里云 CDN 在中国大陆节点更多，但 Cloudflare Free 更省事、配置更少
• 如果要极致性能，可以用阿里云 + Cloudflare 叠在一起（阿里云做第一层，Cloudflare 做海外的第二层），但这属于极度进阶配置

配置完之后多久能看到效果？

• DNS NS 切换：5-30 分钟
• Cloudflare Proxy 生效：即时（但 DNS TTL 可能缓存旧记录）
• 缓存规则生效：新规则即时生效，但旧缓存需要时间过期
• 建议全程至少等待 1 小时后，再用中国大陆网络测试

备案域名是否可以用在 Vercel 上？

可以，但有条件。 ICP 备案本身是域名级别的要求，不限制你将域名解析到哪个平台。如果你已经完成了 ICP 备案，完全可以将备案域名绑定到 Vercel 并通过 Cloudflare 代理加速。

需要注意的几点：

• 备案域名的接入商（如阿里云、腾讯云）要求域名在解析上保持"活跃"，如果备案后完全不使用国内服务器，部分接入商可能会在年检时要求你接入他们的服务器做验证页
• 建议保留一个最低配的国内主机（如阿里云 ECS 1核1G），仅用于备案接入验证，实际流量仍走 Cloudflare → Vercel
• 备案信息（主体、网站负责人）必须保持最新，域名变更时及时在工信部系统更新

Cloudflare 的 APO（Automatic Platform Optimization）对 Vercel 是否有效？

有一定效果，但提升有限。 APO 是 Cloudflare 为 WordPress 设计的专用优化功能，它会缓存 HTML 页面并在边缘节点直接响应。

对于 Vercel 项目：

• 如果你的站点是纯静态导出（Next.js output: 'export'），APO 可以缓存 HTML，提升首屏速度
• 如果你的站点包含SSR/ISR/API Routes，APO 效果不明显，因为 Cloudflare 默认不缓存动态 HTML
• APO 的 Pro 版（$5/月）不值当，不如手动配置 Page Rules 或 Cloudflare Workers 做缓存控制
• 替代方案：使用 Cloudflare Workers Site 或自建边缘缓存逻辑，效果更可控

国内 CDN 与 Cloudflare 的叠加快还是慢？

大多数情况下是快，但配置复杂度翻倍。 双层 CDN 的典型架构：

用户 → 阿里云 CDN（第一层，中国大陆） → Cloudflare（第二层，全球/海外） → Vercel 源站

优势：

• 阿里云 CDN 在中国大陆节点密度更高，首次访问命中率更好
• Cloudflare 作为第二层缓存海外节点的回源

劣势：

• 两层缓存意味着两层缓存失效策略需要一致管理，更新内容时容易碰到"阿里云缓存已过期但 Cloudflare 还缓存旧版"的问题
• HTTPS 证书需要在两层分别配置，SSL 握手链变长
• 请求链路变长：用户 → 阿里 CDN → Cloudflare → Vercel，如果阿里 CDN 不是智能回源，反而增加延迟

结论：除非是日活 10 万+ 的大型站点，否则单层 Cloudflare Proxy 足够，双层 CDN 的维护成本大于收益。

多域名绑定策略：www + apex domain 怎么处理？

最佳实践是同时绑定 www.yourdomain.com 和 yourdomain.com（裸域名/apex domain），并将其中一个做 301 重定向到另一个。

方案 A：主域名用 www，apex 做 301 重定向（推荐）

DNS 记录：
CNAME   www     cname.vercel-dns.com    (橙色云朵)
A       @       76.76.21.21             (Vercel 提供的 apex domain IP，橙色云朵)

Vercel Settings → Domains：
- 添加 www.yourdomain.com（主域名）
- 添加 yourdomain.com（自动配置为 Redirect to www）

为什么要用 www 作为主域名？

1. www 是标准子域名，DNS 规范上不会与 MX 记录和邮件服务冲突
2. 许多 DNS 服务商不支持给 apex domain 设置 CNAME（只有 A/ALIAS 记录），而用 www 可以完整利用 Cloudflare 的 CNAME 灵活性
3. 如果未来更换托管平台，只需改 CNAME 即可，apex domain 的 A 记录改动更复杂

方案 B：主域名用 apex，www 做 301 重定向

此方案需要：

• Cloudflare 的 CNAME Flattening（自动把 CNAME 解析结果扁平化为 A 记录，解决 apex domain 不能设 CNAME 的问题）
• 或域名服务商支持 ALIAS/ANAME 记录
• Vercel Dashboard 中设置 yourdomain.com 为主域名，自动将 www 重定向过去

注意：Cloudflare 的 “Always Use HTTPS” 和 Vercel 的域名重定向可能导致循环重定向。如果出现这种情况，在 Vercel → Domains 中关闭自动重定向，通过 Cloudflare Page Rule 手动设置 301。

为什么配置了 Cloudflare 后，部分地区仍然慢？

Cloudflare 在中国大陆并非所有地区、所有运营商都有 PoP 节点。如果用户的请求被路由到 Cloudflare 的海外节点（如香港、新加坡、东京），延迟会比预期高。

判断当前请求命中了哪个 Cloudflare 节点的方法：

curl -I https://www.yourdomain.com
# 响应头中的 CF-RAY 包含数据中心的 IATA 代码
curl -s https://www.yourdomain.com/cdn-cgi/trace
# 输出中的 colo=XXX 即为当前节点代码
curl -s https://www.yourdomain.com/cdn-cgi/trace | grep colo
# colo=PEK  → 北京节点
colo=SHA  → 上海节点
colo=HKG  → 香港节点
colo=NRT  → 东京节点

优化策略：

• 如果主要是动态请求慢 → 增加缓存命中率，减少动态内容
• 如果静态资源命中了海外节点 → 检查 Cloudflare 的 Tiered Cache 是否开启
• 如果问题集中在某省/某运营商 → 考虑为CDN加速添加阿里云/腾讯云（备案后）

Vercel 的 Edge Config 和 Cloudflare KV 有什么区别？

两者都是边缘存储服务，但设计用途不同：

选择建议：

• 如果你的配置项很少（如 20-50 个 feature flags），用 Vercel Edge Config 更省事，与 Vercel 项目无缝集成
• 如果你需要存储大量键值对（如 10万+ 用户配置）或用 Workers 做逻辑 → 用 Cloudflare KV
• 两者可以同时使用：Vercel Edge Config 管理开关，Cloudflare KV 缓存用户数据

相关阅读

• Vercel 详解：前端与 AI 应用的一站式云平台
• 用 Vercel 部署 Next.js + Postgres SaaS 实战
• Vercel 定价与成本详解
• Vercel 与 Netlify、Render、Railway、Cloudflare Pages 对比
• Vercel Edge Functions 深度指南
• Cloudflare 详解：从 CDN 到全球边缘计算平台
• Cloudflare Pages 完全指南
• Vercel 专题导航