如何在Vercel上同时部署React应用与Express API后端

修正后的vercel.json完整配置 #

{
  "version": 2,
  "builds": [
    {
      "src": "./api/index.js",
      "use": "@vercel/node"
    },
    {
      "src": "./client/package.json",
      "use": "@vercel/static-build",
      "config": {
        "buildCommand": "cd client && npm run build",
        "outputDirectory": "./client/build"
      }
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/index.js"
    },
    {
      "src": "/static/(.*)",
      "dest": "/client/build/static/$1"
    },
    {
      "src": "/(.*\\.(js|css|png|jpg|svg|ico|json))$",
      "dest": "/client/build/$1"
    },
    {
      "src": "/(.*)",
      "dest": "/client/build/index.html"
    }
  ]
}

配置说明 #

• builds部分新增的config字段指定了前端的构建命令和输出目录，解决之前静态构建无法正确识别React产物的问题
• 路由规则按照优先级配置：优先匹配所有/api/开头的请求转发给后端Express服务，其次匹配静态资源路径对应到client/build下的对应文件，最后所有未匹配的请求都返回index.html，适配React前端路由的History模式
• 无需额外修改Vercel控制台的根目录、构建命令等默认配置，直接用上述vercel.json即可生效

校验要求 #

• 确保client目录下的package.json存在build脚本，默认create-react-app生成的项目已经自带"build": "react-scripts build"配置，无需额外修改
• 部署前可先在本地client目录执行npm run build确认能正常生成build目录和对应产物

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