How to host multiple create-react-app development servers under nginx with working live (hot) reload-CodePudding

I am developing a website with React.js for the frontend and have 2 separate apps for the users and the admins. The users will be under example.com and the admins under example.com/admin.

I am developing both apps behind an nginx server as a reverse proxy. I have had no issue developing a single app behind nginx, but I cannot use hot reload for the 2nd app. The app is served properly, with the only exception that the hot reload does not work.

I have HTTPS=true on both my .env files of the React.js apps. The main app's hot reload works fine, but the /admin app's hot reload fails with the error Firefox can’t establish a connection to the server at wss://192.168.1.2/adminws (developing through local network, so I can test the apps on my phone as well, but the hot reload won't work on the localhost either).

The main app is hosted under port 3000, the admin app is hosted under port 4000.

This is what my main app's .env looks like:

HTTPS=true
WDS_SOCKET_PORT=443
FAST_REFRESH=true

This is what my admin app's .env looks like:

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

This is what my nginx configuration file looks like:

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

I should note that the admin app's hot reload works properly when I remove both WDS_SOCKET_PORT and WDS_SOCKET_PATH from the .env file and run it on https://localhost:4000/admin, but this way I would not be able to test it behind nginx.

CodePudding user response：

I removed both WDS_SOCKET_PORT and WDS_SOCKET_PATH from the admin app's .env file and it now seems to be working properly. Everything else seems to be ok.