nginx＋next.jsでホットリロード

はじめに

こんにちは。ponponnsanです。
一生懸命AIアプリのインフラ作りに勤しんでいたらもう4月になっていました。
時は早いと社会人3年目、実感しております。

今回は、nginx+next.jsでホットリロードできる仕組みについて調べました。

やりたいこと

ローカルでnext.jsのサーバーで開発しているのと同じ感じで、nginx上でもホットリロードさせたい

解決策

結論から言うと、nginx.confで以下のような設定をするとホットリロードできるようになります。

nginx.conf

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

なぜ、これでホットリロードできるようになるのでしょうか？

役割

Next.jsはホットリロードを実現するため、ブラウザとアプリケーション間でWebSocket通信をしています。

一行ずつ見ていきます。

nginx.conf

proxy_set_header Upgrade $http_upgrade;

これは、WebSocketなどのアップグレードされたプロトコルをサポートするために必要な設定です。
$http_upgrade変数には、クライアントからのリクエストヘッダ"Upgrade"の値が格納されます。
これにより、プロキシ(nginx)はWebSocketなどのアップグレードされたプロトコルリクエストを適切に処理できるようになります。

nginx.conf

proxy_set_header Connection "upgrade";

これは、アップグレードされたプロトコルのコネクション状態を保持するための設定です。
"upgrade"に設定することで、プロキシ(nginx)はアップグレードされたプロトコルのコネクションを維持できるようになります。
これにより、WebSocketなどのプロトコルが正常に機能するようになります。

これらの設定を追加することで、Next.jsアプリケーションのWebSocketや他のアップグレードされたプロトコルが、nginxを通じてクライアントと正しく通信できるようになります。

AIに聞いてみる

...ちょっと私には難しかったです。
一回、webSocketなどをアップグレードして、それとConnectionをしているということですかね？？

AIに聞いてみました。

はい、その理解で正しいです。

proxy_set_header Upgrade $http_upgrade;とproxy_set_header Connection "upgrade";の組み合わせは、WebSocketなどのアップグレードされたプロトコルの接続を維持するために使用されます。

具体的な流れは以下のようになります:

1. クライアントが初期のHTTPリクエストを送信する際に、"Upgrade"ヘッダに新しいプロトコル(WebSocketなど)への変更を要求する。
2. $http_upgrade変数にこの"Upgrade"ヘッダの値が格納される。
3. proxy_set_header Upgrade $http_upgrade;により、この"Upgrade"ヘッダの値がプロキシ(nginx)に渡される。
4. proxy_set_header Connection "upgrade";により、プロキシ(nginx)はこのコネクションをアップグレードモードに維持する。
5. これにより、WebSocketなどのアップグレードされたプロトコルの接続が適切に維持される。

つまり、これらの設定は、クライアントとアプリケーションサーバの間でアップグレードされたプロトコルを使う際に必要な連携を実現するためのものです。

わかりやすい！！

満足したので、今日はここで終わりにします。

参考文献