如何将独立Node.js/Express后端部署到Vercel供Next.js前端调用？

一、默认支持情况 #

Vercel完全支持部署独立Node.js后端，主要有两种实用方案：将后端作为Serverless Functions嵌入Next.js项目（推荐，无需单独部署），或者把独立Node.js项目部署为单独的Vercel应用。

二、具体实现方法 #

方式1：嵌入Serverless Functions到Next.js项目（推荐） #

这种方式无需单独维护后端项目，直接把后端逻辑放到Next.js项目的指定目录，Vercel会自动将其部署为Serverless Functions，前端通过相对路径调用即可，省去跨域配置麻烦。

操作步骤：

1. 如果是Next.js 12及以下的Pages Router，在项目根目录创建pages/api文件夹；如果是Next.js 13+的App Router，创建app/api文件夹。
2. 在该目录下编写后端接口文件，比如pages/api/user.js：

export default function handler(req, res) {
  if (req.method === 'GET') {
    // 这里写你的后端逻辑，比如查询数据库
    res.status(200).json({ name: 'John Doe', role: 'admin' });
  } else {
    res.status(405).json({ message: '仅支持GET请求' });
  }
}

3. 正常部署这个Next.js项目到Vercel，前端可以直接通过/api/user路径调用该接口。

如果你的后端用了Express框架，也可以适配成Serverless Functions：

// pages/api/express-api.js
import express from 'express';
import { VercelRequest, VercelResponse } from '@vercel/node';

const app = express();
app.use(express.json());

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  // 处理登录逻辑
  res.json({ success: true, token: 'fake-token-123' });
});

// 导出适配Vercel的处理函数
export default (req: VercelRequest, res: VercelResponse) => {
  app(req, res);
};

前端调用路径就是/api/express-api/login。

方式2：单独部署独立Node.js项目 #

如果你的后端是完整的独立项目（比如独立的Express/Koa服务），可以单独部署到Vercel：

操作步骤：

1. 确保项目根目录有package.json，并且包含启动脚本，比如：

{
  "name": "node-backend",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

2. 在项目根目录创建vercel.json配置文件，指定Vercel的构建规则和路由：

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

3. 将项目推送到GitHub/GitLab等版本库，然后在Vercel控制台导入该项目完成部署。

三、部署后的必要步骤 #

1. 跨域配置：如果是单独部署的后端应用，必须配置CORS允许前端域名访问。比如Express中使用cors包：

const cors = require('cors');
// 允许指定前端域名访问
app.use(cors({ origin: 'https://your-nextjs-app.vercel.app' }));

也可以直接在vercel.json中配置响应头实现跨域：

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Access-Control-Allow-Origin",
          "value": "https://your-nextjs-app.vercel.app"
        },
        {
          "key": "Access-Control-Allow-Methods",
          "value": "GET, POST, PUT, DELETE, OPTIONS"
        },
        {
          "key": "Access-Control-Allow-Headers",
          "value": "Content-Type, Authorization"
        }
      ]
    }
  ]
}

2. 环境变量配置：在Vercel控制台的项目「Settings」→「Environment Variables」中添加后端需要的环境变量（比如数据库连接字符串、API密钥等），确保后端能正常访问依赖服务。
3. 接口可用性测试：部署完成后，用Postman或浏览器访问后端域名（比如https://your-node-backend.vercel.app/api/login），确认接口能正常响应。然后在前端代码中把接口地址替换为这个域名。
4. 性能优化（可选）：如果用Serverless Functions，注意冷启动问题——可以升级到Vercel Pro计划启用函数预热，或者精简代码、减少依赖包体积来缩短冷启动时间。

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