与“ws://localhost/_next/webpack-hmr”的 WebSocket 连接失败：在 Next.js 与 Nginx 建立连接之前，WebSocket 已关闭

Question

我使用 Socket.IO 在 NextJS 上开发 Web 应用程序。

当我运行我的应用程序时，一切都很好。但2分钟后出现错误。

NGINX 日志：

172.19.0.1 - - [12/Sep/2022:16:27:39 +0000] "POST /api/ HTTP/1.1" 200 147 "http://localhost/en" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15"
172.19.0.1 - - [12/Sep/2022:16:27:59 +0000] "GET /_next/webpack-hmr HTTP/1.1" 101 269 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15"
...
172.19.0.1 - - [12/Sep/2022:16:29:21 +0000] "GET /_next/webpack-hmr HTTP/1.1" 101 71 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15"
172.19.0.1 - - [12/Sep/2022:16:29:26 +0000] "GET /_next/webpack-hmr HTTP/1.1" 499 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15"

101——很好。499——错误。但什么也没发生，错误从何而来？

在控制台中，我在每个 499 上看到此错误：

WebSocket connection to 'ws://localhost/_next/webpack-hmr' failed: WebSocket is closed before the connection is established

而且这个问题仅在 Safari (MacOS) 上出现！

在 Chrome 上一切正常。

Answer 1

从 Next.js 12 开始，开发中的 HMR（热模块替换）使用 WebSocket 连接。

\n

将 Nginx 与 Next.js 一起使用时，您必须将其配置为正确传递 WebSocket 请求。

\n

\n

在某些情况下，当将请求代理到 Next.js 开发服务器时，您\n需要确保升级请求得到正确处理。例如，nginx您需要添加以下配置：

\n

location /_next/webpack-hmr {\n    proxy_pass http://localhost:3000/_next/webpack-hmr;\n    proxy_http_version 1.1;\n    proxy_set_header Upgrade $http_upgrade;\n    proxy_set_header Connection "upgrade"; \n} \n

\n

\xe2\x80\x94 Next.js，升级指南，Next.js\' HMR 连接现在使用 WebSocket

\n

\n