Nginx reverse proxy to frontend and backend - nginx

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