Vercel通配符路由在Hapi.js后端触发404错误求助

核心问题分析 #

Vercel的Node.js Serverless Runtime对入口文件有特定要求，直接沿用Express的配置无法适配Hapi.js的运行模式，导致路由匹配失效。

解决方案步骤 #

1. 修正vercel.json配置

确保路由和构建路径正确，注意dest字段的路径前缀：

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

2. 适配Hapi.js到Vercel Serverless环境

Vercel要求导出一个请求处理函数，而非直接启动Hapi服务器。修改你的index.ts：

import Hapi from '@hapi/hapi';
import { VercelRequest, VercelResponse } from '@vercel/node';

// 初始化Hapi服务器
const createServer = async () => {
  const server = Hapi.server({
    port: process.env.PORT || 3000,
    host: '0.0.0.0',
    // 禁用Hapi的默认端口监听，由Vercel处理请求
    listener: {
      listen: () => Promise.resolve()
    }
  });

  // 注册你的路由
  server.route({
    method: 'GET',
    path: '/',
    handler: () => 'Hello from Hapi on Vercel!'
  });

  // 添加其他路由...

  await server.initialize();
  return server;
};

// 导出Vercel请求处理函数
export default async (req: VercelRequest, res: VercelResponse) => {
  const server = await createServer();
  
  // 使用Hapi的inject方法处理Vercel请求
  const hapiResponse = await server.inject({
    method: req.method,
    url: req.url,
    payload: req.body,
    headers: req.headers
  });

  // 将Hapi响应转换为Vercel响应
  res.status(hapiResponse.statusCode)
     .set(hapiResponse.headers)
     .send(hapiResponse.result);
};

3. 验证TypeScript编译配置

检查tsconfig.json的outDir是否指向dist目录，确保编译后的文件路径正确：

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "ES2020",
    "module": "CommonJS",
    "strict": true
    // 其他配置...
  }
}

4. 本地测试

运行vercel dev命令在本地模拟Vercel环境，查看控制台日志排查错误，确认所有路由正常响应。

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