Deploy React App on an ubuntu EC2 instances in AWS

Step 1: Launch an EC2 Instance

• Log in to your AWS Management Console.

• Navigate to EC2 and click "Launch Instance."

• Choose "Ubuntu Server" (e.g., Ubuntu 20.04 LTS) as the AMI.

• Select an instance type (e.g., t2.micro for free tier).

• Configure security group: Allow HTTP (port 80) and SSH (port 22).

• Download the .pem key file for SSH access.

Step 2: Connect to Your EC2 Instance

Option 1: Using Terminal (SSH

Open a terminal and navigate to the directory with your .pem file.

Run:

ssh -i your-key.pem ubuntu@<ec2-public-ip>

Replace <ec2-public-ip> with your instance’s public IP.

OR

Option 2: Using MobaXterm (Windows Users)

• Download and install MobaXterm from its official site.

• Open MobaXterm, click "Session" > "SSH."

• Enter your EC2 public IP in "Remote host."

• Check "Specify username" and enter ubuntu.

• Under "Advanced SSH settings," upload your .pem file as the "Private key."

• Click "OK" to connect.

Step 3: Update the Instance

Once connected, update the package list:

sudo apt update && sudo apt upgrade -y

Step 4: Install Node.js and npm

Install Node.js (React requires it)

sudo apt install nodejs npm -y

Verify installation

node -v && npm -v

Step 5: Install Git (Optional)

If your React app is in a Git repository

sudo apt install git -y

Step 6: Clone or Upload Your React App

Option 1 : Clone from GitHub:

git clone <your-repo-url>
cd <your-repo-folder>

Option 2 : Upload via SCP:

scp -i your-key.pem -r /local/path/to/react-app ubuntu@<ec2-public-ip>:/home/ubuntu/

Then SSH into the instance and navigate to the app folder.

Option 3 : Upload via FileZilla

• Download and install FileZilla from its official site.

• Open FileZilla, go to "File" > "Site Manager" > "New Site."

• Set:

  • Protocol: SFTP

  • Host: <ec2-public-ip>

  • Logon Type: Key file

  • User: ubuntu

  • Key file: Upload your .pem file

• Connect, then drag and drop your React app folder to /home/ubuntu/ on the remote side.

• SSH into the instance and navigate to the uploaded folder.

Step 7: Install Dependencies

Inside your React app directory:

npm install

Step 8: Build the React App

Generate the production build:

npm run build

This creates a build folder with optimized files.

Step 9: Install a Web Server (e.g., Nginx)

Install Nginx to serve the app:

sudo apt install nginx -y

Start Nginx:

sudo systemctl start nginx
sudo systemctl enable nginx

Step 10: Configure Nginx to Serve the React App

Transfer the build files that present in local through FileZilla to the Nginx directory:

sudo mv build /var/www/html/

Edit the Nginx configuration (if needed)

sudo nano /etc/nginx/sites-available/default

Ensure it points to /var/www/html and supports React routing

server {
    listen 80;
    server_name <ec2-public-ip>;
    root /var/www/html;
    index index.html;

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

Save (ctrl + x) and then press Y key and exit (hit enter key) , then restart Nginx

sudo systemctl restart nginx

Step 11: Test Your Deployment

• Open a browser and enter your EC2 public IP (e.g., http://<ec2-public-ip>).

• You should see your React app live!

Step 12: (Optional) Set Up a Domain

• Point a domain to your EC2 IP using DNS settings (e.g., Route 53).

• Update the Nginx config with your domain name.

Notes:

• Keep your .pem file secure and never upload it to the server.

• Monitor your EC2 instance and set up auto-scaling if needed.

• For production, consider using PM2 to run the app as a Node.js server instead of just serving static files.

Liked this guide? Subscribe to my Hashnode channel for more tutorials on web development, cloud deployment, and tech tips! Follow me [https://hashnode.com/@hamadzip] to stay updated with my latest posts. Happy coding!