Docker+Nginx环境下React（CRA/Vite）WebSocket连接失败求助

一、修复Nginx的WebSocket代理配置 #

WebSocket连接失败的核心原因是Nginx未正确代理WebSocket请求，需在对应server的location块中添加升级配置与头信息：

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    include /etc/nginx/conf.d/certs.txt;
    ssl_protocols TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    server_name react-apps.*;

    location / {
        proxy_pass http://react-apps:3000;
        # WebSocket代理必需配置
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

二、CRA项目配置调整 #

在docker-compose中添加WebSocket相关环境变量，指定WDS的外部访问地址与端口：

react-apps:
    container_name: ${COMPOSE_PROJECT_NAME}-react-apps
    restart: always
    build:
      context: ../rfe_react_apps/
      dockerfile: Dockerfile.dev
    command: yarn start
    environment:
      - REACT_APP_SENTRY=${SENTRY}
      - REACT_APP_ENV=development
      - BROWSER=none
      # 添加CRA热重载配置
      - WDS_SOCKET_HOST=react-apps.raphe.localhost
      - WDS_SOCKET_PORT=443
      - WDS_SOCKET_PATH=/ws
      - HTTPS=true
    expose:
      - 3000
    volumes:
      - ../rfe_react_apps/:/app/

三、Vite项目配置调整 #

1. 修改vite.config.js，适配反向代理下的HMR配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',
    port: 5173,
    hmr: {
      host: 'vite-react-apps.raphe.localhost',
      port: 443,
      protocol: 'wss'
    },
    watch: {
      usePolling: true,
      interval: 100
    }
  }
})

2. 对应Vite项目的Nginx配置，需添加相同的WebSocket代理规则（参考CRA的Nginx配置修改）
3. 确保docker-compose中Vite服务的端口暴露正确：

vite-react-apps:
    container_name: ${COMPOSE_PROJECT_NAME}-vite-react-apps
    restart: always
    build:
      context: ../rfe_vite_apps/
      dockerfile: Dockerfile.dev
    command: yarn dev
    environment:
      - NODE_ENV=development
      - BROWSER=none
    expose:
      - 5173
    volumes:
      - ../rfe_vite_apps/:/app/

四、额外排查点 #

• 核对Docker镜像更新后的Node版本，避免版本兼容差异
• 检查Chrome浏览器插件或安全策略，确认未阻止WSS连接
• 验证容器间网络连通性，确保Nginx能正常访问Node服务容器

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