如何将Socket.io+SvelteKit多人游戏部署到Vercel？

一、修正Express服务器代码（server.ts） #

你的server.ts存在几个关键问题，逐一修复如下：

1. 修正HTTP模块导入
   Node.js的http模块为小写命名，将大写的"HTTP"改为"http"：

import http from "http";

2. 解决.ts文件导入错误
   Node.js无法直接识别.ts扩展名的导入，你有两种修正方式：

• 去掉扩展名，TypeScript会自动解析对应文件：

  import injectSocketIO from "./src/lib/socket-handler";
  

• 若项目构建后socket-handler.ts会编译到build目录，直接导入编译后的.js文件：

  import injectSocketIO from "./build/lib/socket-handler.js";
  

3. 调整监听端口
   Vercel部署时会自动分配端口，不能硬写固定值，需读取环境变量：

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Running on http://localhost:${PORT}`);
});

修正后的完整server.ts：

import http from "http";
import { handler } from './build/handler.js';
import injectSocketIO from "./src/lib/socket-handler";
import express from 'express';

const app = express();
const server = http.createServer(app);

injectSocketIO(server);

app.use(handler);

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Running on http://localhost:${PORT}`);
});

二、配置Vercel部署相关设置 #

1. 修改package.json脚本 #

添加构建与启动脚本，确保先编译TypeScript再构建SvelteKit：

{
  "scripts": {
    "dev": "vite dev",
    "build": "tsc && vite build",
    "start": "node build/server.js"
  }
}

2. 添加vercel.json配置 #

在项目根目录创建vercel.json，告诉Vercel使用自定义Express服务器：

{
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "functions": {
    "build/server.js": {
      "runtime": "@vercel/node@20"
    }
  },
  "routes": [
    {
      "src": "/(.*)",
      "dest": "build/server.js"
    }
  ]
}

三、确保Socket.io客户端连接正确 #

客户端不要硬写localhost地址，使用当前域名自动适配：

import { io } from "socket.io-client";
const socket = io({
  autoConnect: true,
  url: window.location.origin
});

四、本地预验证 #

先执行npm run build确认build目录生成了编译后的server.js与socket-handler.js，再执行npm start测试生产环境是否正常，无问题后再部署到Vercel。

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