HMR in docker not working when using reverse proxy

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.). 

nuxtnew.larabells.local {

    @websockets {
            header Connection *Upgrade*
            header Upgrade websocket
    }
     reverse_proxy @websockets nuxtnew_container:24678
     reverse_proxy nuxtnew_container:4000
}

// 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'
  }
})