Vercel 国内访问与 Cloudflare 配置记录

一、当时遇到的问题

Vercel 部署的项目在国内访问较慢，偶尔无法访问，因此评估了不增加费用的代理和加速方式。

二、当时比较的方案

方案	原理	免费	推荐度
Cloudflare CDN + 代理	利用全球节点缓存与分发	✅ 免费	当时采用
Cloudflare + 优选 IP	手动指定节点 IP	✅ 免费	需要额外维护
阿里云 ESA	国内企业级加速节点	部分免费	❌ 需备案，略复杂

三、当时采用的子域名分流方式

一个主域名 hayato.top 下使用两个子域名，分别指向两个 Vercel 项目。

flowchart TD
    User[用户访问] --> Cloudflare[Cloudflare 边缘节点]

    Cloudflare --> |请求 blog.hayato.top| Blog[Vercel 博客项目]
    Cloudflare --> |请求 网站分析工具Umami| Umami[Vercel Umami 项目]

服务	分配的子域名	Vercel 项目默认域名
博客	blog.hayato.top	blog.xxx
Umami 统计	Umami	umami.xxx

四、配置步骤

4.1 将域名接入 Cloudflare

1. 注册 Cloudflare → 添加域名 hayato.top
2. 修改域名注册商（阿里云）的 Nameserver (NS 记录)：将 NS 地址替换为 Cloudflare 提供的两个地址
3. 等待 DNS 生效：一般几分钟到几小时，最长 24-48 小时

⚠️ Cloudflare 提示“名称服务器无效 / 正在检查”是正常的，代表在等待你修改 NS 记录。

4.2 在 Cloudflare 添加 DNS 记录

记录类型	名称 (Name)	目标 (Target)	代理状态
CNAME	blog	Vercel 博客项目	🟠 橙色云朵（开启）
CNAME	umami	Vercel Umami项目	🟠 橙色云朵（开启）

⚠️ 关键规则：同一主机名不能同时存在 A 记录和 CNAME 记录。

如果子域名出现 此主机名未被证书覆盖，说明域名层级超过 Cloudflare 免费证书覆盖范围，建议更换为二级子域名（如 blog.hayato.top 而非 www.blog.hayato.top）。

Cloudflare 提示“此记录暴露了 A 记录 IP 地址”：

• 表示该子域名目前是灰色云朵（未代理），暴露了真实服务器 IP
• 解决方案：将该记录的云朵改为橙色，开启代理
• 如果该记录是 CNAME 类型，也不应同时存在同名的 A 记录

4.3 在 Vercel 项目设置中添加自定义域名

1. 进入 Vercel 项目 → Settings → Domains
2. 分别添加 blog.hayato.top 和 网站分析工具
3. Vercel 会自动验证并签发 SSL 证书，等待状态变为 ✅ Valid（有效）

⚠️ Vercel 显示域名状态为 “Invalid”：意味着 Vercel 无法验证域名所有权或签发 SSL 证书，通常是因为 DNS 记录配置不正确（如使用了 A 记录而非 CNAME）或未完成 Vercel 域名添加。修复方式：确保 Cloudflare 中使用的是 CNAME 记录（而非 A 记录），并在 Vercel 中重新刷新验证。

4.4 SSL/TLS 模式设置

Cloudflare → 域名 → SSL/TLS → 选择 Full 或 Full (strict)

五、访问流程示意

sequenceDiagram
    participant User as 👤 用户浏览器
    participant CF as ☁️ Cloudflare<br>边缘节点
    participant Vercel as 🚀 Vercel<br>源站

    User->>CF: 访问 blog.hayato.top
    CF->>Vercel: 转发请求（通过 CNAME 记录）
    Vercel-->>CF: 返回 HTML/资源
    CF-->>User: 响应用户（已缓存）

六、故障排查速查表

现象	可能原因	解决方向
访问子域名显示 522 错误	Cloudflare 到 Vercel 连接超时	① Vercel 域名是否 Valid ② Cloudflare CNAME 目标是否正确
Vercel 域名状态 Invalid	Vercel 无法验证域名所有权	① 检查是否使用了 CNAME 而非 A 记录 ② 确认目标地址与 Vercel 提供的完全一致
Cloudflare 警告“记录暴露了 IP 地址”	子域名未开启代理（灰色云朵）	点击云朵切换为橙色（已代理）
Cloudflare 提示“证书未覆盖此主机名”	免费证书无法覆盖超过一级的子域名	缩短层级，使用 blog.hayato.top 而非 dev.blog.hayato.top
DNS 变更长时间不生效	NS 记录未改 / 本地 DNS 缓存	检查域名注册商 NS 记录，刷新本地 DNS 缓存

七、配置时出现过的误解

1. ❌ 误区一：在 Cloudflare 添加了 DNS 记录就完事了

   ✅ 实际要求：还需要在 Vercel 项目中添加该域名

2. ❌ 误区二：子域名应该用 A 记录指向 IP

   ✅ 正确：Vercel 推荐子域名使用 CNAME 记录，指向 Vercel 默认域名

3. ❌ 误区三：开启 Cloudflare 代理（橙色云朵）会加重访问负担

   ✅ 实际行为：开启代理后，请求才会经过 Cloudflare CDN 和安全层

4. ❌ 误区四：多级子域名（如 a.b.hayato.top）可以直接用免费证书覆盖

   ✅ 正确：Cloudflare 通用证书仅覆盖一级子域名，建议改用二级子域名

八、相关命令

# 查看域名的 NS 记录是否已改为 Cloudflare
dig hayato.top NS

# 查看子域名的 CNAME 解析
dig blog.hayato.top CNAME

# 查看子域名 A 记录解析
dig blog.hayato.top A