N
Nuxt•6mo ago
marz

HMR in docker not working when using reverse proxy

When using the docker and caddy revers proxy the hmr is not working , but if I don't use reverseproxy only docker it works fine. chrome error in console 
client:535 Mixed Content: The page at 'https://nuxtnew.larabells.local/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://nuxtnew.larabells.local:443/_nuxt/'. This request has been blocked; this endpoint must be available over WSS.
setupWebSocket @ client:535
(anonymous) @ client:530
client:532 [vite] failed to connect to websocket (SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.). 
client:535 Mixed Content: The page at 'https://nuxtnew.larabells.local/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://nuxtnew.larabells.local:443/_nuxt/'. This request has been blocked; this endpoint must be available over WSS.
setupWebSocket @ client:535
(anonymous) @ client:530
client:532 [vite] failed to connect to websocket (SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.).
here is my caddfile 
nuxtnew.larabells.local {

    @websockets {
            header Connection *Upgrade*
            header Upgrade websocket
    }
     reverse_proxy @websockets nuxtnew_container:24678
     reverse_proxy nuxtnew_container:4000
}
nuxtnew.larabells.local {

    @websockets {
            header Connection *Upgrade*
            header Upgrade websocket
    }
     reverse_proxy @websockets nuxtnew_container:24678
     reverse_proxy nuxtnew_container:4000
}
here is the nuxtconfig 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: false },

  devServer: {
    port: 4000,
    host: '0.0.0.0',
  },
  vite: {
    server: {
      hmr: {
        protocol: 'wss',
        clientPort: 443,
      },
    },
  },
  modules: ["@nuxtjs/tailwindcss", "shadcn-nuxt"],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  }
})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: false },

  devServer: {
    port: 4000,
    host: '0.0.0.0',
  },
  vite: {
    server: {
      hmr: {
        protocol: 'wss',
        clientPort: 443,
      },
    },
  },
  modules: ["@nuxtjs/tailwindcss", "shadcn-nuxt"],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  }
})
Thank you in advance
4 Replies
marz
marzOP•6mo ago
here is my pacakge.json 
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@vee-validate/zod": "^4.13.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-vue-next": "^0.408.0",
    "radix-vue": "^1.9.1",
    "tailwind-merge": "^2.4.0",
    "tailwindcss-animate": "^1.0.7",
    "vee-validate": "^4.13.2",
    "vue": "latest",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.12.1",
    "nuxt": "^3.12.4",
    "shadcn-nuxt": "^0.10.4",
    "typescript": "^5.5.3"
  }
}
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@vee-validate/zod": "^4.13.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-vue-next": "^0.408.0",
    "radix-vue": "^1.9.1",
    "tailwind-merge": "^2.4.0",
    "tailwindcss-animate": "^1.0.7",
    "vee-validate": "^4.13.2",
    "vue": "latest",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.12.1",
    "nuxt": "^3.12.4",
    "shadcn-nuxt": "^0.10.4",
    "typescript": "^5.5.3"
  }
}
root@a01991fa031f:/usr/local/app# node -v
v22.5.1
root@a01991fa031f:/usr/local/app# node -v
v22.5.1
please let me know if you need some other info
u007
u007•6mo ago
did you managed to find solution? for my case, in connecting to ws on eqmx, it keep disconnecting every 2to 3s
marz
marzOP•6mo ago
nope stilll looking for solution
Hendrik Jan
Hendrik Jan•6mo ago
Reverse proxying is really a pull-your-hair-and-bang-the-wall thing within docker 😦 We've currently got it working with this setup (reverse proxy is Apache -- we are stuck to that): 
// (part of) nuxt.config.js
vite: {
    server: {
      hmr: {
        path: 'ws',
      }
    },
  },
// (part of) nuxt.config.js
vite: {
    server: {
      hmr: {
        path: 'ws',
      }
    },
  },
# (part of) httpd-vhosts.conf
  <Location  ~ ".*">
      # .* is a wildcard for any location 
      ProxyPreserveHost On
      ProxyPass http://tapp_nodejs.docker.dev:3000
      ProxyPassReverse http://tapp_nodejs.docker.dev:3000
  </Location>
  <Location  ~ "/_nuxt/ws">
      ProxyPreserveHost On

      # Proxy both ws and http by placing ws before http as described in this documentation:
      # https://httpd.apache.org/docs/trunk/mod/mod_proxy_wstunnel.html
      ProxyPass ws://tapp_nodejs.docker.dev:3000/_nuxt/ws
      ProxyPass http://tapp_nodejs.docker.dev:3000/_nuxt/ws upgrade=websocket
      ProxyPassReverse ws://tapp_nodejs.docker.dev:3000/_nuxt/ws
  </Location>
  <Location  ~ "(/login|/auth/|/__webpack_hmr/).*">
      AuthType openid-connect
      Require valid-user

      ProxyPreserveHost On
      ProxyPass http://tapp_nodejs.docker.dev:3000
      ProxyPassReverse http://tapp_nodejs.docker.dev:3000
  </Location>
