シローです。
今回はNext.jsのバージョン12を立ち上げてNginx経由のリバースプロキシでアクセスを振り分けているときに
気をつけるようにしたポイントをお話しします。
何が起きたか・・hot reload用のWebsocketの通信でエラーが出る
Nginxでアプリのエントリーポイントの場合にNext.jsのプロジェクトにアクセスするようにリバースプロキシをしていました。(apiはLaravelです）
大体構成はこんな感じです
以前はこの構成でも特に異常はなかったのですが、Next.jsのバージョン12から次のエラーが出ました
WebSocket connection to 'ws://xxx.com/_next/webpack-hmr' failed:
どうやらWebsocketの接続が失敗しているようでした。
見直したところ
案の定最初は、テンパって猿みたいに「Next.js websocket not work」とかググるのですが
解決できなかったので不貞腐れました。
そして、ひと休憩して冷静に考えたら
「websocketのアクセスって、この環境だと最初にNginxに来るよね？そこの振り分けが正しくなってないとちゃうん？」って閃く？わけです
そろそろエラーメッセージをモンキーググりするのは卒業しないとですね・・
リクエストでエラーが出る際はまずそのリクエストがどのように処理されるかを考えることが大事ですね。
公式を見てNginxに設定を加えて解決
前述をもとに「Nginx Next.js websocket」ってググるわけです（ちゃんと考えてググった
そしたら、公式にたどり着いて参考にしながらNginxを変更しました。
docker-composeで立ち上げたサービス名です
|
1 2 3 4 5 6 |
location /_next/webpack-hmr { proxy_pass http://app_node:3000/_next/webpack-hmr; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } |
アクセスが/_next/webpack-hmrの場合に
- アクセス先を
http://app_node:3000/_next/webpack-hmrにする - httpのバージョンを1.1にする
- ヘッダーに色々追加（よくわかってないですが何か？
として、再度Nginxを再起動させると無事エラーは無くなりました。
めでたし
参考
公式（最初からこれでいいとは言ってはいけない）https://nextjs.org/docs/upgrading#nextjs-hmr-connection-now-uses-a-websocket