How to Deploy React & Node.js App on AWS (Production)

How to Deploy React & Node.js App on AWS (Production)

How to deploy React and Node.js app on AWS for production is one of those tasks that looks simple at first but becomes tricky once real users, performance, and stability come into play. I have deployed multiple React and Node.js applications on AWS for production workloads, and the biggest mistakes usually happen when developers treat a production environment the same way they treat local development.

In this guide, I will walk you through a real production-ready AWS deployment setup. This is not a demo-level tutorial. The goal here is to help you deploy an application that is stable, scalable, and optimized for real traffic, especially for users in the United States.

Understanding the Production Architecture

Before touching AWS, it is important to understand how a React and Node.js app should behave in production. In most real-world setups, React acts as the frontend and is built into static files. Node.js runs as the backend API server. In production, these two should not fight for resources on the same process.

A clean architecture looks like this:

  • React app built into static files
  • Node.js API running as a server process
  • Nginx acting as a reverse proxy
  • AWS EC2 hosting the backend
  • Optional CDN for faster frontend delivery

This separation gives better performance, easier debugging, and smoother scaling.

Choosing the Right AWS Setup

For most startups and content-driven platforms, AWS EC2 is the best starting point. It gives you full control and predictable costs.

I usually recommend:

  • EC2 instance with Ubuntu
  • At least 2 GB RAM for Node.js apps
  • Separate security group for HTTP, HTTPS, and SSH

Avoid starting with overly complex services like ECS or EKS unless you really need them.

Preparing the EC2 Server

Once your EC2 instance is running, connect to it using SSH and update the system.

sudo apt update
sudo apt upgrade -y

Install Node.js using the official NodeSource repository. This avoids outdated versions.

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

Verify the installation.

node -v
npm -v

At this point, your server is ready to run Node.js applications.

Setting Up the Node.js Backend

Clone your backend repository on the server.

git clone https://github.com/your-repo/backend.git
cd backend

Install dependencies using production-safe settings.

npm install --omit=dev

Never expose environment variables directly in code. Create a .env file instead.

PORT=4000
NODE_ENV=production
DB_URL=your_database_url

Use this pattern inside your app to load environment variables safely.

import dotenv from "dotenv";
dotenv.config();

const port = process.env.PORT || 4000;

This setup keeps secrets secure and makes deployments cleaner.

Running Node.js in Production with PM2

Running Node.js directly using node server.js is risky in production. If the app crashes, it stays down.

PM2 solves this problem.

sudo npm install -g pm2

Start your application with PM2.

pm2 start index.js --name "node-api"

Save the process list so it restarts automatically.

pm2 save
pm2 startup

This ensures your backend survives server restarts and crashes.

Building the React Application

React apps should never be served using npm start in production. On your local machine, create a production build.

npm run build

This generates optimized static files. These files are lightweight, fast, and safe to serve publicly. Upload the build folder to your EC2 server.

scp -r build ubuntu@your-server-ip:/var/www/react-app

Installing and Configuring Nginx

Nginx acts as the gateway between users and your application.

Install it using:

sudo apt install nginx -y

Create a new configuration file.

sudo nano /etc/nginx/sites-available/react-node-app

Use a setup like this:

