将自定义域添加到部署在已具有自定义域的 vercel 中的 nextjs 应用程序中的动态子域

Question

我已经在 Vercel 中部署了一个 Next.js 应用程序，该应用程序呈现基于子域的内容，并且我已经将我的域链接到该项目。

项目部署网址：

*.mysite.com

在这里，如果 John 打开

john.mysite.com

，它将呈现 John 的个人资料内容。 对于 Mary 来说也是如此，

mary.mysite.com

呈现 Mary 的内容。

现在，我想让约翰和玛丽连接自定义域，指向我的应用程序上的子域，例如

www.john.com

将在我的网站上显示约翰的内容，玛丽也一样。

这是我在 CLoudflare 上的 DNS 配置。

子域分为 3 个部分，每个部分都有自己的 Next.js 项目指向该子域。

1. 根域和www用于登陆页面。
2. app 管理页面的子域，用户可以在其中创建基于子域的内容。
3. 剩余的所有子域与用户生成的子域的内容相匹配。

我想知道如何做到这一点。就像向 blogspot 博客添加自定义域一样，想象

john.mysite.com

是默认的 blogspot url，

www.john.com

是自定义域。

Answer 1

您在 Vercel 上部署了一个 Next.js 应用程序，该应用程序根据子域提供不同的内容（例如，

john.mysite.com

和

mary.mysite.com

）。
您想要将外部自定义域（例如，

www.john.com

和

www.mary.com

）映射到这些子域。

                               ┌────────────────┐
                        ┌──────┤  Vercel Cloud  ├────────┐
                        │      └────────────────┘        │
                        │                                │
                        │                                │
              ┌───────────────────┐             ┌───────────────────┐
              │     *.mysite.com  │             │    Vercel DNS     │
              └───────────────────┘             └───────────────────┘
                │              │                    │             │
┌───────────────┴───┐ ┌────────┴─────────┐ ┌────────┴───────┐ ┌───┴──────────────┐
│ john.mysite.com   │ │ mary.mysite.com  │ │ ns1.vercel.com │ │ ns2.vercel.com   │
└───────────────────┘ └──────────────────┘ └────────────────┘ └──────────────────┘
         │                     │                    │                   │
         │                     │                    │                   │
┌────────┴───────┐     ┌───────┴────────┐  ┌────────┴───────┐   ┌───────┴─────────┐
│ www.john.com   │     │ www.mary.com   │  │  DNS Records   │   │   DNS Records   │
│ (Custom Domain)│     │(Custom Domain) │  │   for john.com │   │  for mary.com   │
└────────────────┘     └────────────────┘  └────────────────┘   └─────────────────┘

这将涉及配置 DNS 记录以将自定义域指向 Vercel 托管的子域，并可能涉及 Vercel 在其平台内支持自定义域配置。

基于“Vercel / 添加和配置自定义域”，您需要首先向 Vercel 项目添加通配符域：

• 转到 Vercel 仪表板上的项目设置。
• 导航至“域”部分。
• 输入

  *.mysite.com

  并将其添加为通配符域。这将允许

  mysite.com

  的任何子域定向到您的 Vercel 项目。

然后为每个自定义域配置 DNS 设置：

• 对于顶级域（如

  john.com

  ），您需要使用指向 Vercel 提供的 IP 地址的 A 记录来配置它。
• 对于子域（如

  www.john.com

  ），您应该使用指向 Vercel 为您的部署提供的别名的 CNAME 记录来配置它。

+------------------+-------+-------------------------------------+
| Name             | Type  | Content                             |
+------------------+-------+-------------------------------------+
| *.mysite.com     | CNAME | <vercel-alias-for-your-app>         |
+------------------+-------+-------------------------------------+
| www.john.com     | CNAME | <vercel-alias-for-johns-subdomain>  |
+------------------+-------+-------------------------------------+
| www.mary.com     | CNAME | <vercel-alias-for-marys-subdomain>  |
+------------------+-------+-------------------------------------+
| mysite.com       | NS    | ns1.vercel-dns.com                  |
+------------------+-------+-------------------------------------+
| mysite.com       | NS    | ns2.vercel-dns.com                  |
+------------------+-------+-------------------------------------+

如果需要，您可能必须验证对该域的访问权限，特别是当该域已被另一个 Vercel 帐户使用时。您可以通过在 DNS 设置中添加 TXT 记录来完成此操作。

您可以考虑使用 Vercel 名称服务器（可选，但推荐）。
如果您想利用 Vercel 的完整 CDN 和性能优势，您可以将域的名称服务器更改为 Vercel 的名称服务器。在您的域名注册商面板中，将您当前的域名服务器替换为 Vercel 提供的域名服务器。

配置 DNS 设置或更新名称服务器后，Vercel 将验证域。传播可能需要一些时间。验证后，Vercel 仪表板中的域状态将更新，确认其可供使用。另请参阅“如何管理我的 Vercel DNS 记录？/验证 DNS 记录”

通过此配置，每个用户都可以拥有一个自定义域，该域指向 Next.js 应用程序上各自的子域。
例如，

www.john.com

将显示来自

john.mysite.com

的内容。