Route multiple apps through Nginx server

Question

I have the following scenario:

• Nginx server, on IP xxx.xxx.xxx.xx1
• app1, on IP xxx.xxx.xxx.xx2:3000
• app2, on IP xxx.xxx.xxx.xx3:5000
• app3, on IP xxx.xxx.xxx.xx4

I want all apps to be accessible via Nginx, like this:

• app1 > xxx.xxx.xxx.xx1/app1/
• app2 > xxx.xxx.xxx.xx1/app2/
• app3 > xxx.xxx.xxx.xx1/app3/

All apps are in the same network and the IPs are local. The end goal here is to have all apps accessible through a domain that will point to the public IP for the Nginx server. But so far I am trying to get them working on local IPs.

I've been trying for some time now and so far, I came up with this:

server {
    listen 80;
    server_name xxx.xxx.xxx.xx1;
location /app1/ {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;

    proxy_pass https://xxx.xxx.xxx.xx2:3000/;
}

location /app2/ {        
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;

    proxy_pass https://xxx.xxx.xxx.xx3:5000/;
}

location /app3/ {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;

    proxy_pass http://xxx.xxx.xxx.xx4/;
}

location / {
    rewrite ^/(.*) /app1/$1 last;
}

}

The problem is that in this case, I can access app1 on xxx.xxx.xxx.xx1/app1/login (just xxx.xxx.xxx.xx1/app1/ does not work). And since this makes sense, we tried a few different things to get them all accessible, but no luck.

location ~ ^/(app1|app2|app3)/ {
    set $route $1;
    rewrite ^/(app1|app2|app3)(/.*)$ $2 break;
    proxy_pass http://xxx.xxx.xxx.xx1/$route;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

Also this:

location / {
    rewrite ^/app1/(.*)$ /app1/$1 last;
    rewrite ^/app2/(.*)$ /app2/$1 last;
    rewrite ^/app3/(.*)$ /app3/$1 last;
proxy_pass http://xxx.xxx.xxx.xx1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}
location ~ ^/(app1|app2|app3)/ {
    set $route $1;
    rewrite ^/(app1|app2|app3)(/.*)$ $2 break;
    proxy_pass http://xxx.xxx.xxx.xx1/$route;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

And also something like this:

server {
    listen 80;
    server_name 192.168.1.220;
location /app1/ {
    rewrite ^/app1/(.*)$ /$1 break;
    proxy_pass https://xxx.xxx.xxx.xx2:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location /app2/ {
    rewrite ^/app2/(.*)$ /$1 break;
    proxy_pass https://xxx.xxx.xxx.xx3:5000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location /app3/ {
    rewrite ^/app3/(.*)$ /$1 break;
    proxy_pass http://xxx.xxx.xxx.xx4;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location ~ ^/(app1|app2|app3)/ {
    set $route $1;
    rewrite ^/(app1|app2|app3)(/.*)$ $2 break;
    # Proxy the request to the corresponding backend server
    proxy_pass http://xxx.xxx.xxx.xx1/$route;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location / {
    return 404;
}

}

Any thoughts on what am I doing wrong here?

Another problem I am encountering is that, even though app1 seems to be somewhat working on xxx.xxx.xxx.xx1/app1/, every link in the app redirects to xxx.xxx.xxx.xx1/new-page/, instead of xxx.xxx.xxx.xx1/app1/new-page.

Any ideas on how can this be fix through Nginx instead of through changing the links in the app?