🌐 域名配置完全指南 (小白专用)

写在前面： 这份教程涵盖 Vercel 和 Cloudflare Pages 两种主流部署平台的域名配置,帮助你把本地项目部署到全球可访问的网站。两个平台都提供完全免费的 CDN、SSL 证书,非常适合个人项目。

📌 重要! 理解域名配置的核心概念 (小白必读)

域名配置的本质是什么?

你购买的域名 (example.com)
    ↓
需要"指向"你的项目部署地址
    ↓
Vercel/Cloudflare Pages 会给你一个默认地址
    ↓
通过 DNS 配置,让你的域名指向这个地址

域名在哪里获取?

小白必读:

• ❌ 错误: 在 Vercel/Cloudflare 获取域名
• ✅ 正确: 在域名注册商购买域名,然后在 Vercel/Cloudflare 配置 DNS
• Vercel 和 Cloudflare 只是部署平台,域名需要自己购买!

📖 一、核心概念（30 秒看懂）

1.1 我们要做什么?

想象一下,你在自己电脑上做了一个很酷的网站:

你的电脑（本地开发）
    ↓
推送到 GitHub（代码托管）
    ↓
部署到 Vercel/Cloudflare Pages（全球可访问）
    ↓
绑定自定义域名（专业网址）

部署后你将获得:

• ✅ 一个免费的默认域名 (即刻可用)
  • Vercel: 你的项目名.vercel.app
  • Cloudflare Pages: 你的项目名.pages.dev
• ✅ 全球 CDN 加速 (网站访问超快)
• ✅ 自动 HTTPS 证书 (浏览器小绿锁 🔒)
• ✅ 可选: 绑定你自己的域名 (如 example.com)

1.2 三个关键术语

🚀 二、购买域名（前置条件）

2.1 推荐域名注册商

如果你想用自己的域名(如 example.com)替代默认域名,需要先购买域名:

购买流程（以 Namesilo 为例）:

1. 访问 Namesilo
2. 搜索你想要的域名（如 my-app.com）
3. 加入购物车 → 结账 → 支付
4. 完成! 域名会显示在你的账户中

🎯 三、方案 A: Vercel + 域名配置

3.1 Vercel 部署（获取默认域名）

前提条件: 代码已推送到 GitHub

步骤 1: 注册 Vercel

1. 访问 Vercel
2. 点击 “Sign Up” → 选择 “Continue with GitHub”
3. 授权 Vercel 访问你的 GitHub
4. 注册成功!

步骤 2: 导入 GitHub 项目

1. 登录 Vercel Dashboard
2. 点击右上角 “Add New…” → 选择 “Project”
3. 选择 “Import Git Repository” → 选择 “GitHub”
4. 找到你的项目 → 点击 “Import”

步骤 3: 配置项目设置

环境变量配置（可选）:

• 如果项目需要 API Key,点击 “Environment Variables”
• 添加变量名和值（如 NEXT_PUBLIC_API_URL）

步骤 4: 部署

1. 检查所有配置无误
2. 点击 “Deploy”
3. 等待 1-3 分钟构建完成
4. 获得免费域名: https://my-awesome-app.vercel.app

恭喜! 你的网站已经在全球可访问了 🎉

3.2 绑定自定义域名到 Vercel

如果你已经购买了域名,可以绑定到 Vercel 项目:

步骤 1: 在 Vercel 添加域名

Vercel Dashboard → 选择你的项目 → Settings → Domains
    ↓
点击 "Add" 按钮
    ↓
输入你的域名（如 example.com 或 www.example.com）
    ↓
点击 "Add"

Vercel 会提示你需要配置的 DNS 记录,类似这样:

Type: CNAME
Name: www (或 @)
Value: cname.vercel-dns.com

步骤 2: 配置 DNS（两种情况）

情况 A: 子域名（如 www.example.com）

最简单! 只需添加 CNAME 记录

在你的域名注册商（阿里云/Namesilo）添加 DNS 记录:

阿里云操作步骤:

1. 登录阿里云 → 域名控制台 → DNS 管理
2. 点击 “添加记录”
3. 填写上述信息 → 保存

Namesilo 操作步骤:

1. 登录 Namesilo → Domain Manager
2. 找到域名,点击蓝色小球图标 → “Manage DNS”
3. 添加新的 CNAME 记录

情况 B: Apex 域名（如 example.com）

需要修改 Nameservers (推荐使用 Cloudflare)

为什么这样做?

