javascript - nginx反向代理后面的create-react-app代码更改未在浏览器中重新加载

标签 javascript reactjs nginx webpack-hmr

我安装了新的 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 反向代理一起使用的帮助或见解。
谢谢

最佳答案

全程一目了然地回答!删除结束斜线。

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

关于javascript - nginx反向代理后面的create-react-app代码更改未在浏览器中重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63134170/

相关文章:

javascript - 如何查找字符串中无效的十六进制值?

javascript - ReactJS - 警告消息 'Hook useEffect has a missing dependency'

node.js - docker nginx 负载平衡不适用于 Azure

nginx - Nginx worker_rlimit_nofile

javascript - 找出元素上触发了什么事件?

javascript - NodeJS Express 网络抓取 header 问题

javascript - 为什么不使用 splice with spread operator 从 react 中的数组中删除项目?

node.js - 如何解决 "TypeError: process.getuid is not a function"

reactjs - React Router 6.3.0 渲染组件两次

wordpress - 更改 Docker nginx 和 Wordpress 上传限制