Home
img of docs

介绍如何结合 Vercel 和 Cloudflare 配置虚拟域名的重定向,并实现自定义域名的精准映射。我们将探讨如何在 Cloudflare 中设置 DNS 记录、如何在 Vercel 配置 vercel.json 文件来处理重定向规则,以及如何调试常见的重定向问题

chou403

/ Vercel

/ c:

/ u:

/ 4 min read

一学一个不吱声

在将 Vercel 配置为通过 Cloudflare 使用自定义域名时,你可以限制直接访问 Vercel 提供的默认域名(如 your-site.vercel.app),或者将其自动重定向到自定义域名。以下是实现这两个需求的方法:

方法 1: 阻止直接访问 Vercel 默认域名

方法步骤

  1. 进入 Vercel 项目设置:

    • 登录到 Vercel Dashboard。
    • 选择你的项目,进入 Settings > Domains。

  2. 移除默认域名:

    • 在 Domains 设置页面,Vercel 默认会为你的站点分配一个 *.vercel.app 域名。
    • 如果你不希望该域名被访问,可以点击 Remove 按钮删除默认域名。

  3. 确认仅使用自定义域名:

    • 确保你已在 Vercel 配置自定义域名,并且 DNS 指向 Vercel 的记录已生效。

方法 2: 将 Vercel 默认域名重定向到自定义域名

如果需要将 Vercel 的默认域名(如 your-site.vercel.app)重定向到你的自定义域名(如 example.com),可以使用 Vercel 提供的 Redirects 功能。

方法步骤

  1. 在项目根目录创建 vercel.json 文件:

    • 添加以下配置: 
         {
	"redirects": [
		{
			"source": "/(.*)",
			"destination": "https://example.com/$1",
			"permanent": true
		}
	]
}
    • 解释:
      • source: 匹配 Vercel 默认域名上的所有路径。
      • destination: 将请求重定向到自定义域名。

  2. 部署更新:

    • 将更改推送到你的 Git 仓库,Vercel 会自动重新部署。
    • 访问 your-site.vercel.app 时,应该会被自动重定向到 example.com。

方法 3: 使用 Cloudflare 完全接管 DNS 和重定向

如果你使用 Cloudflare 管理域名,也可以通过 Cloudflare 实现默认域名的重定向或屏蔽。

屏蔽默认域名

  1. 配置防火墙规则:
    • 在 Cloudflare Dashboard 中,进入 Security > Firewall Rules。
    • 创建一个规则,禁止访问 Vercel 默认域名: 
         (http.host contains "your-site.vercel.app")
    • 设置操作为 Block。

实现重定向

  1. 配置 Page Rules:

    • 在 Cloudflare Dashboard 中,进入 Rules > Page Rules。
    • 添加一个规则:
      • If URL matches: your-site.vercel.app/*
      • Then forward to: https://example.com/$1(选择 301 或 302 重定向)。

  2. 确保 DNS 配置正确:

    • 确保 Cloudflare 的 DNS 完全接管你的域名,并指向 Vercel 的 CNAME 或 A 记录。

注意事项

  1. 保留调试访问:

    • 如果你可能需要通过 Vercel 默认域名调试,可以考虑仅在生产环境(Production Deployment)阻止或重定向默认域名。
    • 开发环境可以保留默认域名访问。

  2. Vercel 限制:

    • 你无法完全关闭 Vercel 提供的默认域名,但通过上述方法,可以有效屏蔽或重定向用户访问。

  3. SSL 问题:

    • 确保你的自定义域名在 Vercel 和 Cloudflare 上都正确配置了 SSL,以避免用户访问时出现证书错误。

通过上述方法,你可以选择性地屏蔽,重定向或保留对 Vercel 默认域名的访问权限,同时确保自定义域名的正常使用。

#vercel #redirect #cloudflare