Vercel 部署静态网站并实现国内访问（Cloudflare 中转方案记录）

一、问题背景

在使用 Vercel 托管静态网站时，默认分配的*.vercel.app 域名在国内网络环境中存在访问异常现象。表现为：

DNS 解析失败或污染
请求超时或直接不可达

该问题并非部署失败，而是域名层访问路径受限。

因此，需要对访问链路进行重构，使请求不再直接依赖vercel.app 域名。

二、方案选择与原理

本次采用：

域名（阿里云）
DNS 托管（Cloudflare）
后端托管（Vercel）

访问路径由：用户 → vercel.app

调整为：用户 → Cloudflare → Vercel

本质是：

通过 DNS 与流量入口替换，规避默认域名的解析问题

需要注意：

Vercel 官方并不推荐在其前方叠加 Cloudflare 等反向代理
原因包括：流量可见性下降、缓存冲突、性能影响

本方案属于可用性优先的工程取舍，非官方推荐架构。

三、环境与前置条件

已完成 Vercel 项目部署
已购买域名（阿里云）
拥有域名 NS 修改权限
拥有 Cloudflare 账号

四、部署过程记录

1. Vercel 项目初始化

通过 Trae IDE自动部署项目，生成默认访问地址：xxx.vercel.app

在项目浏览器功能窗口中，点击右上角的部署即可完成

验证：项目构建成功且默认域名可在境外正常访问

前往Vercel官网（[https://vercel.com/](https://vercel.com/)）登陆自己的账户即可查看项目部署详情

2. 域名购买

前往万维阿里云（[https://wanwang.aliyun.com/](https://wanwang.aliyun.com/)）输入所需要的域名，然后购买即可

这里我买的域名为：verceltest.top

3. 接入 Cloudflare

登录Cloudflare（https://www.cloudflare.com/）进入账户主页

点击账户名右侧的添加按钮，选择连接域，然后输入购买好的域名。

爬虫控制可自行选择，我这里是做数据采集用的所以不阻止，然后点击继续。

套餐选择免费的即可，由于没有安全防护措施，不建议个人或组织网站使用。

Cloudflare 会自动扫描你的部分dns记录。由于域名是刚买的还没设置解析操作，所以是没有记录，点击继续。

记录这两个DNS服务器地址即可。

4. 修改 NS（关键步骤）

前往阿里云域名产品控制台（https://dc.console.aliyun.com/）选择域名管理下的域名列表，点击需要修改的域名右侧的管理，点击左侧DNS管理下的DNS修改，点击修改DNS服务器，将之前的Cloudflare DNS服务器地址添加上去。

5. Cloudflare DNS 配置

在 Cloudflare 中添加记录：

选择类型CNAME，名称设置为 购买的域名，目标设置为 Vercel项目默认地址 点击保存即可

6. Vercel 添加自定义域名

进入项目部署详情页面，点击自定义域名分配（Assigning Custom Domains）点击管理，选择右上角的添加现有（Add Existing）

输入购买的域名，点击Save即可

等待域名解析，如果出现需要验证（Verification Needed）点击自动配置（Auot configure）即可。

页面中点击授权即可

7. SSL 配置

Cloudflare 中选择购买的域名，选择左侧的SSL/TLS下的概述，点击右侧配置按钮

选择 完全（严格） 或 完全 然后点击保存

五、测试访问

浏览器输入购买的域名测试是否能够访问，默认配置会将verceltest.top重定向至www.verceltest.top，若无此需求可自行设置，这里不展开。

六、结论

该方案的实际作用可以归纳为：

放弃.vercel.app 作为访问入口
使用自定义域名建立新的解析路径
通过 Cloudflare 接管 DNS 并转发流量

最终实现：

在不改变 Vercel 部署方式的前提下，使服务在国内网络环境中可访问

七、补充说明

该方案存在工程权衡：

优点：可访问性显著提升
缺点：增加一层中转并且可能影响 Vercel 安全策略与性能

因此，更适用于：个人项目、展示站点、对稳定性要求中等的服务

不建议直接用于高安全或高性能生产环境。