部署到Heroku时socket.io服务端是否需要与现有后端分开部署？

你完全不需要部署三个独立服务，Socket.io不需要单独占用端口，也不需要独立部署，前端甚至可以和后端打包后共用同一个Heroku服务实例，最低只需要1个服务就能跑通全栈+Socket.io功能。

本地开发阶段配置调整 #

• 直接将Socket.io挂载到现有运行在5000端口的后端HTTP服务即可，无需额外开启新端口，核心代码示例如下：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const app = express();
const server = http.createServer(app);

// 挂载Socket.io到现有后端服务
const io = new Server(server, {
  // 本地开发放行前端端口，生产环境替换为你的线上前端域名
  cors: { origin: "http://localhost:3000" }
});

// 原有API路由、MongoDB相关业务逻辑无需改动
app.get('/api/xxx', (req, res) => {
  // 你的业务逻辑
});

// Socket事件监听正常编写即可
io.on('connection', (socket) => {
  // 你的Socket业务逻辑
});

// 统一监听端口，本地用5000，Heroku会自动注入process.env.PORT变量
const PORT = process.env.PORT || 5000;
server.listen(PORT, () => console.log(`服务运行在端口${PORT}`));

• 前端连接Socket时，本地环境直接填io('http://localhost:5000')，生产环境替换为你的Heroku服务域名即可，无需额外指定端口。

Heroku部署两种可选方案 #

方案1：全栈共用1个Heroku服务（成本最低，无需多开实例） #

• 后端新增静态资源托管规则，指向React项目client文件夹build后的产物，所有非API、非Socket的请求统一返回React的index.html文件，实现后端托管前端页面。
• 部署时将整个项目（包含client和后端代码）推送到Heroku，配置Heroku构建命令先执行client端的npm run build打包前端，再安装后端依赖，启动命令直接启动你的后端服务即可。
• 该方案下前端页面、后端API、Socket.io服务全部共用同一个Heroku分配的端口，无需额外配置。

方案2：前后端分开部署（仅需2个服务，无需第三个Socket服务） #

• 如果你需要前端单独部署一个Heroku实例、后端单独部署一个Heroku实例，Socket.io依然挂载在后端服务上即可，不需要额外新增第三个服务。
• 仅需将后端Socket.io的cors规则中的origin替换为你的前端线上域名，即可正常通信。

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