如何将webpack+socket.io搭建的前后端分离应用整合为单项目部署？

1. 调整项目结构 #

合并前后端项目到同一仓库，统一管理依赖，调整后目录结构如下：

.
├── src
│   ├── client  # 原client/src下所有文件迁移到这里
│   │   └── index.js
│   └── server  # 原server下所有文件迁移到这里
│       └── app.js
├── public  # 原client/public下所有文件迁移到这里
│   └── index.html
├── webpack.config.js
└── package.json

将前后端package.json中的依赖合并到根目录的package.json中，删除原client和server目录下的package.json。

2. 修改服务端代码 #

调整src/server/app.js，增加静态资源托管逻辑，删除本地开发用的CORS配置：

const express = require('express');
const app = express();
const server = require('http').Server(app);
// 生产环境可按需配置cors，本地开发同源场景不需要额外配置
const Socketio = require('socket.io')(server);

// 托管webpack打包后的前端静态资源
app.use(express.static('dist'));

// 根路由直接返回前端页面
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/../../public/index.html');
});

Socketio.on('connection', socket => {
  socket.on('do-something', () => {
    console.log('doing something...');
  });
});

// 用环境变量区分生产/开发端口
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`listening on port ${PORT}`);
});

3. 修改前端配置 #

• 调整src/client/index.js中的socket连接逻辑，不需要写死服务端地址，同源下直接连接即可：

const io = require('socket.io-client');
const socket = io();

const someFunction = () => {
  socket.emit('do-something');
}

• 调整webpack.config.js的打包输出路径，统一输出到根目录的dist文件夹：

module.exports = {
  entry: './src/client/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  // 保留你原有的其他webpack配置
}

4. 配置启动脚本 #

在根目录package.json中配置统一的开发、打包、启动命令：

{
  "scripts": {
    "build": "webpack --mode production",
    "start": "node src/server/app.js",
    "dev": "concurrently \"webpack --watch --mode development\" \"nodemon src/server/app.js\""
  },
  "devDependencies": {
    "concurrently": "^8.0.0",
    "nodemon": "^2.0.0"
    // 保留你原有的其他依赖
  }
}

开发环境执行npm run dev即可同时启动代码监听和服务端，不需要开两个终端；生产环境执行npm run build打包后，执行npm start即可启动单服务，直接访问对应端口即可使用完整功能。

根据业务规模不同，常用方案分为三类：

• 中小流量场景：直接使用上述整合方案，Node服务同时托管静态资源和Socket.io服务，前面可加Nginx做反向代理，配置Websocket转发规则即可，部署成本低、维护简单。
• 中大型流量场景：前后端拆分部署，前端静态资源上传CDN或由Nginx单独托管，Socket.io服务做集群部署，前面配置负载均衡并开启会话粘滞，若需要跨节点消息同步可搭配Socket.io Redis Adapter实现。
• 轻量业务场景：可使用支持WebSocket的Serverless平台部署，不需要维护服务器，按调用量付费，适合长连接并发量不高的业务。

生产部署注意点：

• 所有环境配置（域名、端口、CORS规则等）用环境变量管理，不要硬编码在代码中
• 配置Socket.io的心跳、重连策略，避免网络波动导致连接频繁断开
• 增加Socket连接数、消息量的监控，便于排查线上问题

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