域名、DNS 与托管解耦：一套可迁移的网站上线方案

此方案适用于所有需要将域名注册、DNS 管理和网站托管解耦的场景，方便多服务接入、平台迁移、低停机切换和后续安全扩展。

分类: 工程实践
标签: 网站部署 · 域名 · DNS · Cloudflare · Vercel · DNSSEC · NextJS · DevOps

发布于 2026 年 7 月 21 日

文章目录

网站代码完成后，真正上线还要解决三个问题：

网站部署到哪里
域名在哪里买
域名如何指向网站

为了兼顾稳定性和成本，我最终采用以下的方案：

域名注册：Spaceship
DNS 管理：Cloudflare
网站部署：Vercel
代码托管：GitHub

选择 Spaceship 的主要原因很实际：购买时价格更低，并且支持支付宝付款。与之相比，Cloudflare 费用较高，且不支持支付宝。但由于其成熟稳定的 DNS 服务，Cloudflare 将只承担 DNS 管理。 此项目以 Next.js 框架为例，使用 Vercel 部署。其他框架部署的方法大同小异

一、最终架构

完整链路如下：

GitHub
  ↓ 自动部署
Vercel
  ↓ 提供网站内容和 HTTPS
www.example.com
  ↑ DNS 记录
Cloudflare DNS
  ↑ Nameserver（保存和回答 DNS 记录的服务器）委托
Spaceship 域名注册商

用户访问网站时，实际发生的是：

浏览器输入域名
  ↓
查询该域名的 Nameserver
  ↓
找到 Cloudflare
  ↓
Cloudflare 返回 Vercel 的地址
  ↓
浏览器访问 Vercel
  ↓
Vercel 返回网站页面

这里有四个独立角色。

1. GitHub：保存代码

GitHub 保存网站源码。代码推送到生产分支后，Vercel 自动拉取、构建并部署。

2. Vercel：运行网站

Vercel 是托管平台。它负责：

构建 Next.js 项目
发布静态页面和服务端能力
提供 .vercel.app 临时域名
绑定自定义域名
自动签发和续期 HTTPS 证书

3. Spaceship：管理域名所有权

Spaceship 是域名注册商。它负责：

注册和续费域名
保存域名所有人信息
设置域名的 Nameserver
提供域名锁、转移和授权码等功能

域名在哪里买，并不决定网站必须部署在哪里。

4. Cloudflare：管理 DNS

Cloudflare 在这套架构中主要负责权威 DNS。

它保存这些信息：

example.com 应该指向哪里
www.example.com 应该指向哪里
邮箱服务器在哪里
第三方平台如何验证域名所有权

二、Spaceship 和 Cloudflare Registrar 的简短对比

两者都可以注册域名，但侧重点不同。

项目	Spaceship	Cloudflare Registrar
购买价格	经常有首年优惠	通常按成本价计费
续费价格	需要看对应后缀	价格相对透明
支付方式	支持支付宝	主要依赖银行卡等支付方式
Nameserver	可以自由切换	域名需使用 Cloudflare Nameserver
DNS 灵活性	可使用任意第三方 DNS	与 Cloudflare DNS 深度绑定
适合场景	重视支付便利、首年价格和自由切换	长期使用 Cloudflare 生态、希望减少平台数量

由于以下原因，我最终选择 Spaceship：

支持支付宝
购买价格更低
后续仍可把 DNS 交给 Cloudflare
不影响 Vercel 部署

注意，可以让 AI 帮你找寻促销代码，在购物车里填写。博主的最终价格优惠了大约 50%

三、部署前先检查项目

部署开始前一定要检查项目。在本地执行：

pnpm lint
pnpm build
git status

至少确认：

构建成功
没有未提交文件
没有把 .env.local、密钥或私人信息提交到仓库
网站标题、描述、文章和导航已经基本完成
没有遗留 localhost、example.com、TODO 等内容

可以搜索：

rg "localhost|127\.0\.0\.1|example\.com|TODO|FIXME"

随后把代码推送到 GitHub 的生产分支。

四、部署：在 Vercel 部署网站

1. 把 GitHub 仓库导入 Vercel

在 Vercel 中选择：

Add New → Project → Import Git Repository

Vercel 是 Next.js 的官方首选部署平台。Next.js 项目通常会被自动识别。

常见配置如下：

Framework Preset: Next.js
Build Command: pnpm build
Root Directory: 项目根目录

仓库中应包含：

pnpm-lock.yaml

部署完成后，Vercel 会提供一个临时地址：

project-name.vercel.app

先确认此地址可以正常打开。若此地址都不能访问，说明问题在代码或构建，需排除问题后继续部署。

2. 添加正式域名

进入：

Vercel Project → Settings → Domains

添加：

example.com
www.example.com

注： example.com 和 www.example.com 是示例域名。真实部署中请填写购买的域名

然后选择一个主域名。

example.com → 重定向到 www.example.com

