4

I have a NodeJs/React web app. I use to deploy to one EC2 instance. Is this the correct approach?

I've seen online that one option is to put the frontend in S3 with CloudFront and then the backend in an EC2 instance. In this case does the NodeJs server serve the static files from that bucket? Or how would it work?

Improve this question

2 Answers 2

Reset to default
5

Hosting dynamic part of React apps on Compute (I'll prefer ECS+Fargate over EC2) and static on S3 + CloudFront is an efficient way to use AWS Managed services capabilities. Your architecture will be something like this:

client -> CloudFront (cached) -> S3 (static resources)
client -> CloudFront (NOT cached) -> LB -> Compute (EC2 / Fargate / Lambda)

You can manage different paths or routes via CloudFront Behaviour functionality. So root (/index.html) points to your S3. and APIs (/api) can point to the Load Balancer for dynamic content.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

How can I point the /api endpoint to the load balancer? I tried created a new hosted zone in the form example.com/api but my /api endpoints seem to still be hitting CloudFront.
docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/… Follow this tutorial to understand what are Custom Origins and Behaviours. You have to create Custom Origin for your LB and set path pattern ( /api) under Behaviours tab on Cloudfront.
I have tried to deploy a web application with the backend in Node.js and the frontend in React. The backend is deployed on an EC2 instance, and the frontend (React app) is hosted on S3. However, I am facing an issue where the routes in the React app are not working. The application successfully loads the index.html page, but after logging in, it fails to redirect to the dashboard rest all the routes are showing 404 , Am I missing something here ?
1

The bucket works like a static web hosting.

Since React it's client rendering, and not server rendering, it's a complete different app than your node backend.

The client will recieve the static files from CloudFront/S3, and that files (HTML, JavaScript rendered in the client's machine), will communicate with your API hosted in EC2.

You can host both, frontend and backend in EC2.

Or frontend in S3 or CludFront and the backend in EC2.

It's cheaper if you host your stuff separately, since EC2 has dinamic costs.

Now, if you use a server rendering framework like NextJS or Gatsby, the "static files" and the backend are the same thing, the backend render the static files and send them to the client, in that case you need to host everything in EC2.

Usually is better to host everything in the same server for practicity, specially when there are not dynamic costs.

You can opt for another VPS hosting for your server, it's not related to your question, but I reccomend Hetzner, it's cheaper and better than EC2.

Improve this answer

1 Comment

So in the case of S3/Cloudfront, my domain would point to the S3 resource file? If I have a load balancer, does the front-end hit the load balancer address?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.