如何配置并在VPS部署Vue/Vite+Express+Socket.io多人游戏项目？

1. 配置服务器兼容本地与生产环境 #

环境变量区分 #

• 利用项目根目录的.env（本地）和.env.production（生产）文件定义环境专属配置：
  • 本地.env示例：

    NODE_ENV=development
    PORT=3000
    VITE_API_BASE_URL=http://localhost:3000
    MONGODB_URI=mongodb://localhost:27017/chess-game
    

  • 生产.env.production示例：

    NODE_ENV=production
    PORT=3000
    VITE_API_BASE_URL=https://your-domain.com
    MONGODB_URI=mongodb+srv://<user>:<password>@cluster0.mongodb.net/chess-game
    

• 在server.js中通过process.env读取配置，避免硬编码。

CORS与Socket.io跨域适配 #

• Express的CORS配置根据环境动态设置允许的源：

  const cors = require('cors');
  const allowedOrigin = process.env.NODE_ENV === 'production' 
    ? process.env.VITE_API_BASE_URL 
    : 'http://localhost:5173'; // Vite默认本地端口
  
  app.use(cors({
    origin: allowedOrigin,
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE']
  }));
  

• Socket.io实例同样配置跨域：

  const io = require('socket.io')(server, {
    cors: {
      origin: allowedOrigin,
      credentials: true,
      methods: ['GET', 'POST']
    }
  });
  

静态文件与路由适配 #

• 生产环境让Express托管前端打包后的dist文件夹，同时处理SPA路由刷新404问题：

  const path = require('path');
  
  if (process.env.NODE_ENV === 'production') {
    // 托管静态资源
    app.use(express.static(path.join(__dirname, '../dist')));
    // 所有非API请求返回index.html，适配Vue路由
    app.get('*', (req, res) => {
      res.sendFile(path.resolve(__dirname, '../dist/index.html'));
    });
  }
  

启动脚本区分 #

在package.json中添加环境专属启动命令：

{
  "scripts": {
    "dev": "NODE_ENV=development nodemon server/server.js", // 本地开发用nodemon热重载
    "start": "NODE_ENV=production node server/server.js", // 生产环境启动
    "build": "vite build"
  }
}

2. 上传项目至Direct Admin VPS实现线上运行 #

步骤1：本地打包与文件上传 #

• 本地执行npm run build生成dist文件夹。
• 通过FTP或SFTP上传以下文件到VPS的域名根目录（与public_html同级，建议新建文件夹如chess-server）：
  • server文件夹
  • package.json、package-lock.json
  • .env.production
  • dist文件夹

步骤2：安装依赖与环境配置 #

• 登录VPS的SSH终端，进入chess-server目录：

  cd /home/your-username/domains/your-domain.com/chess-server
  

• 安装生产依赖：

  npm install --production
  

• 确认.env.production中的配置正确：
  • MongoDB连接串需允许VPS的IP访问（如果用云MongoDB，需在控制台添加白名单）
  • 端口号（如3000）需在VPS防火墙中开放

步骤3：后台运行服务 #

• 安装PM2进程管理器（用于后台托管Node服务，避免SSH断开后服务停止）：

  npm install -g pm2
  

• 启动服务并命名：

  pm2 start server/server.js --name chess-game-server
  

• 设置PM2开机自启：

  pm2 startup
  pm2 save
  

步骤4：配置反向代理（解决跨域与端口问题） #

Direct Admin中配置反向代理，将域名请求转发到Node服务：

1. 登录Direct Admin，进入对应域名的**「Reverse Proxy」**设置。
2. 添加两条规则：
   • 第一条：
     • URL: /api/*
     • Destination: http://localhost:3000/api/$1
   • 第二条：
     • URL: /socket.io/*
     • Destination: http://localhost:3000/socket.io/$1
3. 保存配置，生效后前端请求https://your-domain.com/api或/socket.io会被代理到Node服务，避免跨域。

步骤5：验证运行 #

• 访问你的域名，确认前端正常加载。
• 测试Socket.io连接与多人游戏功能，确保数据交互正常。

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