I want to host my React frontend with AWS CloudFront with S3 bucket.

Currently, my app is deployed in an EC2 instance and here is the outline:

Frontend: React app running on port 80. When a user goes to https://myapp.com, the request is directed to my-ec2-instance:80.

Backend: Express JS running on port 3000. When the user loads the frontend in the browser and when he interacts with the website, http requests are sent to https://myapp.com/api/*, which are routed to my-ec2-instance:3000;

I want to take the frontend out of the ec2 instance and host with AWS CloudFront with S3 bucket, such that the EC2 instance only host the backend service.

I have read that AWS CloudFront / S3 bucket can only host static websites.

In this case, is my React frontend a static Single Page Application, or is it dynamic?

Can I do it?

CodePudding user response：

Your application is dynamic, since you need Express. S3 can only serve static content and can't be used for hosting node.js applications. You can still serve your static content from S3 and host Express in an EC2 instance, but your deployment strategy will be more complicated.

If you host both static and dynamic content in the EC2 instance, then in CloudFront you need path based routing, which is nicely explained here.