Nuxt3のアプリケーションでngrok経由だとHMR(ホットリロード)が効かない

シンプルにNuxt3のアプリケーションのポートをフォワーディングしてもHMRが効かなかったのでメモです。

nuxt v3.12.3です。

どうしたら動いたか

nuxt.config.ts

export default defineNuxtConfig({
    ...etc

    // nuxt側でprotocolいじってるらしくhooksでいれないと上書きされる
    'vite:extendConfig'(config) {
      config.server = {
        ...config.server,
        hmr: {
          // booleanかオブジェクトなのでts的にはこの書き方はアウト
          // 判定をきちんとするほどでもないかと思ったのでとりあえず回避
          // @ts-expect-error
          ...config.server?.hmr,
          // localhostではホットリロード効かなくなるのでlocalhostみるときはコメントアウト
          protocol: 'wss',
        },
      }
    },
  },
})

なんで上記で動いたのか

細かいところはNuxtのソース読む時間がなく調べてないのでわかってないです。
が、おきたエラーと状況から見た推察だけしておきます。
エラー

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

• webページの読み込みはhttps
• webSocketはws
• httpsとwsでプロトコルが噛み合ってないのでエラーが出る
• nuxtの設定をいじって、wssで通信する様に指定したのでできた？

参考文献

https://techlog.n2i.jp/entry/2023/10/10/094549
https://zenn.dev/wwwave/articles/cc9d078fbf94fa
https://stackoverflow.com/questions/75219384/nuxt3-hmr-not-working-page-reload-needed-for-hmr-to-fire

メモ

参考文献のやつもひとしきりやってみたんですが、上手くいかなかったです。
バージョンの違いが主な原因だとは思います。