在浏览器中不重新加载nginx反向代理后创建react应用程序代码更改

Question

我安装了一个新的CRA模板，无法在浏览器中看到文件更改。我使用未修改的CRA安装通过nginx反向代理React应用程序(除了设置与标准nginx-websocket代理配置相对应的.env VAR PORT外，未修改(。我仍然看到持续的浏览器错误：

webpackHotDevClient.js:60 WebSocket connection to 'wss://react.syntapse.co.uk/sockjs-node' failed: Error during WebSocket handshake: Unexpected response code: 301

.env文件

PORT=3121

nginx配置

server {
listen 80;
server_name react.syntapse.co.uk;
location /sockjs-node/ {
proxy_pass http://0.0.0.0:3121/sockjs-node/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location / {
proxy_pass http://0.0.0.0:3121/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

我没有；没有采取任何特定步骤来启用HMR或任何形式的热重新加载，只是期望在浏览器中更新代码更改。我正在尝试不同的平台，对于默认的angular和vue应用程序，我得到了几乎相同的nginx配置，它们只是开箱即用的HMR，所以我想React配置需要调整才能通过代理使用，但文档有点稀疏。

任何关于将React与nginx反向代理一起使用的帮助或见解都将不胜感激。

感谢

Answer 1

始终在众目睽睽之下回答！去掉末尾斜线。

location /sockjs-node {
proxy_pass http://0.0.0.0:3121/sockjs-node;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}