Docker部署Vue+Vite项目遇502及WebSocket连接失败问题求助

问题核心 #

Docker容器内运行Vite dev服务时：

• 开启HTTPS配置后访问域名出现502错误
• 注释HTTPS后网站可加载，但WebSocket连接失败导致热重载失效
• 切换为build+serve模式能正常访问，但丢失热重载功能

解决方案（保留dev模式+热重载） #

方案1：容器内开启HTTPS，同时配置WebSocket适配外部域名 #

调整vite.config.js

确保指定外部访问域名、WebSocket的主机与端口，保证证书路径正确：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8080,
    host: '0.0.0.0',
    // 容器内HTTPS证书配置（已确认文件存在于/app目录）
    https: {
      key: fs.readFileSync('./privkey.pem'),
      cert: fs.readFileSync('./fullchain.pem'),
    },
    // 指定外部访问的完整域名，让Vite生成正确的资源链接
    origin: 'https://websitename.xyz',
    hmr: {
      // WebSocket连接目标设为外部域名
      host: 'websitename.xyz',
      // 对应外部HTTPS端口（通常是443）
      clientPort: 443,
      // 使用wss协议匹配外部HTTPS
      protocol: 'wss'
    }
  }
});

修复反向代理（以Nginx为例）

确保代理协议与容器内服务一致（HTTPS），并正确转发WebSocket请求：

server {
    listen 443 ssl;
    server_name websitename.xyz;

    # 外部域名的SSL证书（可与容器内证书共用）
    ssl_certificate /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;

    location / {
        # 用HTTPS协议转发到容器内的Vite服务
        proxy_pass https://<容器IP或容器名>:8080;
        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;

        # 强制转发WebSocket升级请求
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

方案2：容器内用HTTP，反向代理处理HTTPS #

如果不想在容器内维护SSL证书，可让反向代理承担HTTPS处理，容器内仅运行HTTP服务：

调整vite.config.js

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8080,
    host: '0.0.0.0',
    // 指定外部HTTPS域名
    origin: 'https://websitename.xyz',
    hmr: {
      host: 'websitename.xyz',
      clientPort: 443,
      protocol: 'wss'
    }
  }
});

反向代理（Nginx）配置

server {
    listen 443 ssl;
    server_name websitename.xyz;

    ssl_certificate /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;

    location / {
        # 用HTTP转发到容器内服务
        proxy_pass http://<容器IP或容器名>:8080;
        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;

        # 转发WebSocket请求
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

问题原因说明 #

1. 502错误：反向代理使用HTTP协议转发到容器内的HTTPS服务，协议不匹配导致连接失败。
2. WebSocket连接失败：Vite默认使用localhost作为WebSocket连接目标，但浏览器从外部域名访问，导致地址不匹配，需手动指定hmr的主机与端口。
3. 保留热重载：必须使用npm run dev启动服务，build+serve是生产模式，本身不支持热重载。

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