Next.jsのバージョン12をNginxでプロキシしてるならやるべきこと

2022年1月6日

シローです。

今回は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で立ち上げたサービス名です

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";
}

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

Next.jsのバージョン12をNginxでプロキシしてるならやるべきこと

何が起きたか・・hot reload用のWebsocketの通信でエラーが出る

見直したところ

公式を見てNginxに設定を加えて解決

参考

関連