Next.js Nginx

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

シローです。

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

アクセスが/_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

  • この記事を書いた人

シロー

Webシステムの開発のお仕事をさせて頂いております。 フリーランスの日常、Web開発に関する情報を発信しています。 趣味はゲーム、映画鑑賞、個人サービスを作ることです。

-Next.js, Nginx

© 2022 Shiro's secret base