🚀 Automating React App Deployment on AWS EC2 Using a Shell Script: Step-by-Step Guide

📖 Introduction

Deploying React applications manually on cloud servers can be time-consuming and error-prone. By automating the deployment process using a shell script, we can save time, reduce mistakes, and make the setup repeatable.

In this guide, I’ll show how I deployed my Meme Generator ReactJS app on an AWS EC2 instance, entirely automated with a shell script. ⚡

🛠 Prerequisites

Before starting, make sure you have:

1. An AWS EC2 instance running (Amazon Linux 2023 recommended) 🖥️

2. SSH access to your EC2 instance 🔑

3. Basic knowledge of React, npm, and shell scripting 💻

1️⃣ Connect to Your EC2 Instance

Use SSH to connect:

ssh -i "your-key.pem" ec2-user@<EC2_PUBLIC_IP>

Explanation:
This gives you terminal access to your EC2 instance to run the automation script. 🌐

2️⃣ Create the Automation Shell Script

Create a script called project.sh:

vim project.sh

2️⃣ Create the Automation Shell Script

Create a script called project.sh:

vim project.sh

Paste this automation script (script may vary according to your project):

#!/bin/bash

# Repo and project folder
REPO_URL="https://github.com/hmjatt/Meme-Generator-ReactJS.git"
FOLDER_NAME="Meme-Generator-ReactJS/meme-generator"

# 1️⃣ Install git if missing
if ! command -v git &> /dev/null; then
    echo "Installing git..."
    sudo yum install git -y
fi

# 2️⃣ Install Node.js and npm if missing
if ! command -v npm &> /dev/null; then
    echo "Installing Node.js and npm..."
    sudo dnf module enable nodejs:20 -y
    sudo dnf install nodejs -y
fi

# 3️⃣ Clone or update repo
if [ ! -d "$FOLDER_NAME" ]; then
    git clone "$REPO_URL" Meme-Generator-ReactJS
else
    cd Meme-Generator-ReactJS || exit
    git pull origin main
    cd ..
fi

# 4️⃣ Enter project folder and install dependencies
cd "$FOLDER_NAME" || exit
npm install

# 5️⃣ Start the React app on all interfaces
npm start -- --host 0.0.0.0

Explanation:

• The script automates every step ✅, including installing git, Node.js/npm, cloning/updating the repo, and starting the app.

• No manual intervention needed once it runs. 🔄

3️⃣ Make the Script Executable

chmod +x project.sh

Explanation:
Allows the script to be executed directly from the terminal. ⚡

---

4️⃣ Run the Automation Script

./project.sh

Explanation:

• Executes the automated deployment.

• Output confirms the app compiled successfully and is running. 🎉

---

5️⃣ Configure EC2 Security Group

1. Go to AWS EC2 Console → Security Groups → select your instance’s SG 🔒

2. Edit Inbound Rules to allow:

   • Type: Custom TCP

   • Port Range: 3000

   • Source: 0.0.0.0/0 🌐

3. Save the rule ✅

Explanation:
This allows external access to your React app from your browser. 🌍

6️⃣ Access Your React App

Open your browser and visit:

http://<EC2_PUBLIC_IP>:3000

Explanation:

• Your React app should now be visible in the browser.

• --host 0.0.0.0 ensures it listens on all network interfaces. 🌟

---

✅ Conclusion

Using a shell script for automated deployment makes the process:

• Faster 🚀

• Repeatable 🔄

• Less error-prone 🛡️

Automation is key for efficient cloud deployments and helps save time while reducing mistakes.