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

}

Does this answer your question? [How do I rewrite URLs in a proxy response in NGINX](https://stackoverflow.com/questions/32542282/how-do-i-rewrite-urls-in-a-proxy-response-in-nginx) — Marc Sances, Nov 19 '20 at 12:47
No sir it doesn't answer my question. This is different from that of the given link. — suyog nepal, Nov 19 '20 at 13:07

score 1 · Answer 1 · answered Nov 19 '20 at 13:25

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

Nginx reverse proxy to frontend and backend

1 Answers1