如何在 Docker 中代理 Vite 的 HMR 请求？

Question

我有一个开发者环境，那里有一个Nginx dev服务器，一些请求被路由到我的本地机器，一些请求则被路由到互联网中的暂存环境。

我使用的是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是节点docker容器的内部端口，server.hmr.clientPort是本地计算机上浏览器向其发送请求的端口(docker将我的计算机的localhost:9026映射到节点容器的localhost:8015(