AWS Load Balancer, serving static site and an api

Question

first of all sorry for my ignorance but there is a concept which is not very clear for me in the AWS ELB word.

I have a frontend site deployed on cloudfront and an API running into an EC2 instance.

What I want to avoid is having 2 domains to serve the same data.

For example, I want to access my site using https://example.com/post and you will see the site itself (HTML from cloudfront).

But if you are trying to access to https://example.com/post passing the HTTP/HEADER Accept: application/json you would be able to see the json content from the API server itself (EC2 Instance).

Is that possible using an ELB? or do I have to make some trick into the EC2 instance like having an nginx seted up as a proxy and serve the cloudfront content if no header is present?

Thanks in advance.

Answer 1

I'm not sure if this can be done using the accept header. But, if you separate the static and dynamic content with different root paths then it's a pretty standard deployment.

So for example, if all dynamic content is prefixed with /api (or alternatively, all static content is prefixed with /static/) then what you'll need is:

1. create an origin in cloudfront pointing to ELB/EC2
2. create a static origin in cloudfront pointing to S3 bucket.
3. create a behavior in cloudfront for the /api/ path (make sure it caches nothing and passes all headers and cookies), it should point to the ELB/EC2 origin.
4. create a static behavior for the root path (default) pointing to the s3 origin, this behavior can have cache static content where applicable.

See this guide for more details on this approach: https://aws.amazon.com/blogs/networking-and-content-delivery/dynamic-whole-site-delivery-with-amazon-cloudfront/