Browser URLs and HTTP requests

Question

I'm currently building a web portfolio that combines many smaller web apps that I've made in the past. At the route (/) you find a page with links to these other smaller web apps. For instance, there's a link to route (/board-game) which takes you to the small board-game web app I made in the past.

What I'm struggling with is this. The smaller web app board-game serves it's html, css, and javascript to routes that don't include the prefix route (/board-game). So when a board-game page makes a request for (/css/style.css) nothing is loaded because the content is actually at (/board-game/css/style.css).

My question is this. Is there a way to re-route these requests to the appropriate route? I would like to avoid rewriting any part of these smaller projects. Any suggestions? Thank you.

Also, this is my current nginx.conf file.

worker_processes 1;

events {
  worker_connections 1024;
}

http {
  upstream portfolio {
    server portfolio-svc:8080;
  }

  upstream board-game {
    server board-game-svc:8080;
  }

  server {
    listen 80;

    location / {
      proxy_pass http://portfolio/;
    }

    location /board-game {
      proxy_pass http://board-game/;
    }
  }
}

Answer 1

You need to rewrite the path as part of the location, for example:

worker_processes 1;

events {
  worker_connections 1024;
}

http {
  upstream portfolio {
    server portfolio-svc:8080;
  }

  upstream board-game {
    server board-game-svc:8080;
  }

  server {
    listen 80;

    location = / {
      proxy_pass http://portfolio/;
    }

    location = /board-game {
      proxy_pass http://board-game/;
      rewrite ^(.*)board-game(.*)$ http://board-game/$2 permanent;
      sub_filter /css/ /board-game/css/
    }
  }
}

You might have to play with the matching a bit, but that's the general idea.