NginX cannot redirect to React App

Question

I'm quite new to NginX, so my apologies if anything I ask here sounds naive. Lets say I have a DNS www.example.com.

Whenever a request comes to www.example.com/ (only /), I want NginX to redirect it to www.example.com/home, which in turn will forward the request to a React app running on port 5000. Whenever a request comes to www.example.come/{anything}, I want my Springboot application, running on 3001, to handle that.

So I have the following configuration

example.conf

server {

        server_name example.com www.example.com;

        listen 443 ssl; # managed by Certbot

        location = / {
                return 301 https://$host/home;
        }

        location / {

                proxy_pass http://localhost:3001;
                proxy_set_header X-Real-IP $remote_addr;
        }

        location = /home {
                proxy_pass http://localhost:5000;
        }
}

And I have the following react-app.conf

server {

        listen 5000;
        server_name localhost;

        root /home/ubuntu/example/frontend/build;
        index index.html;

        location / {
        }
}

This path /home/ubuntu/example/frontend/build is where my react app's build folder is sitting.

Now whenever I try to access www.example.com/xxx or www.example.com/xyz, my Springboot app is getting called, but whenever I try only www.example.com, it first redirects to www.example.com/home and then shows the generic 404 NginX error page.

I checked the error logs. It prints the follwing:

2020/02/11 19:21:31 [error] 12936#12936: *15 open() "/home/ubuntu/example/frontend/build/home" failed (2: No such file or directory), client: 127.0.0.1, server: localhost, request: "GET /home HTTP/1.0", host: "localhost:5000"

What I don't understand here is why it's trying to open /home/ubuntu/example/frontend/build/home. Where is that trailing /home coming from and how to take care of it?

I checked this and this, but they didn't help much

Edit 1

I made the changes suggested in the comment section and my example.conf now looks like the following:

server {

            server_name example.com www.example.com;

            listen 443 ssl; # managed by Certbot

            location = / {
                    return 301 https://$host/home;
            }

            location / {

                    proxy_pass http://localhost:3001;
                    proxy_set_header X-Real-IP $remote_addr;
            }

            location = /home {
                    proxy_pass http://localhost:5000/;
            }
    }

However, now I don't get any error in NginX error logs, but I do see my Springboot app getting invoked. What's happening is, example.com is going to example.com/home, which is then going to http://localhost:3001 where my Springboot app is currently running.

But this isn't supposed to happen since on /home, it should have been taken to the NginX server running on port 5000. Is there any changes I need to make in my react-app.conf file?

If you want to remove the `/home` from the URI before you pass it to the service at 5000, try: `proxy_pass http://localhost:5000/;` — Richard Smith, Feb 11 '20 at 19:51
@RichardSmith I just tried what you suggested. While I didn't get any error logs, I got logs on my Springboot app running on port 3001, which is not supposed to happen because the request is supposed to be proxy passed to the nginx server listening on port 5000. Any idea why that might be happening? — Auro, Feb 11 '20 at 20:05
Go back to the way you had it before the edit because that error was giving you a 404 on the second server block. The second server block is looking for the URL that the 301 redirected the browser to. That url is example.com/home. Since you didn't redirect to example.com/index.html, nginx is trying to resolve the "path". See my answer for the solution. — Jonathan, Feb 11 '20 at 20:20

Jonathan · Answer 1 · 2020-02-11T20:25:58.077

0

You're URL is looking for /home -> That's a file. But you want to send all requests to index.html.

Use try_files:

location / { try_files index.html =404; }

http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files

https://stackoverflow.com/questions/7027636/nginx-send-all-requests-to-a-single-html-page

server {

        listen 5000;
        server_name localhost;

        root /home/ubuntu/example/frontend/build;
        index index.html;

        location / {
           try_files index.html =404;
        }
}

edited Feb 11 '20 at 20:25

answered Feb 11 '20 at 20:18

Jonathan

193
1
7

I did what you suggested, that is change `proxy_pass http://localhost:5000/;` to `proxy_pass http://localhost:5000;` and change what you suggested here. I am still getting a **404 Not Found** – Auro Feb 11 '20 at 20:27
is there a file called index.html? What is the error message now? – Jonathan Feb 11 '20 at 22:43

NginX cannot redirect to React App

1 Answers1