• Apex 域名技术上需要 A 记录,但 Vercel 的 IP 可能变化
• 使用 Cloudflare 托管 DNS 可以解决这个问题,并获得 CDN 加速

步骤:

1. 将域名托管到 Cloudflare（见下文 3.3 节）
2. 在 Cloudflare 添加 DNS 记录:
   • Type: CNAME
   • Name: @
   • Target: cname.vercel-dns.com
   • Proxy status: 关闭（橙色云变灰色云）
3. 回到 Vercel 验证域名

步骤 3: 验证生效

1. 等待 DNS 传播（10 分钟 - 1 小时）
2. 回到 Vercel → Settings → Domains
3. 看到域名状态为 “Valid Configuration”（绿色 ✓）
4. 访问 https://example.com 验证
5. SSL 证书会自动颁发（5-15 分钟）

3.3 使用 Cloudflare 加速 Vercel（推荐）

为什么要用 Cloudflare?

• ✅ 免费的全球 CDN
• ✅ 国内访问速度更快
• ✅ 额外的安全保护

步骤 1: 将域名托管到 Cloudflare

1.1 注册 Cloudflare

1. 访问 Cloudflare
2. 填写邮箱和密码 → “创建账号”
3. 验证邮箱 → 登录成功

1.2 添加域名

1. 登录后,点击 “添加站点 (Add a site)”
2. 输入你的域名（如 example.com）→ “添加站点”
3. 选择 “Free” 免费计划 → “继续”
4. Cloudflare 会扫描现有 DNS 记录 → “继续”

1.3 修改 Nameservers

Cloudflare 会给你两个 Nameserver 地址,类似:

amber.ns.cloudflare.com
logan.ns.cloudflare.com

在你的域名注册商修改 Nameservers:

阿里云示例:

1. 域名控制台 → DNS 管理 → 修改 DNS 服务器
2. 删除默认的,添加 Cloudflare 的两个地址
3. 保存

Namesilo 示例:

1. Domain Manager → 点击蓝色小球图标（⚙️）
2. 选择 “Change Nameservers”
3. 删除默认的,添加 Cloudflare 的两个地址
4. “Submit” 保存

1.4 等待生效

• 通常需要 10 分钟 - 24 小时（大多数 30 分钟内完成）
• Cloudflare 会发邮件通知: “Your site is active on Cloudflare”

步骤 2: 在 Cloudflare 添加 DNS 记录

1. Cloudflare Dashboard → 选择你的域名 → “DNS” → “Records”
2. 点击 “Add record”
3. 填写:
   • Type: CNAME
   • Name: @ (根域名) 或 www (子域名)
   • Target: cname.vercel-dns.com
   • Proxy status: DNS only（灰色云,不要开启代理）
   • TTL: Auto
4. “Save” 保存

步骤 3: 回到 Vercel 验证

1. Vercel Dashboard → Settings → Domains
2. 等待域名验证通过
3. 完成! 你的网站现在通过 Cloudflare CDN 加速了

🎯 四、方案 B: Cloudflare Pages + 域名配置

4.1 Cloudflare Pages 部署（获取默认域名）

步骤 1: 注册 Cloudflare

1. 访问 Cloudflare
2. 填写邮箱和密码 → “创建账号”
3. 验证邮箱 → 登录成功

步骤 2: 连接 GitHub 仓库

2.1 进入 Workers & Pages

1. 登录后,点击左侧菜单 “Workers & Pages”
2. 点击 “Create application”
3. 选择 “Pages” 标签
4. 点击 “Connect to Git”

2.2 授权 GitHub

1. 点击 “Connect GitHub”
2. 登录 GitHub
3. 选择授权范围:
   • 推荐: “Only select repositories”
   • 选择你的项目仓库
4. “Install & Authorize”

2.3 选择仓库

1. 找到你要部署的仓库,点击 “Begin setup”
2. 如果找不到,点击 “Configure GitHub App”

步骤 3: 配置构建设置

环境变量（可选）:

• 点击 “Environment variables (optional)”
• 添加如 NODE_VERSION = 18 等

步骤 4: 部署

1. 检查配置无误
2. 点击 “Save and Deploy”
3. 等待 1-3 分钟
4. 获得免费域名: https://my-awesome-app.pages.dev

完成! 你的网站已经在全球可访问了 🎉

4.2 绑定自定义域名到 Cloudflare Pages

两种配置方式

方案 A: Apex 域名（如 example.com）

步骤 1: 将域名托管到 Cloudflare

