Nginx reverse proxy to frontend and backend

Question

I have two react app running on localhost:3000(frontend) and localhost:3001(backend). I want to serve both backend and front end from same server_name.. For example, if a user hits example.com the Nginx should route the traffic to frontend running on (localhost:3000) and if a user hits example.com/admin/login traffic should get routed to the backend (localhost:3001).

'''

server {
    listen 80;
    server_name example.com;

    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;

    location / {
        proxy_pass http://localhost:3001;
    }
    location /admin-login {
        proxy_pass http://localhost:3000;
    }
}

'''

Using above configuration. I have frontend running on example.com. However, when I call example.com/admin/login I am getting redirected to app running on frontend (localhost:3000) instead of backend running on (localhost:3001).

Updating as per the answer given below. I have below configuration. it still have the same behavior.

server {
  listen 80;
  server_name example.com;

  location /admin-login {
    proxy_pass http://127.0.0.1:3000/admin-login;
  }
 
  location / {
    proxy_pass http://127.0.0.1:3001;
  }
 
  location /home {
    proxy_pass http://127.0.0.1:3001/home;
  }

  location /login {
    proxy_pass http://127.0.0.1:3001/login;
  }

   location /signup {
     proxy_pass http://127.0.0.1:3001/signup;
  }

   location /article {
     proxy_pass http://127.0.0.1:3001/article;
   }

}

Answer 1

I think the problem here is that

location / {
  proxy_pass http://localhost:300
}

matches all queries so will also redirect anything to /admin-login

You could either rearrange your blocks to have the admin-login block above the / block in the config file, or make the adjustment below:

location = / {
  proxy_pass http://localhost:300
}

This adjusted block should only redirect queries to / rather than /*

If you want to read more, it's explained in the documentation here - https://nginx.org/en/docs/http/ngx_http_core_module.html#location