CloudFront how to setup reverse proxy on an existing distribution serving website from S3

Question

I have a S3 bucket which hosts a website and is delivered with CloudFront

and right now I have attached the distribution to my apex root domain like - www.xyz.com

So, previously we were using Nginx to serve a static frontend from a webserver root on the same domain - www.xyz.com and had also setup a reverse proxy - www.xyz.com/api/** which routed traffic to upstream backend server on the same machine.

Now, I would like to move the website to S3 but still run the backend API on the same machine and to do so I will have to change my DNS records and point them to the CloudFront distribution.

But, then the existing and previously deployed and running services which use www.xyz.com/api for backend services will break So, I want to forward all request on this path pattern to http:///api so that the existing applications don't break.

Is there a way we can achieve this ? i.e -

Forward request from a subpath of CloudFront distribution delivering a static frontend from S3 to an external application server ?

---UPDATE--- ---Nginx conf to redirect requests---

location /api/ {
                proxy_pass http://localhost:4040/api/;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
                proxy_http_version 1.1;
        }

this is within a server directive which exposes the root domain & frontend to the world currently but now I want to migrate the frontend to S3 and thus only keep this location block /api for compatibility purposes until I update the configuration on all clients.

If so, please suggest how this can be done or what information you need from my side that could help out in getting this done ?

Thanks,

Answer 1

Create api.example.com in DNS, pointing to your API.

Create a second Origin in CloudFront, pointing to api.example.com. Leave "Origin Path" blank, because it does not do what you might assume.

Create a new Cache Behavior in CloudFront, with the Path Pattern of /api*. Point this to the newly-created origin.

CloudFront will send all requests for /api* to api.example.com and everything else to the default Cache Behavior Origin, which would be the bucket.