Vercel单应用部署前后端：后端/api正常但前端页面无法访问

我在Vercel上部署了一个仓库，仓库内包含存放React应用的client文件夹和存放Express Node.js应用的server文件夹。我希望将前后端部署在同一个Vercel应用中，而非分开部署，为此配置了如下vercel.json文件：

{
  "version": 2,
  "builds": [
    {
      "src": "server/index.ts",
      "use": "@now advance"ally       
级stoKeaps这条专-G Historical和之"@now/node"
    },
    {
      "src": "client/package.json",
      "use": "@vercel/static-build"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/server/index.ts"
    },
    {
      "src": "/(.*)",
      "dest": "/client/public/$1"
    }
  ]
}

目前访问/api路由时后端可正常工作，但访问根路径/时无法加载前端首页。

1. 修复vercel.json的语法错误 #

你的builds数组第一个配置存在乱码内容，直接替换为正确的Node.js构建配置（注意@now/node已更名为@vercel/node，建议使用新包名）：

{
  "src": "server/index.ts",
  "use": "@vercel/node"
}

2. 调整前端路由与构建配置 #

React应用默认构建产物输出到client/build目录，而非client/public；同时需要配置SPA路由 fallback，确保非API请求都指向React入口文件。修改后的完整vercel.json如下：

{
  "version": 2,
  "builds": [
    {
      "src": "server/index.ts",
      "use": "@vercel/node"
    },
    {
      "src": "client/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "build"
      }
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/server/index.ts"
    },
    {
      "src": "/(.*\\..+)$",
      "dest": "/client/build/$1"
    },
    {
      "src": "/(.*)",
      "dest": "/client/build/index.html"
    }
  ]
}

3. 确认前端构建命令有效 #

检查client/package.json的scripts字段，确保包含正确的构建命令：

"scripts": {
  "build": "react-scripts build"
}

Vercel会自动执行该命令构建React应用。

4. 重新部署验证 #

修改完成后重新部署应用，Vercel会自动处理：

• 构建Express后端并响应/api路由请求
• 构建React应用到client/build目录
• 优先匹配静态资源请求，其余请求全部指向React的index.html，支持SPA路由跳转

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