Deploying ReactJs frontend + NodeJs backend to AWS

Question

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?

Answer 1

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.

Answer 2

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.