React app doesnt launch from url location as set by nginx reverse proxy but does when port explicitly set

Question

I'm trying to run a single react app on a separate port and using proxy pass from nginx to location '/app'

"http://localhost/app" -> React Application

The application is running under PM2 using its generated build with the command: 'pm2 serve build 3002'.

My thought was i do all this tested locally and then will port it to my own domain.

I've swapped 'localhost' for '127.0.0.1' just in case that had anything to do with it.

From online tutorials i've ended up with the following in my nginx "../sites-available/my_domain" file

server {
        listen 80;
        listen [::]:80;

        server_name localhost;

        location / {
                root /var/www/my_domain/html;
                index index.html index.htm index.nginx-debian.html;
                try_files $uri $uri/ =404;
        }

        location /app {
                proxy_pass http://localhost:3002;
                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;
        }
}

If i type "http://localhost:3002" into the url it works fine however "http://localhost/app" does not work and shows 404 error.

Side-note: "http://localhost" works fine and directs to the index.html stored at root.

Is this a react only app or a full stack react express app

iqbal125
– iqbal125

2019-05-30 02:06:14 +00:00
Commented May 30, 2019 at 2:06 — iqbal125
– iqbal125, Commented May 30, 2019 at 2:06
if i understand you correctly @iqbal125 react only app

Mafster
– Mafster

2019-06-03 00:54:16 +00:00
Commented Jun 3, 2019 at 0:54 — Mafster
– Mafster, Commented Jun 3, 2019 at 0:54

Cornel Janssen · Accepted Answer · 2023-04-04 15:55:49Z

0

In your configuration, you are missing the / after the server address, something like : location /app { proxy_pass http://localhost:3002/;

edited Apr 4, 2023 at 15:55

Cornel Janssen

6811 gold badge12 silver badges35 bronze badges

answered Mar 29, 2023 at 14:15

Belecrofe

12 bronze badges

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

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

React app doesnt launch from url location as set by nginx reverse proxy but does when port explicitly set

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related