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?

Arraign

It could perhaps be possible to solve it with a rewrite? I have the same problem but I'm not exactly certain how. – Chirlin

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

Arraign

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

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

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

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

Answer 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.

Phalangeal

As far as I can tell, homepage is only honored by the webpack build script, not the webpack start script. The webpack development server still returns an index.html that contains relative URLs like /static/main.js and not /client/static/main.js. What am I missing? – Stannum

@Stannum You're not missing anything. The question is about how to deploy the app behind an NGINX server. On the development server you can use the proxy field instead. – Phalangeal

Answer 3

server {
   listen 80 default_server;
   root /[file_root_directory];
   server_name [hostname];
   index index.html index.htm;
   location / {
       proxy_pass http://127.0.0.1:[PORT]
   }
}

Kampmann