# (part of) httpd-vhosts.conf
  <Location  ~ ".*">
      # .* is a wildcard for any location 
      ProxyPreserveHost On
      ProxyPass http://tapp_nodejs.docker.dev:3000
      ProxyPassReverse http://tapp_nodejs.docker.dev:3000
  </Location>
  <Location  ~ "/_nuxt/ws">
      ProxyPreserveHost On

      # Proxy both ws and http by placing ws before http as described in this documentation:
      # https://httpd.apache.org/docs/trunk/mod/mod_proxy_wstunnel.html
      ProxyPass ws://tapp_nodejs.docker.dev:3000/_nuxt/ws
      ProxyPass http://tapp_nodejs.docker.dev:3000/_nuxt/ws upgrade=websocket
      ProxyPassReverse ws://tapp_nodejs.docker.dev:3000/_nuxt/ws
  </Location>
  <Location  ~ "(/login|/auth/|/__webpack_hmr/).*">
      AuthType openid-connect
      Require valid-user

      ProxyPreserveHost On
      ProxyPass http://tapp_nodejs.docker.dev:3000
      ProxyPassReverse http://tapp_nodejs.docker.dev:3000
  </Location>
# (part of) docker-compose.yml
services:
  nodejs:
    hostname: tapp_nodejs.docker.dev
    container_name: tapp_nodejs
    build:
      context: .
      dockerfile: docker/nodejs.dockerfile
    depends_on:
      - 'mariadb'
    environment:
      ENVIRONMENT: '${ENVIRONMENT:-development}'
      DOMAIN: '${DOMAIN:-https://tapp.docker.dev}'
      PORT: '${PORT:-3000}'
      DOCKER_RUNNING: 'true'
      CYPRESS_INSTALL_BINARY: 0
      # workaround for Prisma issue https://github.com/prisma/prisma/issues/12338
      QUERY_BATCH_SIZE: 999
      # DEBUG: "connect:dispatcher"
    volumes:
      - ./:/var/app
    ports:
      - '3004:3000'
      # We will use port 3204 for Playwright ui
      - '3204:3204'
      # Default port for Vite HMR is 24678
      - '24678:24678'
      # Port 5555 can be used by `npx prisma studio` for debugging
      - '5555:5555'
    networks:
      - default
    tmpfs: /tmp
  apache:
    hostname: tapp_apache.docker.dev
    container_name: tapp_apache
    build:
      context: .
      dockerfile: docker/apache.dockerfile
    volumes:
      - ./docker/apache/extra:/usr/local/apache2/conf/extra
    networks:
      - default
# (part of) docker-compose.yml
services:
  nodejs:
    hostname: tapp_nodejs.docker.dev
    container_name: tapp_nodejs
    build:
      context: .
      dockerfile: docker/nodejs.dockerfile
    depends_on:
      - 'mariadb'
    environment:
      ENVIRONMENT: '${ENVIRONMENT:-development}'
      DOMAIN: '${DOMAIN:-https://tapp.docker.dev}'
      PORT: '${PORT:-3000}'
      DOCKER_RUNNING: 'true'
      CYPRESS_INSTALL_BINARY: 0
      # workaround for Prisma issue https://github.com/prisma/prisma/issues/12338
      QUERY_BATCH_SIZE: 999
      # DEBUG: "connect:dispatcher"
    volumes:
      - ./:/var/app
    ports:
      - '3004:3000'
      # We will use port 3204 for Playwright ui
      - '3204:3204'
      # Default port for Vite HMR is 24678
      - '24678:24678'
      # Port 5555 can be used by `npx prisma studio` for debugging
      - '5555:5555'
    networks:
      - default
    tmpfs: /tmp
  apache:
    hostname: tapp_apache.docker.dev
    container_name: tapp_apache
    build:
      context: .
      dockerfile: docker/apache.dockerfile
    volumes:
      - ./docker/apache/extra:/usr/local/apache2/conf/extra
    networks:
      - default
Maybe this will be of use for you. As it's a long time ago we got this working, I don't remember all the details on how/why this works.
Want results from more Discord servers?
Add your server