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:

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:

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?

  • CameronDev@programming.dev
    link
    fedilink
    English
    arrow-up
    2
    arrow-down
    1
    ·
    edit-2
    11 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;
        }
    

    I suspect you need the rewrites?

    • SpaceCadet@sopuli.xyzOP
      link
      fedilink
      English
      arrow-up
      2
      ·
      edit-2
      11 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 contains:

      ...
      src="/static/image.jpg"
      ...
      

      It should be dynamically served as:

      ...
      src="/app1/static/image.jpg"
      ...
      
      • CameronDev@programming.dev
        link
        fedilink
        English
        arrow-up
        4
        ·
        11 months ago

        Ah, I see your problem, that is definitely trickier. Sorry for the lack of help :/

        The wackamole method you described is something I have seen, no idea if it’s the best approach though. Dynamic rewriting may be non-trivial as well.

        A possibly suitable/worse approach could be to write a quick html page with IFrames and embed each app in an full screen IFrame :) I have that in my nginx as well :/

        • SpaceCadet@sopuli.xyzOP
          link
          fedilink
          English
          arrow-up
          4
          ·
          11 months ago

          No worries, your input was helpful and informative anyway, so thanks.

          Going with vhosts anyway seems to be the least cumbersome route at this point.

          • Cpo@lemm.ee
            link
            fedilink
            English
            arrow-up
            4
            ·
            11 months ago

            May I comments you both for the openness, politeness and helpfulness displayed here?

            Thanks!

            I also found the response informative, and thanks for making lemmy/fediverse happen!