为什么这样做? Apex 域名需要完全托管在 Cloudflare,才能正确解析并获得 SSL 证书。

操作步骤:

1. 添加站点:

   • Cloudflare Dashboard → “添加站点”
   • 输入域名（如 example.com）→ “添加站点”
   • 选择 “Free” 免费计划 → “继续”
   • Cloudflare 扫描 DNS 记录 → “继续”

2. 修改 Nameservers:

   • Cloudflare 给你两个 Nameserver 地址
   • 去域名注册商（阿里云/Namesilo）修改 Nameservers
   • 等待生效（10 分钟 - 24 小时）

3. 邮件通知: Cloudflare 会发邮件确认 “Your site is active on Cloudflare”

步骤 2: 在 Pages 添加自定义域名

1. Cloudflare Dashboard → “Workers & Pages” → 选择项目
2. “Custom domains” → “Set up a custom domain”
3. 输入域名（如 example.com）
4. “Continue”
5. 自动配置: 因为域名已在 Cloudflare,系统会自动添加 CNAME 记录
6. “Activate domain”
7. 等待 SSL 证书颁发（5-15 分钟）

完成! 访问 https://example.com 即可看到你的网站。

方案 B: 子域名（如 www.example.com）

不需要完全托管域名,只需添加 CNAME 记录。

步骤 1: 在 Cloudflare Pages 添加域名

1. “Workers & Pages” → 选择项目
2. “Custom domains” → “Set up a custom domain”
3. 输入子域名（如 www.example.com）
4. “Continue”

步骤 2: 配置 DNS（两种情况）

情况 A: 域名已托管在 Cloudflare

• 系统会自动添加 CNAME 记录
• 直接点击 “Activate domain”

情况 B: 域名托管在其他地方（如阿里云、Namesilo）

在原 DNS 服务商添加 CNAME 记录:

示例: 如果你的 Pages 项目是 my-app.pages.dev:

类型: CNAME
名称: www
目标: my-app.pages.dev

阿里云操作: 域名控制台 → DNS 管理 → 添加记录 Namesilo 操作: Domain Manager → Manage DNS → 添加 CNAME

步骤 3: 验证生效

1. 等待 DNS 传播（10 分钟 - 1 小时）
2. Cloudflare Pages → Custom domains
3. 域名状态为 “Active”（绿色 ✓）
4. 访问 https://www.example.com 验证
5. SSL 证书自动颁发（5-15 分钟）

✅ 五、验证部署成功

5.1 检查清单

• 访问你的域名,网站正常打开
• 浏览器地址栏显示 小绿锁 🔒（HTTPS 已启用）
• 用手机 4G/5G 网络访问,也能正常打开
• 使用 DNS Checker 查询,全球 DNS 已生效

5.2 性能测试

想知道你的网站在全球各地的速度?

• Pingdom: 测试加载速度
• GTmetrix: 性能评分
• WebPageTest: 全球多地测试

❓ 六、常见问题（FAQ）

Q1: 部署后显示“找不到服务器“?

原因: DNS 传播需要时间。

解决方案:

1. 等待 10-30 分钟（最长 24 小时）
2. 清除 DNS 缓存:
   • Windows: ipconfig /flushdns
   • macOS: sudo dscacheutil -flushcache
   • Chrome: 访问 chrome://net-internals/#dns → Clear host cache
3. 用手机 4G 网络测试（避免本地 DNS 缓存）

Q2: 浏览器提示“不安全“?

原因: SSL 证书正在颁发中。

解决方案:

1. 等待 15-30 分钟
2. 强制刷新: 按 Ctrl + Shift + R（Windows）或 Cmd + Shift + R（Mac）
3. 检查 DNS 配置: 确保 CNAME 记录指向正确

Q3: 修改代码后如何更新网站?

Vercel/Cloudflare Pages 都支持自动部署:

git add .
git commit -m "更新功能"
git push

系统会自动检测并重新部署（1-3 分钟）。

手动部署:

• Vercel: Dashboard → Deployments → “Redeploy”
• Cloudflare Pages: Workers & Pages → 项目 → “Create deployment”

Q4: 构建失败怎么办?

常见原因:

1. Node.js 版本不对 → 在环境变量添加 NODE_VERSION = 18 或 20

2. 构建命令错误 → 检查 package.json 中的 scripts.build

3. 依赖安装失败 → 确保 package.json 和 package-lock.json 已提交到 Git

查看构建日志:

• 项目页面 → Deployments → 点击失败的部署
• 查看详细错误信息并修复

