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?

It could perhaps be possible to solve it with a rewrite? I have the same problem but I'm not exactly certain how. — Simen Russnes
– Simen Russnes, Commented May 3, 2019 at 13:09

Eugen · Accepted Answer · 2018-04-23 15:56:33Z

8

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

answered Apr 23, 2018 at 15:56

Eugen

3,0203 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

andrey.shedko Over a year ago

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

Eugen Over a year ago

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

smolus Over a year ago

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

Eugen Over a year ago

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

super · Accepted Answer · 2020-04-21 16:24:07Z

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.

answered Apr 21, 2020 at 16:24

super

13k2 gold badges21 silver badges34 bronze badges

2 Comments

jdolan Over a year ago

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?

super Over a year ago

@jdolan 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.

Ade · Accepted Answer · 2020-11-04 22:15:27Z

0

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

answered Nov 4, 2020 at 22:15

Ade

3733 silver badges13 bronze badges

Collectives™ on Stack Overflow

Use NGinx reverse proxy for create-react-app

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related