HMR won't connect behind reverse proxy with Firefox

[Reivax47]

Environment

Nuxi 3.0.0                                                                                                                                                                          14:31:41
                                                                                                                                                                                    14:31:42
RootDir: /root/front                                                                                                                                                                14:31:42
Nuxt project info:                                                                                                                                                                  14:31:42

------------------------------
- Operating System: `Linux`
- Node Version:     `v19.2.0`
- Nuxt Version:     `3.0.0`
- Nitro Version:    `1.0.0`
- Package Manager:  `npm@8.19.3`
- Builder:          `vite`
- User Config:      `vite`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

Reproduction

https://github.com/Reivax47/Nuxt3Alone.git On this repo you could find on simple 'Hello World' Nuxt3 app.
The app is in a docker container. The reverse proxy is Caddy, in a docker container too. You could change the URL in Caddyfile and then docker compose up -d.

Describe the bug

Vite can't connect HMR with firefox, but does with chrome. I apply nuxt/nuxt#12748 but no success.

Chrome :

[vite] connecting... client.ts:134
 [vite] connected.

Firefox :

[vite] connecting... [client.ts:19:8](https://komelia.fr/src/client/client.ts)
Firefox ne peut établir de connexion avec le serveur à l’adresse wss://komelia.fr/_nuxt/. [client.ts:78:17](https://komelia.fr/src/client/client.ts)
[vite] server connection lost. polling for restart... [client.ts:103:12](https://komelia.fr/src/client/client.ts)

Additional context

Docker compose :

version: '3.4'
services:
  front:
    build:  front
    container_name: front
    working_dir: /root/front
    command: npm run dev

  caddyerver:
    image: caddy:latest
    container_name: caddy
    ports:
      - "80:80"
      - "443:443"
      - "24678:24678"
    volumes:
      - type: bind
        source: ./caddy/
        target: /etc/caddy/
      - type : bind
        source: ./caddy_data
        target: /data
      - type: bind
        source : ./caddy_config
        target : /config  
          
networks:
  default:
  internal:
    internal:  true

nuxt.config.ts :

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
vite:{
      	server: {
                hmr:{
                        protocol: 'wss',
                        clientPort: 443,
                },
  },
},
})

DockerFile

#Front
FROM node:latest
RUN apt -y update
RUN apt -y upgrade
RUN apt-get -y install  vim


# Montage des documents partagés
COPY ./nuxt-app/ /root/front/
WORKDIR /root/front
RUN npm install
ENV NUXT_PORT=3000
CMD ["npm", "run", "dev"]

Caddyfile :

mysite.com {
  
  @websockets {
    header Connection Upgrade
    header Upgrade websocket
  }
  
	reverse_proxy @websockets front:24678
	reverse_proxy front:3000 

}

Logs

No response

[danielroe]

You likely also need to expose the websocket port in your docker config.

[Reivax47]

You likely also need to expose the websocket port in your docker config.

I think I did ?

  caddyerver:
    image: caddy:latest
    container_name: caddy
    ports:
      - "80:80"
      - "443:443"
      - "24678:24678"

24678 is the port used by Nuxt. If I change it, it's not working at all. :-/
Is there a better way to expose websocket port ?