如何在nginx下托管多个create-react-app开发服务器并进行实时(热)重载

d4so4syb  于 2022-11-02  发布在  Nginx
关注(0)|答案(1)|浏览(117)

我正在开发一个网站,前端使用React.js,并为用户和管理员提供2个独立的应用程序。用户将在example.com下,管理员将在example.com/admin下。
我在一个nginx服务器后面开发两个应用程序作为反向代理。我在nginx后面开发一个应用程序没有问题,但是我不能为第二个应用程序使用热重新加载。应用程序可以正常服务,唯一的例外是热重新加载不起作用。
我在React.js应用程序的两个.env文件上都设置了HTTPS=true。主应用程序的热重新加载工作正常,但/admin应用程序的热重新加载失败,错误为Firefox can’t establish a connection to the server at wss://192.168.1.2/adminws(通过本地网络开发,所以我也可以在手机上测试应用程序,但热重新加载在本地主机上也不起作用)。
主应用程序托管在端口3000下,管理应用程序托管在端口4000下。
下面是我的主应用程序的.env文件:

HTTPS=true
WDS_SOCKET_PORT=443
FAST_REFRESH=true

这是我的管理应用程序的.env的外观:

HTTPS=true
WDS_SOCKET_PORT=443
WDS_SOCKET_PATH=/adminws
FAST_REFRESH=true

下面是我的nginx配置文件:

server {
    # listen 80 default_server;
    # listen [::]:80 default_server;

    # SSL configuration
    #
    listen 443 ssl http2 default_server;
    listen [::]:443 ssl default_server;

    ssl on;
    ssl_certificate /etc/nginx/ssl/localhost.crt;
    ssl_certificate_key /etc/nginx/ssl/localhost.key;

    gzip on;
    gzip_types text/plain application/xml application/json;
    gzip_proxied any;
    gzip_min_length 1000;

    gunzip on;

    gzip_static on;

    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location /ws {
            proxy_pass https://127.0.0.1:3000;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Proto $scheme;
            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 /adminws {
            proxy_pass https://127.0.0.1:4000;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Proto $scheme;
            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 /api {
            proxy_pass http://127.0.0.1:3200;
    }

    location /admin {
            proxy_pass https://127.0.0.1:4000;
    }

    location / {
            proxy_pass https://127.0.0.1:3000;
    }
}

我应该注意到,当我从.env文件中删除WDS_SOCKET_PORT和WDS_SOCKET_PATH并在https://localhost:4000/admin上运行它时,管理应用程序的热重新加载工作正常,但这样我就无法在nginx后面测试它。

ds97pgxw

ds97pgxw1#

我从管理应用程序的.env文件中删除了WDS_SOCKET_PORT和WDS_SOCKET_PATH,现在它似乎工作正常。其他一切似乎都正常。

相关问题