Use NGinx reverse proxy for create-react-app

Question

I'm trying to create a ReactJS app on a remote Ubuntu server. In order to test it in the browser I'm using the NGinx reverse-proxy features as this.

server {
    listen 80;

    server_name mentalg.com;

        location / {
                proxy_pass http://172.31.23.249:5000;
                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 /client/ {
                proxy_pass http://172.31.23.249:3000;
                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;
        }
}

the 5000 port is for the REST /api end-points, all good here.

But the 3000 port on which the development react server runs creates issues.

The site opens as needed at http://mentalg.com/client, but inside the index.html there is a url for the script file to be executed as static/js/bundle.js file. This file is served by the React dev server normally but NGinx won't see it.

The url static/js/bundle.js is generated on the fly by the create-react-app dev server, can't control it.

How do I modify further the nginx proxy to server the files from static folder correctly?

Solution 1

Adding these 2 rules, solved the initial problem.

location /static/ {
        proxy_pass http://172.31.23.249:3000;
        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 /sockjs-node/ {
        proxy_pass http://172.31.23.249:3000;
        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;
}

Solution 2

I had the same issue, and found a way to solve it by using a combination of rewrite and setting the homepage option in create-react-apps package.json.

In package.json you add

"homepage": "http://172.31.23.249/client"

This will make the generated url in index.html to be generates a /client/static/js/... so it will reach the right redirect directive for nginx.

Once it reaches the redirect from nginx we need to remove the leading /client before passing it on to the proxy, which we can do with a rewrite directive.

server {
    listen 80;

    server_name mentalg.com;

        location / {
                proxy_pass http://172.31.23.249:5000;
                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 /client/ {
                rewrite ^/client(/.*)$ $1 break;

                proxy_pass http://172.31.23.249:3000;
                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;
        }
}

I have this setup with several react apps served on the same host in this way, and it's working nicely.

Comments

[andrey.shedko]

May I ask why here your domain ip instead of localhost (127.0.0.1)?

[Eugen]

guess it was copy/pasted code, localhost would work as well

[smolus]

This is a very ugly solution and wont work with multiple react servers. Is there no better solution yet?

[Eugen]

I'd love to see it as well. One day, maybe ;)