如何用同一域名同时部署Hostinger WordPress与Vercel Next.js？

完全可以实现，核心思路是通过域名解析规则拆分流量：主域名https://www.exampledomain.com/指向Vercel的Next.js项目，仅/wp-admin及相关WordPress后台路径指向Hostinger上的WordPress服务器。以下是具体步骤：

1. 在Vercel中绑定主域名 #

• 打开你的Vercel项目，进入Settings > Domains页面
• 输入www.exampledomain.com并点击「Add」
• 记录Vercel给出的DNS配置信息（通常是一条CNAME记录，值为cname.vercel-dns.com；或A记录指向Vercel官方IP）

2. 调整Hostinger的DNS解析规则 #

• 登录Hostinger账户，进入对应域名的DNS管理面板
• 删除原www主机名对应的A/CNAME记录（原指向Hostinger服务器的记录）
• 添加Vercel要求的记录：
  • 主机名填www，类型选CNAME，值填cname.vercel-dns.com，TTL保持默认
• 添加路径转发/重定向规则：
  • 配置规则让www.exampledomain.com/wp-admin/*、www.exampledomain.com/wp-login.php等后台相关路径，转发到你的WordPress服务器IP或专属子域名（比如后续迁移的wp.exampledomain.com）
  • 若Hostinger DNS不支持路径级转发，可先将WordPress迁移到子域名（如wp.exampledomain.com），再设置301重定向：把www.exampledomain.com/wp-admin重定向到wp.exampledomain.com/wp-admin

3. 修改WordPress核心设置 #

• 暂时通过原服务器IP或子域名登录WordPress后台（比如https://[你的Hostinger服务器IP]/wp-admin）
• 进入Settings > General：
  • WordPress地址（URL）：设置为WordPress实际部署的地址（如https://wp.exampledomain.com或服务器IP）
  • 站点地址（URL）：设置为https://www.exampledomain.com（前端对外展示的主域名）
• 保存设置，之后即可通过https://www.exampledomain.com/wp-admin正常登录后台

4. 验证与调试 #

• 访问https://www.exampledomain.com，确认页面加载Vercel上的Next.js项目
• 测试https://www.exampledomain.com/wp-admin，确保能正常进入WordPress后台
• 检查Next.js的WPGraphQL查询是否正常：确保GraphQL端点地址正确（如https://www.exampledomain.com/graphql或https://wp.exampledomain.com/graphql），同时在WordPress的WPGraphQL设置中配置允许Vercel域名的跨域访问
• 确认SSL证书覆盖所有相关域名（主域名和子域名），Hostinger和Vercel均提供免费SSL证书，需开启并配置

内容的提问来源于stack exchange，提问作者Robin Banks