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

【问题标题】：How to proxy Vite's HMR request in Docker?如何在 Docker 中代理 Vite 的 HMR 请求？
【发布时间】：2022-03-06 01:58:32
【问题描述】：

我有一个开发人员环境，其中有一个 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:

有什么想法吗？

【问题讨论】：

标签： node.js nginx vite

【解决方案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）

【讨论】：