如何在码头代理Vite的HMR请求？

Question

我有一个开发人员环境，其中有一个Nginx服务器，一些请求被路由到我的本地机器，另一些请求被路由到internet中的暂存环境。

我正在使用vitejs.dev，除了Vite的热模块替换(HMR)的Websocket连接之外，一切都能工作。

vite.config.ts

export default defineConfig({
  server: {
    host: true,
    port: 3300,
    hmr: {
      path: '/__vite_hmr',
    },
  },
})

nginx配置

location ~* /__vite_hmr {
    proxy_pass "http://cr-frontend:3300";
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
}

我可以成功地将其他请求代理到http://cr-frontend:3300，但不能代理Vite的HMR。我得到的是：

client.ts:28 WebSocket connection to 'wss://url.xyz:3300/__vite_hmr' failed: 

有什么想法吗？

Answer 1

Vite关于server和server.hmr属性配置选项的文档非常简陋。

我已经消除了与此配置相同的错误：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    //https://github.com/vitejs/vite/discussions/3396
    host: true,
    port: 8015, //default is 3000 but I have multiple apps within one site running so I need to define multiple custom ports on the same machine / container
    https: true,
    hmr:{
      clientPort: 9026,
    },
  }
})

其中，server.port是节点停靠容器的内部端口，而server.hmr.clientPort是本地机器上的浏览器发送请求的端口(docker将我的机器的localhost:9026映射到节点容器的localhost:8015)