React Vite应用搭配Docker与Traefik持续刷新问题求助

问题根源 #

Vite开发服务器的热更新依赖WebSocket实现，默认会尝试连接当前页面域名的3000端口，但Traefik作为反向代理通常对外暴露80/443端口，端口不匹配导致WebSocket连接失败，触发Vite的页面自动重试刷新机制。

解决方案 #

1. 调整Vite配置适配反向代理 #

修改vite.config.js，指定WebSocket的客户端连接参数，匹配Traefik暴露的端口和协议：

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

export default defineConfig({
  plugins: [react()],
  server: {
    cors: true,
    hmr: {
      clientPort: 443, // 对应Traefik使用的HTTPS端口，HTTP场景改为80
      protocol: 'wss', // HTTPS对应wss，HTTP场景改为ws
    },
  },
});

2. 配置Traefik转发WebSocket相关请求头 #

确保Traefik的路由规则支持WebSocket协议的头信息转发：

• Docker标签方式配置：

  - traefik.http.middlewares.ws-headers.headers.customrequestheaders.Upgrade=websocket
  - traefik.http.middlewares.ws-headers.headers.customrequestheaders.Connection=upgrade
  - traefik.http.routers.your-app-router.middlewares=ws-headers@docker
  

• YAML配置文件方式：

  http:
    middlewares:
      ws-headers:
        headers:
          customRequestHeaders:
            Upgrade: websocket
            Connection: upgrade
    routers:
      your-app-router:
        middlewares:
          - ws-headers
  

3. 确认Docker容器端口配置 #

保证Vite容器的3000端口被Traefik正确代理，无需直接对外发布端口：

services:
  your-app:
    build: .
    labels:
      - traefik.enable=true
      - traefik.http.routers.your-app.rule=Host(`mywebsite.com`)
      - traefik.http.routers.your-app.tls=true
      - traefik.http.services.your-app.loadbalancer.server.port=3000

4. 生产环境注意事项 #

如果是生产部署，务必先执行vite build生成静态文件，使用Nginx等静态服务器托管，此时不会依赖开发模式的WebSocket热更新机制。开发模式部署仅建议用于测试场景。

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