2021年无需使用Next.js在Vercel上托管部署MERN应用的相关问题

不需要重写全部后端逻辑，只需做少量配置调整即可完成部署：

前置准备 #

• 登录MongoDB Atlas控制台，将网络访问配置中的IP白名单调整为允许所有IP（0.0.0.0/0），Vercel无服务器函数的出口IP为动态值，固定IP白名单会导致数据库连接失败。
• 所有敏感配置（比如MongoDB连接串、密钥等）不要硬编码在代码中，统一用环境变量读取。

Express项目改造 #

• 安装cors中间件并配置，允许你的前端生产域名跨域访问，避免接口请求报错：

const cors = require('cors')
app.use(cors({
  origin: ['http://localhost:3000', '你的前端生产域名'] // 按需添加允许的域名
}))

• 调整Express入口文件的监听逻辑，仅在本地开发环境启动端口监听，生产环境由Vercel自动处理请求转发：

// 你的其他业务代码、路由逻辑保持不变
if (process.env.NODE_ENV === 'development') {
  app.listen(5000, () => console.log('本地服务运行在http://localhost:5000'))
}
// 导出app实例供Vercel调用
module.exports = app

• 在项目根目录新建vercel.json配置文件，内容如下：

{
  "version": 2,
  "builds": [
    {
      "src": "server.js", // 此处替换为你的Express实际入口文件名
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)", // 所有/api开头的请求都转发到Express处理
      "dest": "server.js" // 和上面的入口文件名保持一致
    }
  ]
}

如果需要所有请求都转发到Express，可以把routes中的src改为/(.*)。

• 确认所有后端依赖都写在package.json的dependencies字段中，不要放在devDependencies，Vercel部署时默认不会安装开发依赖。

Vercel部署配置 #

• 将后端代码推送到Git仓库后，导入到Vercel控制台。
• 进入项目设置的「Environment Variables」页面，添加所有后端需要的环境变量，比如MONGODB_URI，变量名要和本地开发时使用的完全一致。
• 无需修改默认构建命令，直接触发部署即可，部署完成后得到的Vercel域名就是后端服务的访问地址，前端接口的baseURL替换为该域名即可。

常见问题排查 #

如果部署后接口报错，优先检查以下几点：

• MongoDB Atlas的IP白名单配置是否正确，是否允许了所有IP访问
• Vercel控制台配置的环境变量是否存在拼写错误、漏配的情况
• vercel.json中的入口文件路径是否和实际项目中的入口文件路径一致
• cors配置是否包含了你的前端生产域名

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