AWS setup: moving single page static application frontend to S3 (from web server)

Question

My current website (single page app with CORS + API) is deployed on AWS EC2 instance and is served via ALB (mostly for easier setup of HTTPS as I only have one region covered now). The web server is configured to serve the single page application but that's all it is doing regarding frontend. I want to move the single page application to S3 instead and so completely separate the backend from the frontend. The question is, what would be the most efficient way to do it with regards to AWS setup? I can come up with the following:

• point the domain at the S3 instance to serve frontend files, point API calls to ALB public DNS address
• keep the domain pointed at the ELB as it is, route port 80 & 443 to S3, change API port and route that port to EC2
• ...

Any help appreciated.

Answer 1

If you're trying to completely separate the infrastructure for frontend and backend but keep the same domain you could make use of CloudFront.

In CloudFront you would create 2 origins within your distribution:

• The default origin would be the S3 static website.
• Then an additional origin which would point to the original ALB.

You would configure the behaviours of this CloudFront distribution so that when a path matches a specific pattern i.e. api/* it would forward traffic to the ELB. If it does not match this it would default to your S3 bucket.

Take a look at the Can I use a single CloudFront web distribution to serve content from multiple origins using multiple behaviors? article which covers a similar behaviour to what I have outlined.