Nginx托管Docker容器中HMR失效：仅容器内编译时异常

环境配置 #

Docker Compose Nginx服务配置 #

services:
  nginx:
    image: nginx:1.25.3
    volumes:
      - ./server/nginx/templates/dev.mysite.com:/etc/nginx/conf.d/default.conf
      - ./workspace/apps/workspace/website/dist:/var/www/dev.mysite.com/website
    ports:
      - "80:80"

Nginx配置模板（dev.mysite.com） #

server {
  listen 80;
  listen [::]:80;
  root /var/www/dev.mysite.com;
  index index.html index.htm index.nginx-debian.html;
  client_max_body_size 10M;
  server_name dev.mysite.com;

  location / {
    alias /var/www/dev.mysite.com/website/;
    try_files $uri $uri/ /index.html;
  }
}

Quasar应用容器配置 #

website:
  container_name: website
  image: node:16.18
  command: sh -c "yarn && yarn dev:docker"
  depends_on:
    - nginx
  working_dir: /build-volume/workspace/apps/workspace/website
  volumes:
    - ./:/build-volume
    - ./workspace/apps/workspace/common-app:/build-volume/workspace/apps/node_modules/common-app
  environment:
    BUILD_MODE: dev
    WATCHPACK_POLLING: true
    CHOKIDAR_USEPOLLING: true

现象说明 #

• 本地主机运行Quasar应用时，Nginx托管的网站可通过HMR（热模块替换）正常重载，开发服务器将编译后的文件写入./workspace/apps/workspace/website/dist目录
• 通过容器运行编译时，文件同样写入上述目录，但浏览器无法自动感知变更，必须手动刷新才能生效

补充：浏览器控制台报错 #

WebSocket连接到ws://dev.mysite.com/sockjs-node/xxxx/websocket失败: 连接建立错误: net::ERR_CONNECTION_REFUSED

问题原因 #

1. HMR的WebSocket连接未被Nginx转发：本地运行时，Quasar开发服务器直接与浏览器建立WebSocket连接传递更新通知；容器内运行时，开发服务器的WebSocket服务仅监听容器内部端口，Nginx未配置对应转发规则，导致浏览器无法连接到HMR服务，接收不到更新信号。
2. 文件系统事件传递问题是次要因素——虽然开启了轮询参数，但核心问题已由控制台的连接拒绝报错明确指向WebSocket路由缺失。

解决方案 #

1. 修改Nginx配置，转发WebSocket请求 #

更新dev.mysite.com模板，添加HMR请求的转发规则：

server {
  listen 80;
  listen [::]:80;
  root /var/www/dev.mysite.com;
  index index.html index.htm index.nginx-debian.html;
  client_max_body_size 10M;
  server_name dev.mysite.com;

  # 转发HMR的WebSocket请求到Quasar容器
  location /sockjs-node/ {
    proxy_pass http://website:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
  }

  location / {
    alias /var/www/dev.mysite.com/website/;
    try_files $uri $uri/ /index.html;
  }
}

2. 调整Quasar容器配置，允许外部访问HMR服务 #

website:
  container_name: website
  image: node:16.18
  command: sh -c "yarn && yarn dev:docker"
  depends_on:
    - nginx
  working_dir: /build-volume/workspace/apps/workspace/website
  volumes:
    - ./:/build-volume
    - ./workspace/apps/workspace/common-app:/build-volume/workspace/apps/node_modules/common-app
  environment:
    BUILD_MODE: dev
    WATCHPACK_POLLING: true
    CHOKIDAR_USEPOLLING: true
    HOST: 0.0.0.0 # 让开发服务器监听容器所有网卡，允许Nginx访问
  ports:
    - "8080:8080" # 可选，本地调试用，Nginx内部访问可不暴露

3. 确保Quasar的dev命令配置正确 #

在项目package.json中，确保dev:docker命令指定监听地址：

"scripts": {
  "dev:docker": "quasar dev --host 0.0.0.0"
}

验证操作 #

重启容器使配置生效：

docker-compose down && docker-compose up -d

修改Quasar代码后，浏览器应自动重载，控制台不再出现WebSocket连接错误。

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