Stop Deploying React Apps Manually!

Stop Deploying React Apps Manually! Set Up GitHub-to-EC2 CI/CD in 15 Minutes (No DevOps Degree Needed)

🚀 In this guide, we’ll set up a zero-downtime CI/CD pipeline that automatically deploys your React app from GitHub to an AWS EC2 instance using Docker and GitHub Actions.

Prerequisites

Before we begin:

1. A brain.
2. A working React app hosted on GitHub.
3. An AWS EC2 Ubuntu instance with Docker and Nginx installed.
4. SSH access between GitHub and EC2.

• Not done yet? 👉 Check out this step-by-step guide to set up GitHub SSH keys on EC2

🧱 Step 1: Create a Dockerfile in Your React Project

Inside the root of your React project, create a Dockerfile:

# Stage 1: Install dependencies
FROM node:20-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm install

# Stage 2: Build the app
FROM node:20-alpine AS build
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# Stage 3: Serve app using Nginx
FROM nginx:1.21-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Add a basic nginx.conf to serve the app:

server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri /index.html;
    }
}

🛠 Step 2: Add a Deploy Script on EC2

SSH into your EC2 instance and create a script like this:

📄 /home/ubuntu/deploy_frontend.sh

#!/bin/bash
set -e

APP_NAME="my-react-app"
PROJECT_DIR="/home/ubuntu/my-react-project"
IMAGE_NAME="react-app:latest"
CONTAINER_NAME="react-app-container"
PORT=3000

echo "[INFO] Pulling latest code..."
cd $PROJECT_DIR || { echo "[ERROR] Project folder not found!"; exit 1; }
git pull origin main

echo "[INFO] Building Docker image..."
docker build -t $IMAGE_NAME .

echo "[INFO] Stopping existing container if any..."
docker stop $CONTAINER_NAME 2>/dev/null || true
docker rm $CONTAINER_NAME 2>/dev/null || true

echo "[INFO] Running new container..."
docker run -d --name $CONTAINER_NAME -p $PORT:80 $IMAGE_NAME

if [ "$(docker ps -q -f name=$CONTAINER_NAME)" ]; then
  echo "[SUCCESS] App deployed successfully on port $PORT!"
else
  echo "[ERROR] Failed to start container!"
  exit 1
fi

Make the script executable:

chmod +x /home/ubuntu/deploy_frontend.sh

🔐 Step 3: Add EC2 Secrets to GitHub

In your GitHub repo:

• Go to Settings → Secrets and variables → Actions → New repository secret
• Add:

EC2_HOST            = your.ec2.ip.address
EC2_USER            = ubuntu
EC2_SSH_PRIVATE_KEY = (Paste your entire private key — BEGIN to END)

🤖 Step 4: Create GitHub Actions Workflow

Create the following file:

📄 .github/workflows/deploy.yml

name: 🚀 Deploy React App to EC2

on:
  push:
    branches:
      - main

jobs:
  deploy:
    name: 📦 Deploy via SSH
    runs-on: ubuntu-latest

    steps:
      - name: 🔐 Checkout Code
        uses: actions/checkout@v3

      - name: 🚀 SSH & Deploy to EC2
        uses: appleboy/ssh-action@v0.1.6
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ${{ secrets.EC2_USER }}
          key: ${{ secrets.EC2_SSH_PRIVATE_KEY }}
          script: |
            echo "[INFO] Starting deployment..."
            cd /home/ubuntu/my-react-project
            chmod +x deploy_frontend.sh
            ./deploy_frontend.sh
            echo "[INFO] Deployment complete!"

✅ Final Checklist

• React app with working Dockerfile
• EC2 instance with Docker + SSH access
• SSH key setup between GitHub and EC2 (guide here)
• GitHub secrets added
• Workflow file committed

🎉 You’re Done!

Now, every time you push to main, GitHub Actions will:

1. SSH into your EC2 instance
2. Pull the latest code
3. Build and run the Docker container
4. Automatically deploy your React app