Step-by-Step Guide to Deploy a React Application on AWS EC2 with Nginx

Introduction

Deploying web applications to production can seem daunting, but with Amazon Web Services (AWS) EC2 and Nginx, you can host your React applications reliably and efficiently. In this comprehensive guide, we'll walk through the entire process of deploying a React task management application on an EC2 instance using Nginx as our web server.

Prerequisites

Before we begin, ensure you have:

• An AWS account with appropriate permissions

• A React application ready for deployment (Github Repo link of task management app)

• Basic knowledge of Linux commands

• SSH client installed on your local machine

Setting Up AWS EC2 Instance

Step 1: Launch EC2 Instance

1. Log in to your AWS Management Console

2. Navigate to EC2 Dashboard

3. Click "Launch Instance"

   

4. Choose an Amazon Machine Image (AMI) - we'll use Ubuntu Server 22.04 LTS

5. Select instance type - t3.micro offers better performance than t2.micro with burstable CPU

6. Create or select an existing key pair for SSH access

7. Configure storage (8GB default is sufficient for most React apps)

Step 2: Configure Instance Details

• Keep default VPC settings unless you have specific networking requirements

• Enable "Auto-assign Public IP" to access your instance from the internet

• Add tags for better organization (e.g., Name: "React-Task-App-Server")

Configuring Security Groups

Security groups act as virtual firewalls for your EC2 instance. Configure the following inbound rules:

Connecting to Your EC2 Instance

Once your instance is running, connect via SSH:

# Replace 'your-key.pem' with your actual key file name
# Replace 'your-ec2-public-ip' with your instance's public IP
chmod 400 your-key.pem
ssh -i your-key.pem ubuntu@your-ec2-public-ip

Installing Nginx

Update your system and install Nginx:

# Update package index
sudo apt update

# Install Nginx
sudo apt install nginx -y

# Start and enable Nginx
sudo systemctl start nginx
sudo systemctl enable nginx

# Check Nginx status
sudo systemctl status nginx

Verify installation by visiting your EC2 public IP in a browser. You should see the Nginx welcome page.

Preparing Your React Application

Building Your React App

On your local machine, prepare your React application for production:

# Navigate to your React app directory
cd /path/to/your/react-task-app

# Install dependencies (if not already done)
npm install

# Create production build
npm run build

This creates a build folder containing optimized static files.

Transferring Files to EC2

Use SCP to transfer your build files:

# Transfer the entire build folder to EC2
scp -i your-key.pem -r ./build ubuntu@your-ec2-public-ip:~/

Alternatively, you can use tools like FileZilla or WinSCP for GUI-based file transfer.

Configuring Nginx for React

Step 1: Create Nginx Configuration

SSH back into your EC2 instance and create a new Nginx configuration:

# Create a new site configuration
sudo nano /etc/nginx/conf.d/task-manager.conf

Add the following configuration:

server {
    listen 80;
    server_name your-ec2-ip;

    location / {
        proxy_pass http://localhost:3000;
        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;
    }
}

Deploying Your Application

Step 1: Set Up Web Directory

Step 2: Verify Deployment

Visit your EC2 public IP in a browser (e.g., http://your-ec2-ip-address). You should see your React task management application running successfully.

Testing and Troubleshooting

Common Issues and Solutions

1. 502 Bad Gateway Error

    # Check Nginx error logs
    sudo tail -f /var/log/nginx/error.log
   
    # Ensure Nginx configuration is correct
    sudo nginx -t
   

2. React Router Not Working

   • Verify that index.html exists in your build directory

Checking Logs

# Nginx access logs
sudo tail -f /var/log/nginx/access.log

# Nginx error logs
sudo tail -f /var/log/nginx/error.log

# System logs for Nginx
sudo journalctl -u nginx -f

Conclusion

Congratulations! You've successfully deployed your React task management application on AWS EC2 with Nginx. This setup provides:

• Scalability: Easy to scale up EC2 resources as needed

• Reliability: AWS infrastructure with 99.99% uptime SLA

• Performance: Nginx optimization for static file serving

• Cost-Effective: Using free tier resources for development

Next Steps

Consider implementing:

• Auto-scaling groups for high availability

• Load balancers for multiple instances

• CI/CD pipeline using AWS CodePipeline

• Database integration with RDS

• CDN setup with CloudFront

Key Takeaways

✅Always test your Nginx configuration before reloading

✅Monitor your application logs regularly

✅Keep your system and dependencies updated

This deployment method works for any React application, not just task management apps. The same principles apply whether you're deploying a portfolio site, e-commerce platform, or complex web application

.