nginx reverse proxy using subpaths help

Submitted ⁨⁨8⁩ ⁨months⁩ ago⁩ by ⁨SpaceCadet@sopuli.xyz⁩ to ⁨selfhosted@lemmy.world⁩

So I have a webserver running nginx, and I want to use it as a reverse proxy to access web applications running elsewhere. I know this is a pretty standard use case, and that the traditional approach is to use virtual hosts to proxy the different apps.

Like, normally you would do something like:

app1.webserver.something => app1.host:3000
app2.webserver.something => app2.host:1234
app3.webserver.something => app3.host:8080

I am familiar with this approach, and know how to set it up.

In this case, there is a catch though. For reasons that I can’t get into here, I can’t use virtual hosts, and everything should be hosted in the same webserver.something domain. So I thought I would use a subpath to host each app.

What I want to do is this basically:

webserver.something/app1 => app1.host:3000
webserver.something/app2 => app2.host:1234
webserver.something/app3 => app3.host:8080

In my nginx config file I have something like this:

upstream app1 {
  server app1.host:3000;
}

server {
    ...
    location /app1 {
        proxy_pass http://app1/;
    }
    ...
}

This works to the extent that all requests going to /app1/* get forwarded to the correct application host. The issue though is that the application itself uses absolute paths to reference some resources. For example, app1 will try to reference a resource like /_app/something/something.js, which of course produces a 404 error.

I suppose that for this particular error I could map /_app/ to the app1 application host with another location statement, but that seems dirty to me and I don’t like it. First off it could quickly become a game of whack-a-mole, trying to get all the absolute paths remapped, and secondly it could easily lead to conflicts if other applications use that absolute path too.

So I guess my question is: is there a way to do this cleanly, and dynamically rewrite those absolute paths per app?

source

Comments

Sort:hotnew top

SeriousBug@infosec.pub ⁨8⁩ ⁨months⁩ ago
You’ll need to check the documentation of every app, they usually have an option to set a base path so the app will add that base path to every link and resource.

If some of the apps don’t have support for that, the next option would be to build from source and patch all the links yourself.

source
- SpaceCadet@sopuli.xyz ⁨8⁩ ⁨months⁩ ago
  I was afraid it was going to come down to that. I have been looking into configuration options for the apps, but they’re 3rd party nodejs apps and I know jack shit about nodejs so I’ve had no luck with it so far.
  
  Going with vhosts anyway (despite the pains it will create on this setup) seems to be the preferred way forward then.
  
  Thanks for the insight, and for confirming what I already suspected.
  
  source
easydnesto@sh.itjust.works ⁨8⁩ ⁨months⁩ ago
I tried something like this with Traefik just recently using add prefix and strip prefix rules. It had limited success until until I encountered an application that doesn’t have everything behind a sub path, Like /lovelace (home assistant)or something like that. If the application just basis it off the host with a root path, than you can’t really apply the prefix rule as the reverse proxy will not know how to route the request as the application is asking for a path that is not already a sub. You may come into this situation more often with several applications. I ended up just switching back to virtual hosts myself.

source

CameronDev@programming.dev ⁨8⁩ ⁨months⁩ ago

This is part of my config that does something similar, hopefully it helps?:

location /dynmap {
        rewrite ^/dynmap/(.*) /$1 break;
        proxy_pass http://192.168.1.100:8123/;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host$uri;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        proxy_set_header X-NginX-Proxy true;
        proxy_cache_key "$host$uri";
        proxy_cache_valid 200 302 60m;
        proxy_cache_valid 404     10m;
        proxy_cache_use_stale error timeout invalid_header updating http_500 http_503 http_504;
        proxy_connect_timeout 10;
        index  index.html index.htm;
    }
    location /bluemap {
        rewrite ^/bluemap/(.*) /$1 break;
        proxy_pass http://192.168.1.100:8100/;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host$uri;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        proxy_set_header X-NginX-Proxy true;
        proxy_cache_key "$host$uri";
        proxy_cache_valid 200 302 60m;
        proxy_cache_valid 404     10m;
        proxy_cache_use_stale error timeout invalid_header updating http_500 http_503 http_504;
        proxy_connect_timeout 10;
        index  index.html index.htm;
    }

source

SpaceCadet@sopuli.xyz ⁨8⁩ ⁨months⁩ ago
Hmm no, that’s not really it… that’s more so that you don’t pass URLs starting with /app1/ onwards to the application, which would not be aware of that subpath.

I think I need something that intercepts the content being served to the client, and inserts /app1/ into all hardcoded absolute paths.

For example, let’s say on app1’s root I have an index.html that says:

It should be dynamically served as:

source

Decronym@lemmy.decronym.xyz ⁨8⁩ ⁨months⁩ ago
Acronyms, initialisms, abbreviations, contractions, and other phrases which expand to something larger, that I’ve seen in this thread:

Fewer Letters More Letters

HTTP Hypertext Transfer Protocol, the Web

IP Internet Protocol

nginx Popular HTTP server

[Thread #61 for this sub, first seen 18th Aug 2023, 14:05] [FAQ] [Full list] [Contact] [Source code]

source

Fewer Letters	More Letters
HTTP	Hypertext Transfer Protocol, the Web
IP	Internet Protocol
nginx	Popular HTTP server