Deploying-a-React-App-on-AWS-EC2-with-Nginx

This guide walks through deploying a React application to an AWS EC2 instance running Amazon Linux, with Nginx serving as the web server. Along the way, we also practice useful Linux commands for networking, process monitoring, and system information.

🔧 Prerequisites

AWS Account

EC2 instance (Amazon Linux 2)

Key pair (.pem file) for SSH access

Basic knowledge of Linux commands

1️⃣ Connect to EC2 ssh -i devops-keypair.pem ec2-user@<EC2_PUBLIC_IP>

2️⃣ Update Packages & Install Tools sudo yum update -y sudo yum install -y git nodejs npm nginx

3️⃣ Clone & Build React App git clone cd my-react-app npm install npm run build

The build will create a build/ folder with production-ready files.

4️⃣ Configure Nginx

Remove default files and copy the React build:

sudo rm -rf /usr/share/nginx/html/* sudo cp -r build/* /usr/share/nginx/html/

Update Nginx config:

sudo nano /etc/nginx/nginx.conf

Replace the server block with:

server { listen 80; server_name _; root /usr/share/nginx/html; index index.html;

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

error_page 404 /index.html; }

Restart Nginx:

sudo systemctl restart nginx sudo systemctl enable nginx

5️⃣ Security Group Settings

Open port 80 (HTTP) in your EC2 security group.

Access the site at http://<EC2_PUBLIC_IP>/.

6️⃣ Useful Linux Commands Practiced

Networking: ifconfig, ping, netstat, ss, dig, host

Processes: ps, pstree, kill

System Info: uname, uptime, who, free -h, df -h, du

File Ops: wget, cp, chown, rm

⚠️ Common Errors & Fixes

Error: sh: react-scripts: command not found ✅ Fix: Install react-scripts manually

npm install react-scripts --save

Error: cp: cannot stat 'build/*': No such file or directory ✅ Fix: Run npm run build from the root of your React project (/home/ec2-user/my-react-app) before copying files.

Error: chown: invalid user: 'www-data:www-data' ✅ Fix: On Amazon Linux, the web user is nginx, not www-data:

sudo chown -R nginx:nginx /usr/share/nginx/html

Error: tee: /etc/nginx/sites-available/default: No such file or directory ✅ Fix: Amazon Linux uses /etc/nginx/nginx.conf, not sites-available. Edit nginx.conf directly.

Error: Site not accessible via browser ✅ Fix: Ensure your EC2 Security Group has inbound rules allowing HTTP (port 80) from 0.0.0.0/0.

🎯 Outcome

React app successfully served on AWS EC2 using Nginx.

Improved Linux command-line skills in networking, monitoring, and debugging.