Deploy React App to AWS EC2

This guide shows a clean EC2 deployment path for a React application. Use this approach when you want direct control over the Linux server, Nginx configuration, logs, and instance lifecycle.

Overview

By the end of this guide, you will:

• Launch an EC2 instance
• Secure inbound traffic with a security group
• Build the React application
• Serve the production build with Nginx
• Verify the deployment from the public URL

Prerequisites

• AWS account with billing alerts enabled
• React application that can build successfully
• SSH key pair for EC2
• Basic Linux and terminal knowledge

Architecture

The browser sends HTTP traffic to the EC2 public IP. Nginx receives the request on port 80 and serves the static React build from /usr/share/nginx/html.

Code Example

Use this Nginx server block for React Router based applications:

server {
  listen 80;
  server_name _;

  root /usr/share/nginx/html;
  index index.html;

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

Step 1: Launch an EC2 Instance

1. Open the AWS Console and go to EC2.
2. Choose Launch instance.
3. Select Amazon Linux 2023 or Ubuntu LTS.
4. Choose t3.micro or t2.micro for a small tutorial deployment.
5. Attach a key pair that you control.
6. Allow inbound SSH on port 22 from your IP.
7. Allow inbound HTTP on port 80 from the internet.

Step 2: Connect to the Server

ssh -i your-key.pem ec2-user@your-public-ip

For Ubuntu, use ubuntu instead of ec2-user.

Step 3: Install Nginx

Amazon Linux:

sudo dnf update -y
sudo dnf install nginx -y
sudo systemctl enable nginx
sudo systemctl start nginx

Ubuntu:

sudo apt update
sudo apt install nginx -y
sudo systemctl enable nginx
sudo systemctl start nginx

Step 4: Build the React App

Run this on your local machine:

npm ci
npm run build

For Vite projects the build folder is usually dist. For Create React App projects it is usually build.

Step 5: Upload the Build

ssh -i your-key.pem ec2-user@your-public-ip "mkdir -p /tmp/react-build"
scp -i your-key.pem -r dist/* ec2-user@your-public-ip:/tmp/react-build

Then move the files into the Nginx web root:

sudo mkdir -p /usr/share/nginx/html
sudo cp -r /tmp/react-build/* /usr/share/nginx/html/
sudo chown -R nginx:nginx /usr/share/nginx/html

On Ubuntu, the Nginx user is usually www-data.

Step 6: Apply the Nginx Config

sudo nginx -t
sudo systemctl reload nginx

Step 7: Verify the App

Open:

http://your-public-ip

Refresh a nested React route such as /dashboard. If it loads correctly, the try_files rule is working.

Production Checklist

• Use Route 53 for a domain name.
• Add HTTPS with AWS Certificate Manager and a load balancer, or use Certbot directly on the instance.
• Restrict SSH access to your IP or use AWS Systems Manager Session Manager.
• Ship logs to CloudWatch.
• Automate deployment with GitHub Actions, Jenkins, or another CI/CD tool.

Summary

EC2 is a good deployment option when you want direct server control. Keep the instance patched, restrict access, use HTTPS, and automate the build-and-upload flow once the manual path is clear.