在Vercel部署Express+MongoDB后端后出现Error 404问题求助

问题概述 #

部署基于Express和MongoDB的后端应用到Vercel后，出现404: NOT_FOUND错误，Vercel日志无异常提示，已按官方文档配置vercel.json和package.json的builds字段。

可能原因及对应解决方案 #

1. Serverless Functions配置不匹配 #

Vercel的Serverless Functions对后端入口有特定规则，当前配置与代码结构不匹配：

• 问题点：vercel.json的rewrites规则将/api/(.*)指向/api，但未正确指定函数入口文件；根目录的index.mjs不符合Vercel默认的函数识别规则（默认识别api目录下的文件）。
• 解决方案：
  • 方案一：调整目录结构
    将index.mjs移动到项目根目录的api文件夹中，并重命名为index.mjs或route.mjs，同时修改vercel.json：

    {
      "rewrites": [{ "source": "/api/(.*)", "destination": "/api/index.mjs" }]
    }
    

  • 方案二：通过package.json指定入口
    如果不想移动文件，在package.json中添加builds和routes配置：

    {
      "builds": [
        {
          "src": "index.mjs",
          "use": "@vercel/node"
        }
      ],
      "routes": [
        {
          "src": "/api/(.*)",
          "dest": "/index.mjs"
        }
      ]
    }
    

2. 多余的app.listen()调用 #

Vercel Serverless环境不需要手动启动端口，app.listen()会干扰函数初始化：

• 问题点：代码中手动调用app.listen(3000)，不符合Vercel函数运行逻辑。
• 解决方案：
  删除以下代码：

  app.listen(3000, () => {
    console.log('Server is running on port 3000!');
  });
  

  替换为导出Express应用实例：

  export default app;
  

3. 路由挂载顺序错误 #

当前代码中app.listen()在路由挂载前执行，可能导致Serverless环境下路由未加载完成就处理请求：

• 解决方案：
  调整代码顺序，先挂载API路由，再处理静态文件和兜底路由，最后导出应用：

  // 挂载API路由
  app.use('/api/user', userRouter);
  app.use('/api/auth', authRouter);
  app.use('/api/listing', listingRouter);
  
  // 处理静态文件与前端兜底路由
  app.use(express.static(path.join(__dirname, 'client', 'dist')));
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client', 'dist', 'index.html'));
  });
  
  // 错误处理中间件
  app.use((err, req, res, next) => {
    const statusCode = err.statusCode || 500;
    const message = err.message || 'Internal Server Error';
    return res.status(statusCode).json({
      success: false,
      statusCode,
      message,
    });
  });
  
  // 导出应用实例
  export default app;
  

4. 环境变量未正确配置 #

MongoDB连接字符串MONGO可能未在Vercel控制台配置，导致服务无法正常初始化：

• 解决方案：
  1. 登录Vercel控制台，进入项目→Settings→Environment Variables。
  2. 添加MONGO变量，值为你的MongoDB连接字符串。
  3. 重新部署项目，确保环境变量生效。

5. 静态文件路径问题 #

前端静态文件client/dist可能未被正确打包上传，导致兜底路由无法找到index.html：

• 解决方案：
  确认package.json的build命令正确打包前端：

  "scripts": {
    "build": "cd client && npm install && npm run build"
  }
  

  部署时确保Vercel执行了build命令，生成正确的client/dist目录。

验证步骤 #

1. 应用上述修改后重新部署到Vercel。
2. 访问API路由（如/api/auth/register），检查响应是否正常。
3. 查看Vercel函数日志（Functions→对应函数→Logs），确认MongoDB连接状态和请求处理情况。

内容的提问来源于stack exchange，提问作者Victor Schmoegel Oliveira