React+NodeJS部署至Vercel遇后端访问失败问题求助

我尝试将带有NodeJS后端的React应用部署至Vercel，前端能正常交互，但调用Node服务器时触发报错，无法访问后端。

项目目录结构 #

vercel.json配置 #

{
  "version": 2,
  "builds": [
    {
      "src": "backend/server/index.js",
      "use": "@vercel/node"
    },
    {
      "src": "client/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "build"
      }
    }
  ],
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "backend/server"
    },
    {
      "source": "/(.*)",
      "destination": "/client/$1"
    }
  ]
}

报错信息 #

file:///C:/Users/user/AppData/Roaming/npm/node_modules/vercel/node_modules/@vercel/node/dist/dev-server.mjs:1073
    return listener(req, res);
           ^
file:///C:/Users/user/AppData/Roaming/npm/node_modules/vercel/node_modules/@vercel/node/dist/dev-server.mjs:1073
    return listener(req, res);
           ^
TypeError: listener is not a function
    at Server.<anonymous> (file:///C:/Users/user/AppData/Roaming/npm/node_modules/vercel/node_modules/@vercel/node/dist/dev-server.mjs:1073:12)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
TypeError: listener is not a function
    at Server.<anonymous> (file:///C:/Users/user/AppData/Roaming/npm/node_modules/vercel/node_modules/@vercel/node/dist/dev-server.mjs:1073:12)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
Error: An unexpected error occurred!
Error: Command failed: taskkill /pid 22452 /T /F
ERROR: The process "22452" not found.

    at genericNodeError (node:internal/errors:984:15)
    at wrappedFn (node:internal/errors:538:14)
    at ChildProcess.exithandler (node:child_process:422:12)
    at ChildProcess.emit (node:events:519:28)
    at ChildProcess.emit (node:domain:488:12)
    at maybeClose (node:internal/child_process:1105:16)
    at ChildProcess._handle.onexit (node:internal/child_process:305:5)
Error: An unexpected error occurred!
Error: Command failed: taskkill /pid 16132 /T /F
ERROR: The process "16132" not found.

    at genericNodeError (node:internal/errors:984:15)
    at wrappedFn (node:internal/errors:538:14)
    at ChildProcess.exithandler (node:child_process:422:12)
    at ChildProcess.emit (node:events:519:28)
    at ChildProcess.emit (node:domain:488:12)
    at maybeClose (node:internal/child_process:1105:16)
    at Socket.<anonymous> (node:internal/child_process:457:11)
    at Socket.emit (node:events:519:28)
    at Socket.emit (node:domain:488:12)
    at Pipe.<anonymous> (node:net:339:12)

问题原因及解决步骤 #

1. 修正后端入口文件导出方式 #

报错TypeError: listener is not a function是因为Vercel Node运行时无法获取有效的服务器处理实例。Vercel要求后端入口文件必须导出Express实例或HTTP处理函数，不能直接调用app.listen()启动服务器。

修改backend/server/index.js：

// 错误写法：直接启动服务器
// app.listen(3001, () => console.log("Server running"));

// 正确写法：导出app实例
export default app;
// 若使用CommonJS模块，改为：
// module.exports = app;

2. 调整vercel.json重写规则 #

当前重写规则中，/api/(.*)的目标路径未指向正确的后端入口文件，需修改为：

"rewrites": [
  {
    "source": "/api/(.*)",
    "destination": "/backend/server/index.js"
  },
  {
    "source": "/(.*)",
    "destination": "/client/$1"
  }
]

3. 清理本地缓存重新启动 #

本地开发时的进程错误大概率是缓存导致，执行以下命令清理缓存并重启：

vercel dev --clean-cache

或手动删除项目根目录下的.vercel文件夹后，重新运行vercel dev。

4. 确认前端构建命令 #

检查client/package.json中的build命令是否能正确生成build目录：

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

确保执行npm run build后，client目录下能生成build文件夹。

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