OpenLiteSpeed + NEXT.js v12 でのWebSocketエラー解消

はじめに

他社で開発を依頼したプログラムの移植作業で直面したエラーです。開発中はプロキシを使っていなかったものと思われますが、本番環境で動作させるときにリバースプロキシを設定してエラーが発生しました。 Next.js v12+ で発生するみたいです。解消法を備忘録も兼ねて書き留めます。

環境

• OpenLiteSpeed でリバースプロキシを使って Next.js (localhost:3000) に接続
• Next.js v12+

症状と対処法

症状

以下のようなエラーが出続ける...

WebSocket connection to 'ws://<DOMAIN_NAME>/_next/webpack-hmr' failed

対処法

OpenLiteSpeed の管理画面から Virtual Host → Web Socket Proxy で、 Web Socket Definition を以下のように追加するだけです。（ドメインは適宜書き換えてください）

もしCyberPanelや設定ファイルで設定するとき、 vhconf.conf の記述は以下の通りになります。

websocket /_next/webpack-hmr {
  address                 localhost:3000
}

Apache/Nginx の場合（参考）

ちなみに Apache や Nginx だとリダイレクトさせて対応すると解消するようです