How to simulate aws cloudfront multiple origins in a local developer environment

Cloudfront has the nice feature of allowing different paths to go to different origins. We use this to power a purely client side single page app that is served from S3 and AJAXs to multiple services, with a simplified example setup being:

mydistribution.cloudfront.net/path1 --> load balancer A serving service A

mydistribution.cloudfront.net/path2 --> load balancer B serving service B

mydistribution.cloudfront.net/frontend ---> S3 bucket that hosts the single page app JS/CSS/HTML that makes AJAX calls to the services

I am looking for a way to set up a local environment to mimick this part of the behaviour so that different local paths on the same url/port can resolve to different local running services on different ports. The importance is so that CORS and other cross domain issues, which are not present in the non-local setup as everything happens on the same domain/port, will not affect local development. How is this best achieved?

For example (all the things on the right are already set up and running on the right ports)

localhost:8080/path1 --> A local web application server running 8091

localhost:8080/path2 --> A local web application server on port 8090

localhost:8080/frontend --> A local node server on port 8081 serving the HTML/JS/CSS

Solution

What you're looking for is a reverse-proxy. nginx would be a great fit for this. It believe it's actually what gets used by CloudFront under the covers (although you could also achieve the same with Apache). They explain how set-it up for some basic reverse-proxy scenarios here: https://www.nginx.com/resources/admin-guide/reverse-proxy/

This is really the tip of the iceberg as far as what you can do with NGINX. You have full control over the inbound and outbound headers. It's a very powerful platform.

Looking at some nginx configuration examples:

location /path1/ {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass http://localhost:8091;
}

location /path2/ {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass http://localhost:8090;
}

location /frontend/ {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass http://localhost:8081;
}