Как заставить hmr в vite подключатсья по wss?

Question

[Александр Панков]

Здравствуйте, сломалось dev-окружение. (работало буквально месяц назад)
сломалось после обновления ноды и всех зависимостей.

есть фронтенд, который на nuxt + vite (без ssr), генерирую статические файлики и деплою, портал закрытй и seo не нужно.

разработку веду в докере, а именно, у меня есть
- traefik
- nginx
- node
....
куча еще всего, но в контексте вопроса не важно.

контейнер с node стартует с командой npm run dev, внутри контейнер висит dev-сервер на 3000 порту
контейнер с nginx слушает входящие запросы и разворачивает на котейнер с нодой
контейнер c traefik висит "над ними" и разруливает запросы из хоствой системы по контейнерам (с локальным httlps), те трефик заворачивает запросы на фронт в контейнер с nginx.

Теперь проблема:

Mixed Content: The page at 'https://foobar.loc/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://foobar.loc:443/_nuxt/hmr/'. This request has been blocked; this endpoint must be available over WSS.

так как "основной сайт" я открываю через https, то vite требует чтобы и сокеты был под https, но vite пробует стучатся по ws (а не wss), как эту проблему победить не понимаю и почему она вдруг появилась тоже не понимаю.

В конфиге nuxt у меня такое (этот конфиг внутри контейнера с нодой)

vite: {
    server: {
      hmr: {
        protocol: "wss",
        host: "0.0.0.0",
        clientPort: 443,
        path: "hmr/",
        timeout: 3,
      },
    },
  }

Начинаю копать, мне в коносли прям показано кто кидаект ошибку, я нашел https://github.com/vitejs/vite/blob/d1891fda026d27...

конкретно строится подключение к сокету:

const socketProtocol = __HMR_PROTOCOL__ || (importMetaUrl.protocol === 'https:' ? 'wss' : 'ws')

на чистом js такое (после внедрения окружения)

const socketProtocol = "ws" || (importMetaUrl.protocol === "https:" ? "wss" : "ws");

те ВСЕГДА ws, а мне нужен wss

что я делаю не так? по логике мне нужно как-то определить константу __HMR_PROTOCOL__ на wss, но как?

Comments

[Aetae]

Ну сделай поиск по сырцам __HMR_PROTOCOL__, найдёшь где она определяется - поймёшь что делать:)

Вообще судя по коду оно ставится как раз из config.server.hmr.protocol. Остаётся только лебажить\патчить сырцы и смотреть кто его перезаписывает и откуда там что прилетает...
Наверное nuxt что-то мутит...

...upd ага, вот оно: ctx.nuxt.options.devServer.https.

Answer 1

[Aetae]

Нужно сконфигурировать nuxt devServer в режиме https из-за этого куска кода(хотя все мы понимаем что в 99% за https у нас отвечает nginx). Ну или монкипатчить.

Answer 2

[Андрей]

Как уже написал Aetae, конфигурацией протокола занимается nuxt, но монкипатчить не обязательно, переопределить конфиг можно через хук, например так

export default defineNuxtConfig({
  hooks: {
    'vite:extendConfig': function (vite) {
      vite.server.hmr = {
        protocol: 'wss',
      };
    },
  },
});