server {
listen 80;
server_name yourdomain.com;

root /var/www/react-app;
index index.html;

location / {
try_files $uri /index.html;
}

location /api {
proxy_pass http://localhost:4000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

Enable the configuration.

sudo ln -s /etc/nginx/sites-available/react-node-app /etc/nginx/sites-enabled
sudo nginx -t
sudo systemctl restart nginx

Now React handles frontend routes and Node.js handles API requests.

During production deployment, incorrect proxy settings or backend process issues can sometimes trigger server-side errors. If you face this situation, this detailed guide on fixing the 502 Bad Gateway error on Nginx explains the most common causes and how to resolve them without affecting uptime.

Handling Frontend and Backend Communication

In a production environment, frontend and backend communication behaves differently compared to local development. Even when APIs work correctly on the server, browsers may block requests because of missing or incorrect headers. These issues usually appear only after deployment. This production-focused guide on fixing CORS errors in React and Node.js explains how to resolve them properly without weakening security.

Securing the App with HTTPS

Running a production app without HTTPS is not acceptable today.

Install Certbot.

sudo apt install certbot python3-certbot-nginx -y

Enable SSL.

sudo certbot --nginx -d yourdomain.com

This gives you a free SSL certificate and automatically renews it.

Improving Performance for US Traffic

If your audience is in the United States, latency matters.

Some simple improvements that work well:

  • Host EC2 in a US region like us-east-1
  • Enable gzip compression in Nginx
  • Use caching headers for static files

Example Nginx optimization:

gzip on;
gzip_types text/css application/javascript application/json;
gzip_min_length 256;

These small changes significantly improve page load time.

Handling Environment Differences Safely

Never hardcode production logic. Always check environment variables.

if (process.env.NODE_ENV === "production") {
console.log("Running in production mode");
}

This keeps development and production behavior clean and predictable.

Monitoring and Logs

How to Deploy React & Node.js App on AWS - Monitoring and Logs

Production issues always happen when you least expect them. Use PM2 logs to monitor errors.

pm2 logs node-api

Also enable basic Nginx logs.

sudo tail -f /var/log/nginx/error.log

These logs help you debug memory leaks, slow APIs, and unexpected crashes.

Network-related interruptions can also cause sudden connection drops in production environments. Errors like the Node.js ECONNRESET error often appear under load and should be addressed early to prevent unexpected application crashes.

Common Mistakes to Avoid

Many developers face issues after deployment because of simple mistakes.

=> Serving React from Node directly increases load and complexity.

=> Running Node without a process manager leads to downtime.

=> Ignoring environment variables causes security risks.

=> Deploying without HTTPS hurts trust and SEO.

Avoiding these mistakes makes your deployment stable and professional.

Frequently Asked Questions

1. Do I need separate AWS servers for React and Node.js in production?

No, you do not need separate AWS servers when you are starting out. A single EC2 instance can handle both the React frontend and the Node.js backend using Nginx. As traffic grows, you can later move the React build to a CDN or a static hosting service and keep Node.js on a separate EC2 instance.

2. Which AWS EC2 instance type is best for a React and Node.js app?

For most production setups, a t3.small or t3.medium instance works well. These instances provide enough memory and CPU for Node.js APIs and can handle moderate traffic. If your app performs heavy background jobs, upgrading to a higher memory instance is recommended.

3. Is it better to use AWS Elastic Beanstalk for React and Node.js deployment?

AWS Elastic Beanstalk can simplify deployment, but it hides many server-level controls. For developers who want full control over performance, security, and cost, using EC2 with Nginx is often a better option. Elastic Beanstalk works well for quick setups, but EC2 gives more flexibility for production tuning.

4. How do I handle zero-downtime deployments on AWS for Node.js?

Zero-downtime deployments are usually handled by running multiple Node.js processes and restarting them one by one. Tools like PM2 support reload modes that allow you to deploy new code without stopping the server. This ensures users do not experience downtime during updates.

5. Should I use a CDN when deploying a React app on AWS?

Using a CDN is not mandatory, but it improves load speed for users located far from your server. For applications targeting US traffic, a CDN helps deliver static React files faster and reduces load on your EC2 instance. This also improves Core Web Vitals and user experience.

Final Thoughts – Deploy React & Node.js App on AWS

Deploying a React and Node.js app on AWS is not just about getting it live. It is about building something that performs well, stays online, and scales when traffic increases.

With the setup shared in this guide, you get:

  • Clean separation of frontend and backend
  • Reliable Node.js process management
  • Secure HTTPS configuration
  • Better performance for US users

This is the same deployment pattern I use for production apps that handle real users and real traffic. If you plan to grow your application or monetize it, this approach will save you time, money, and stress in the long run.

Leave a Reply

Your email address will not be published. Required fields are marked *