Heroku跨Docker容器部署Socket.io出现404连接失败求助

你现在连接持续返回404的根本原因，是客户端连接地址完全匹配错了服务进程：空参数的io.connect()会默认取当前页面所在的源地址发起连接，也就是承载静态资源的web.1进程的服务地址，但这个进程里根本没有部署Socket.io的服务端点，请求自然会被路由到不存在的路径抛出404。

可直接落地的调整方案 #

1. 先厘清Heroku的端口路由规则 #

别被“动态随机端口”的旧认知误导：Heroku只会给所有标记为web类型的进程，通过平台路由器做统一的80/443端口流量转发，所谓的process.env.PORT只是平台内部路由器和进程之间的通信端口，根本不会直接暴露给公网访问。
你现在的双容器部署要正常跑，首先要保证两个进程的Procfile配置都是web类型：

• web.1（静态前端容器）：承接根路径的静态资源请求
• server.1（Socket.io服务容器）：承接平台转发过来的Socket.io专属路径请求
  如果把server进程标成worker类型，不管怎么配都没法被公网访问到。

2. 修正前端客户端的连接配置 #

不要用默认空参数的io.connect()直接连：

• 在应用环境配置中新增前端可读取的Socket服务地址变量，对应server.1进程在平台上的实际路由路径
• 客户端代码做如下对齐调整：

// 从全局注入的配置读取服务地址，不硬编码动态端口
const socketServerBase = window.__SOCKET_SERVER_ADDR__; 
var socket = io.connect(socketServerBase, {
  transports: ["xhr-polling"], // 和服务端的传输协议配置完全保持一致
  path: "/socket.io" // 路径和服务端配置严格对齐，无自定义路径就保持默认值
});

重点提醒：绝对不要在前端代码里拼接process.env.PORT的动态端口做连接地址，这些端口仅在Heroku内部网络流转，公网完全访问不到。

3. 对齐服务端的路由匹配规则 #

• 确保Socket.io服务监听的路径，和平台路由器转发到server.1进程的请求路径完全匹配，避免出现“请求已经到了server进程，但因为路径不匹配返回404”的问题
• 把服务端CORS配置里的宽松origin: '*'改成前端静态站点的实际访问域名，避免平台层的CORS规则拦截正常的Socket连接请求

4. 配置路由分流兜底逻辑 #

如果不想手动维护两个进程的地址映射，直接在Heroku路由器层做路径分流即可：

• 所有路径为/、/static/*的静态资源请求，统一转发到web.1静态容器
• 所有以/socket.io/*开头的请求，统一转发到server.1的Socket.io服务容器
  配完分流之后，前端甚至不需要额外写地址逻辑，保持默认io.connect()发起的请求会被路由器自动分发到正确的进程，从根源上避免找错进程导致的404。

高频踩坑提醒 #

• 前后端的传输协议配置必须严格一致：服务端只开放xhr-polling的话，就不要让客户端自动尝试WebSocket连接，否则会因为协议协商失败触发404
• 不要在单web进程里跑两个服务：如果把静态资源和Socket服务挤在同一个dyno里，不仅会浪费拆分架构的资源优势，还会出现进程重启导致的连接中断问题
• 不要把server进程标记为worker类型：Heroku的worker进程不会被平台分配任何公网路由，无论端口配置多正确，外部都没法连接

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