Q5: 如何设置 www 跳转?

目标: 访问 www.example.com 自动跳转到 example.com（或反过来）。

Vercel 步骤:

1. 两个域名都添加到 Domains
2. Vercel 会自动设置跳转

Cloudflare Pages 步骤:

1. 两个域名都添加到 Custom domains
2. Cloudflare → 选择域名 → “Rules” → “Redirect Rules”
3. “Create rule”:
   • When: www.example.com/*
   • Then: Redirect → Type: Permanent (301)
   • URL: https://example.com/$1
4. “Deploy”

Q6: 国内访问慢怎么办?

原因: Vercel/Cloudflare 免费版在国内速度有限。

解决方案:

1. Vercel: 使用 Cloudflare CDN 加速（见 3.3 节）
2. Cloudflare Pages: 已经自带 CDN,速度相对更快
3. 备选方案:
   • 腾讯云 EdgeOne Pages（国内速度快,需要域名备案）
   • Netlify（类似 Vercel）

Q7: 如何删除项目?

⚠️ 警告: 删除前请先删除自定义域名的 DNS 记录!

Vercel:

1. Dashboard → 选择项目 → Settings
2. 拉到最下方 → “Delete Project”
3. 输入项目名确认

Cloudflare Pages:

1. Workers & Pages → 选择项目 → Settings
2. 拉到最下方 → “Delete project”
3. 输入项目名确认

Q8: Vercel 和 Cloudflare Pages 该选哪个?

🎓 七、进阶技巧

7.1 设置环境变量

用途: 存储 API 密钥、数据库连接等敏感信息。

Vercel:

1. Dashboard → 选择项目 → Settings → Environment Variables
2. 点击 “Add”
3. 填写变量名和值 → “Save”
4. 重新部署生效

Cloudflare Pages:

1. Workers & Pages → 项目 → Settings → Environment variables
2. 选择环境（Production / Preview）
3. “Add variable”
4. 填写变量名和值 → “Save”
5. 重新部署生效

7.2 配置邮件转发（免费）

想要 [email protected] 这样的专业邮箱?

Cloudflare Email Routing（完全免费）:

1. Cloudflare Dashboard → 选择域名 → “Email” → “Email Routing”
2. “Get started” → 验证域名
3. 添加转发规则: [email protected] → 你的 Gmail
4. 完成! 现在别人发到专业邮箱的邮件会自动转到你的 Gmail

7.3 监控网站在线状态

推荐工具: UptimeRobot（免费）

1. 注册 UptimeRobot
2. 添加监控: 输入你的网站 URL
3. 设置邮件/短信提醒
4. 网站宕机时自动通知你

7.4 启用 Web Analytics（免费）

Cloudflare Web Analytics（无需 Cookie,完全免费）:

1. Cloudflare Dashboard → “Web Analytics”
2. “Add a site” → 输入网站 URL
3. 获得一段 JavaScript 代码
4. 粘贴到你网站的 <head> 标签中:

   <!-- Cloudflare Web Analytics -->
   <script defer src='https://static.cloudflareinsights.com/beacon.min.js'
           data-cf-beacon='{"token": "你的token"}'></script>
   

5. 重新部署 → 回到 Cloudflare Dashboard 查看访问数据

📚 八、总结

恭喜你完成域名配置! 现在你的网站已经拥有:

✅ 全球 CDN 加速 - 访问速度快 ✅ 自动 HTTPS - 免费 SSL 证书 ✅ 自动部署 - Git 推送即部署 ✅ 无限流量 - 完全免费 ✅ 自定义域名 - 专业网址（可选）

🎯 学到的核心知识

🚀 下一步建议

1. 添加 Analytics: 了解有多少人访问你的网站
2. 设置专业邮箱: [email protected]
3. 优化 SEO: 让搜索引擎更容易收录
4. 定期备份: 备份代码和数据库
5. 监控性能: 使用 Web Vitals 追踪网站速度

📖 相关教程

• Vercel 配置详解
• Supabase 配置详解
• Stripe 支付配置
• 常见部署问题处理

记住: 部署只是开始,持续优化和维护才能让你的网站越来越好!

🎉 享受你的全球在线作品吧! 🎉

💡 Vibe Coding 心法: 域名配置不可怕! Vercel 和 Cloudflare 已经把复杂的服务器配置、DNS 解析、HTTPS 证书都搞定了。你只需要专注写代码,其他的交给这些平台! 让 AI 时代的部署变得更简单!