五、部署：在 Cloudflare 中预先配置 DNS

1. 添加域名到 Cloudflare

在 Cloudflare 中选择添加域名，输入：

example.com

套餐按需选择。Free 套餐已经可以满足需求。

2. 删除冲突的旧记录

如果 Cloudflare 导入了旧的 A、AAAA 或 CNAME 记录，而它们与 Vercel 提供的值不一致，就应删除。

常见冲突包括：

A      @      Spaceship 停放页 IP
AAAA   @      旧 IPv6 地址
CNAME  www    旧服务地址

邮箱相关的 MX、SPF、DKIM、DMARC 不要随意删除。

3. 添加 Vercel 记录

删除冲突的旧记录后，根据 Vercel Domains 页面显示的要求添加。

典型结构如下：

A      @      Vercel 提供的 IPv4 地址
CNAME  www    Vercel 提供的专属域名

如果 Vercel 要求验证，还需要添加 TXT。

初始配置统一使用：

Proxy status: DNS only
TTL: Auto

Cloudflare 中灰色云朵表示 DNS only，橙色云朵表示 Proxied。

六、部署：修改 Spaceship Nameserver

修改 Nameserver 前，先检查 Spaceship 中是否启用了 DNSSEC。

如果没有启用，可以直接继续
如果已经启用，应先关闭 DNSSEC，并等待旧 DS 记录从上级域中移除
不要在旧 DS 记录仍然存在时切换到 Cloudflare Nameserver，否则可能导致域名解析失败

可以通过以下命令检查：

dig DS example.com +short

操作步骤

确认 Cloudflare 中 A、CNAME 等记录已配置完整
Cloudflare 会提供两条 Nameserver
在 Spaceship 中打开域名管理
找到 Nameservers
选择 Custom nameservers
替换为 Cloudflare 提供的两条地址
保存并等待 Cloudflare 状态变成 Active

七、部署：验证与收尾

1. 检查平台状态

Cloudflare 最终应显示：

Active

Vercel 最终应显示：

Valid Configuration

HTTPS 证书可能在 DNS 生效后还需要短暂等待。

2.可选：重新启用 DNSSEC

在 Cloudflare → Enable DNSSEC

Cloudflare 会生成一组 DS 信息，通常包括：

Key Tag
Algorithm
Digest Type
Digest

回到 Spaceship 的 DNS 界面：

把 Cloudflare 给出的 Key Tag、Algorithm、Digest Type 和 Digest 原样填入。

注意：不要恢复原来由 Spaceship Nameserver 自动生成的旧 DNSSEC 密钥。 现在权威 DNS 已经是 Cloudflare，必须发布 Cloudflare 生成的新 DS 数据。DNSSEC 的签名由 Cloudflare负责，而 Spaceship 作为注册商负责把 DS 发布到上级域。

3.安全设置

为防止域名丢失，建议设置域名购买账户的安全设置：

Spaceship、Cloudflare、GitHub、Vercel 等涉及的网站全部开启 2FA
保存两份恢复码
若长期使用，请开启域名自动续费
确认付款方式长期有效
开启 Registrar Lock / Transfer Lock
使用长期有效的注册邮箱
设置域名到期提醒
不把个人邮箱恢复完全依赖该域名邮箱

八、常见问题和排查顺序

现象	优先检查
Cloudflare 一直 Pending	Spaceship 的 Nameserver 是否已替换
打开后仍是停放页	Cloudflare 中仍保留旧 A/CNAME 记录
根域名能开，www 不能开	`www` 的 CNAME
www 能开，根域名不能开	根域名 A 记录或重定向设置
Vercel 显示 Invalid Configuration	DNS 值不正确或传播未完成
HTTP 可用，HTTPS 不可用	证书尚未签发或 DNS 未稳定
部分地区能访问，部分不能	DNS 缓存尚未全部更新
开启橙云后循环跳转	Cloudflare 代理、SSL 或重定向规则冲突
域名邮箱收不到邮件	检查 MX、SPF、DKIM、DMARC

九、这套方案的使用场景

1. 域名、DNS、托管不在同一家平台

例如：

Namecheap + Cloudflare + Netlify
阿里云域名 + Cloudflare + AWS
Spaceship + Cloudflare + 自建服务器

2. 更换网站托管平台

以后从 Vercel 迁移到 Cloudflare Pages、Netlify、AWS 或自建服务器时，不需要迁移域名，只要修改 Cloudflare 中的 DNS 记录。

3. 一个域名连接多个服务

www.example.com      → 网站
api.example.com      → 后端服务
docs.example.com     → 文档站
status.example.com   → 状态页
images.example.com   → 对象存储

4. 减少迁移停机

迁移服务器时可以先部署新服务、验证新地址，再切换 DNS，并暂时保留旧服务作为回退。

5. 后续增加安全能力

当源站是自己的服务器，或确实需要 WAF、缓存和 DDoS 防护时，可以再评估 Cloudflare Proxied 模式。