如何在同一主域名下同时部署Webflow落地页与Vercel应用后台

普通DNS协议仅支持按域名维度做IP映射，无法按请求路径分发流量，因此需要在流量入口层添加路径路由能力实现两个服务在同一主域名下共存，以下是可落地的实现方案：

方案1：以Vercel为入口托管根域名，内置重写规则分流 #

该方案改动最小，适合核心应用路径规则清晰的场景：

• 先将abc.com的DNS解析指向Vercel，在Vercel后台绑定该主域名到你的核心应用项目
• 在Vercel项目根目录新增vercel.json配置文件，添加重写规则：优先匹配核心应用的路径（如仪表盘、身份认证、接口路径）走Vercel本地服务，剩余未匹配的所有路径全部代理转发到Webflow站点，配置示例如下：

{
  "rewrites": [
    { "source": "/dashboard/:path*", "destination": "/dashboard/:path*" },
    { "source": "/auth/:path*", "destination": "/auth/:path*" },
    { "source": "/api/:path*", "destination": "/api/:path*" },
    { "source": "/:path*", "destination": "https://你的Webflow站点域名/:path*" }
  ]
}

• 在Webflow后台配置允许abc.com作为站点访问域名，关闭Webflow自带的强制主域名跳转规则，避免出现重定向循环

方案2：CDN边缘层路由分流 #

该方案灵活性最高，两边服务不需要做任何适配改动：

• 将abc.com的DNS托管到支持边缘路由能力的CDN服务商，开启CDN代理模式
• 配置CDN路由规则：匹配到核心应用相关路径（如/dashboard/*、/auth/*）时，将请求代理转发到Vercel应用地址；其余所有请求代理转发到Webflow站点地址
• 配置CDN的请求Host头为abc.com，确保两个上游服务都可以正常识别请求域名

方案3：以Webflow为入口托管根域名，自定义规则分流 #

该方案适合营销页面占比更高、核心应用路径较少的场景：

• 将abc.com的DNS解析指向Webflow，在Webflow后台绑定该主域名
• 在Webflow的自定义重定向规则中配置代理转发：匹配到核心应用路径时，将请求代理转发到Vercel的应用地址
• 注意Webflow的代理转发有流量配额限制，高流量场景不推荐使用该方案

通用注意事项 #

• 两个服务都需要配置覆盖abc.com的SSL证书，避免HTTPS访问报错
• 所有分流规则必须配置为代理转发而非301/302跳转，才能保持地址栏主域名不变，符合不使用子域名的需求
• 若存在静态资源路径冲突，需要额外添加规则区分两边的静态资源路径，避免出现404问题

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