How to prevent Vite HMR web socket redirect loop on docker local dev environment for Quasar 2?

424 Views Asked by At

I've created a repo to demonstrate the issue: https://github.com/geoidesic/CLMP-quasar2

Here's the docker-compose.yml:

version: "3.9"
networks:
  web-network:
services:
  caddy:
    image: caddy:latest
    restart: always
    volumes:
      - ./caddy/data:/data
      - ./caddy/config:/config
      - ./caddy/Caddyfile:/etc/caddy/Caddyfile
      - ./caddy/logs:/logs
      - ./app:/var/www/html
    ports:
      - "80:80"
      - "443:443"
    networks:
      - web-network
    # this bit allows caddy on docker to see the listener on the external (to docker) port 8080 (which listens locally on my laptop)
    extra_hosts:
      host.docker.internal: host-gateway
      
  php:
    build: ./php
    tty: true
    restart: always
    volumes:
      - ./app:/var/www/html
      # xdebug=3.0.4 supports php7.4
      - ./php/conf.d/error_reporting.ini:/usr/local/etc/php/conf.d/error_reporting.ini
      - ./php/tmp:/tmp
    networks:
      - web-network
    extra_hosts:
      host.docker.internal: host-gateway

  mysql:
    image: mysql/mysql-server:8.0-aarch64
    ports:
      - "23306:3306"
    environment:
      MYSQL_ROOT_HOST: "%"
      MYSQL_ROOT_USER: root
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: dev
      MYSQL_USER: dev
      MYSQL_PASSWORD: dev
    volumes:
      - $PWD/db/data:/var/lib/mysql
    networks:
      - web-network
    extra_hosts:
      host.docker.internal: host-gateway

Here's the Caddyfile

fe.test.localhost {
    reverse_proxy host.docker.internal:8080
}
be.test.localhost {
    root * /var/www/html/be/webroot
    encode gzip
    php_fastcgi php:9000 
    file_server
}

I found this, which seems related: https://github.com/vitejs/vite/issues/6814

The error is:

(anonymous) @ client.ts:22
client.ts:230 [vite] server connection lost. polling for restart...
Navigated to https://fe.test.localhost/
client.ts:16 [vite] connecting...
client-entry.js:47 [Quasar] Running SPA.
client.ts:22 WebSocket connection to 'wss://fe.test.localhost/' failed: 
(anonymous) @ client.ts:22
 [vite] server connection lost. polling for restart...
0

There are 0 best solutions below