Nginx is redirecting proxy_pass to root path automatically

Question

I have two nextjs apps running on port 3000 and 3001 and my Nginx config is as follows

events {
    worker_connections  1024;
}

http {
    server {
        listen       8080;
        server_name  http://localhost:8080;
        proxy_buffering off;
        proxy_http_version 1.1;

        location / {
            proxy_pass    http://localhost:3000/;
            proxy_redirect off;
        }
        location ^~ /app {
            proxy_pass    http://localhost:3001/;
            proxy_redirect off;
        }
    }
}

NextJS app on port 3000 works fine.

1. When I visit localhost:8080 - it loads the app from port 3000 as expected.

But it is impossible to access the second app on Port 3001 through nginx URL

1. When I visit localhost:8080/app - it loads the app from port 3000.
2. When I visit localhost:8080/app/ - it changes the URL to localhost:8080 and loads the app from port 3000.
3. When I visit localhost:8080/app/login - It changes the URL to localhost:8080/login and loads a 404 since app on port 3000 does not have a login route.

Is there something that I am missing in this configuration?

Answer 1

put ^~ /app block before / block . The higher block takes priority and / block is like... for everything.

   location ^~ /app {
        proxy_pass    http://localhost:3001/;
        proxy_redirect off;
    }

   location / {
        proxy_pass    http://localhost:3000/;
        proxy_redirect off;
    }
   

Anything but /app will go to the second block.