Caddy docker VueJS HMR websockets redirect loop

Help
1

1. The problem I’m having:

I use Caddy as part of a docker-compose environment for local development. The Caddy creates a reverse-proxy to the VueJS dev server. However, for some reason Vite’s HMR setup is getting stuck in a redirect loop as it tries to connect websockets on port 8080.

I also tried telling vite to use port 80 for hmr but the same loop occurs. When I try browse to the websockets URL, I get this:

The web page at wss://fe.test.localhost/ might be temporarily down or it may have moved permanently to a new web address.
ERR_UNKNOWN_URL_SCHEME

I also tried port 443:

    devServer: {
      port: 8080,
      open: false, 
      hmr: {
        port: 443
      }
    },

but still loop da loop.

2. Error messages and/or full log output:

(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:8080/' failed: 
(anonymous) @ client.ts:22
 [vite] server connection lost. polling for restart...

3. Caddy version:

v2.6.4 h1:2hwYqiRwk1tf3VruhMpLcYTg+11fCdr8S3jhNAdnPy8=

(btw… your instructions in the Help template here are wrong… it says docker-compose exec caddy caddy version it should say, docker exec <name-of-your-caddy-container> caddy version)

4. How I installed and ran Caddy:

I run caddy via docker as a container.

a. System environment:

Docker

b. Command:

Though shalt not kill... oh wait... that's a commandment! I'm using docker, no commands.

c. Service/unit/compose file:

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

d. My complete Caddy config:

{
    debug
}
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
}

5. Links to relevant resources:

Might be related: HMR does not work when using local reverse proxy via Docker/Caddy · Issue #6814 · vitejs/vite · GitHub

Also worth remembering:

2

wss and 8080 are incompatible here. (Because wss implies “secure” and port 8080 is not secured). It would need to connect using port 443 instead if using wss, or with ws and port 8080.

Yeah, you can’t use wss:// in the browser’s address bar. That’s a special scheme that can only be used with new WebSocket() in JS.

3

Hi,

Thanks for your reply.

It would need to connect using port 443 instead if using wss

As I mentioned in the issue, I did try setting it to port 443 but the loop still happened. The error message just changed to client.ts:22 WebSocket connection to 'wss://fe.test.localhost/' failed:

4

@francislavoie any further help here please?

5

I’m not seeing enough information to be able to help here.

6

@francislavoie What’s missing in terms of information? What else can I provide? Happy to do so.

7

This is sounding more like a question of how to configure Vite than Caddy so I’m not sure I can do much to help here.

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.