背景

ローカル環境

環境

Vite: 2.9.9
Vue: 3.2.25

原因

WebSocketの接続先に接続することができず、リロードされるようになっていた。

解決方法

WebSocketの接続先のIPおよびポートが接続可能になるように、環境側の設定を変更した

詳細

構成イメージ

調査

以下の現象が起こっていた
https://vite-sample.comにアクセスすると、数秒の間隔で画面が自動的にリロードされる
開発者モードで確認すると、リロード直前に以下のような出力がされていた

開発者モード console

[vite] connecting...
WebSocket connection to 'wss://vite-sample.com:8084/' failed: 
[vite] server connection lost. polling for restart...

つまりWebSocketへの接続に失敗している
これが無限リロードと関係しそうなので、コードの方の調査
vite側で提供しているclient.tsの以下の個所が原因そうだと判明
- 以下にWebSocketの関連個所のみを抜粋
- client.tsを全体はこちらから参照

client.ts

// ...省略...

// use server configuration, then fallback to inference
const socketProtocol =
  __HMR_PROTOCOL__ || (location.protocol === 'https:' ? 'wss' : 'ws')
// ここで接続先設定
const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
// viteの設定でlocalhostに置き換えた
const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')

// ...省略...

// ping server
// ここでソケットへの接続が閉じたもしくは失敗した際に、リロードが発生する
socket.addEventListener('close', async ({ wasClean }) => {
  if (wasClean) return
  console.log(`[vite] server connection lost. polling for restart...`)
  await waitForSuccessfulPing()
  location.reload()
})

// ...省略...

イメージとしてはこんな感じ
- 画面表示するようにポート:443は開けてる
- だけどWebSocketで使われるポート:8084は開けてない

対応

調査からWebSocketへの接続さえできれば無限リロードも解消されそうなことが分かった
WebSocketが正常に接続できるようにするためには以下の方法が考えられる
- いまの接続先が正常に接続できるように、環境の設定変更で対応する
- 正常に接続できる接続先に置き換えるように、Viteの設定変更で対応する

環境の設定変更で対応案

今回のケースではこちらで解決した
ALBでポート:8084も開けた

Viteの設定変更で対応案

今回は、あとから気づいたので、試していない（ので知見ある方いればコメントください・・・）
vite.config.jsでWebSocket接続時に使用するポートを明示的に指定する

js.vite.config.js

// ...省略...
  server: {
    host: true,
    port: 8084,
    strictPort: true,
    hmr: {
      // ここに接続可能なポートを指定する
      port: 443,
    },
  },
// ...省略...

まとめ

Viteは内部でWebSocketの通信もしており、これも疎通していないといけない
WebSocket向けの設定はhmrで行う

参考情報