How to Deploy a React App on AWS EC2 with CI/CD Pipeline (2025)
Deploying a React web application on AWS EC2 using a CI/CD pipeline offers unmatched control, flexibility, scalability, and a powerful environment for enterprise-level or custom-configured deployments. In this comprehensive and SEO-optimized guide, you'll learn how to deploy a React app on an EC2 instance using GitHub Actions for CI/CD. This updated 2025 guide includes the most recent tools, practices, and configurations to ensure your deployment is robust, automated, and production-ready.
Why Choose AWS EC2 for Deployment?
While platforms like Vercel and Netlify provide one-click deployments for simple use cases, Amazon EC2 is ideal when you need:
- Full control over server configurations and hosting environment
- Custom setups including advanced Nginx rules, load balancers, SSL, Docker, or reverse proxies
- High scalability with elastic IPs, load balancers, and cloud auto-scaling
- Complete DevOps and CI/CD integration with other AWS services
- Cost control using the AWS Free Tier or scalable billing
Prerequisites
To follow along, ensure you have:
- A functional React application (created using CRA or Vite, etc.)
- An AWS account with permission to manage EC2 resources
- A GitHub repository containing your React project
- Installed and configured AWS CLI (optional, for managing AWS via terminal)
- Basic familiarity with Linux, SSH, Git, Nginx, and GitHub Actions
Step-by-Step Guide to Deploy React App on AWS EC2 with CI/CD
Step 1: Launch and Configure an EC2 Instance
- Log into your AWS EC2 Console
- Launch a new instance:
- OS: Amazon Linux 2 or Ubuntu 22.04 LTS
- Instance Type: t2.micro (eligible for AWS Free Tier)
- Configure security group rules to allow HTTP (80), HTTPS (443), and SSH (22)
- Download and securely store your key pair (
.pemfile)
- Connect to your instance:
ssh -i "your-key.pem" ec2-user@your-ec2-public-ipStep 2: Install Node.js, Nginx, and Git on EC2
# For Amazon Linux
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs nginx git
# For Ubuntu
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs nginx gitStep 3: Clone the React Project and Build
cd /var/www
sudo git clone https://github.com/yourusername/your-react-repo.git
cd your-react-repo
npm install
npm run buildEnsure the build/ directory is created after building. This is what will be served by Nginx.
Step 4: Configure Nginx to Serve Your React App
sudo nano /etc/nginx/conf.d/react-app.confPaste the following Nginx configuration:
server {
listen 80;
server_name your-ec2-public-ip;
root /var/www/your-react-repo/build;
index index.html index.htm;
location / {
try_files $uri /index.html;
}
}Then run:
sudo nginx -t
sudo systemctl restart nginxStep 5: Add SSL Using Let's Encrypt (Optional But Strongly Recommended)
Install Certbot and enable HTTPS:
# For Amazon Linux
sudo yum install -y certbot python3-certbot-nginx
# For Ubuntu
sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.comCertbot will update your Nginx config and automatically renew SSL certificates.
Step 6: Set Up CI/CD with GitHub Actions
Create a Deployment Workflow File:
Inside your React repo, create a GitHub Actions workflow: .github/workflows/deploy.yml
name: Deploy to AWS EC2
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v3
- name: Install SSH Key
uses: webfactory/ssh-agent@v0.7.0
with:
ssh-private-key: ${{ secrets.EC2_SSH_KEY }}
- name: SSH and Deploy
run: |
ssh -o StrictHostKeyChecking=no ec2-user@your-ec2-public-ip << 'EOF'
cd /var/www/your-react-repo
git pull origin main
npm install
npm run build
sudo systemctl restart nginx
EOFAdd SSH Private Key to GitHub Secrets
- Open your GitHub repository > Settings > Secrets and Variables > Actions
- Add a new secret:
- Name:
EC2_SSH_KEY - Value: Paste the contents of your private key (
id_rsa)
- Name:
This enables GitHub Actions to securely SSH into your EC2 instance and trigger deployments automatically.
Verifying and Monitoring Your Deployment
- Visit
http://your-ec2-public-ipor your configured domain to see your app. - On each push to the
mainbranch, the CI/CD workflow will:- Pull new changes
- Rebuild the app
- Restart the Nginx server
You can monitor logs in EC2 via:
journalctl -u nginx
Bonus Tips for Production Deployment
- Auto-start on reboot: Use
pm2,systemd, or shell scripts for automation. - Elastic IP: Associate a static IP to your instance.
- Backup Strategy: Use GitHub backup tools or create AMIs of your EC2 regularly.
- Monitoring: Set up CloudWatch for advanced logging and alerts.
- Firewall and Security: Harden your server with fail2ban, UFW, or custom rules.
Conclusion
Deploying a React application to AWS EC2 using a modern CI/CD pipeline via GitHub Actions in 2025 enables seamless automation, advanced customization, and production-level hosting power. While this approach requires more setup compared to serverless solutions, it gives you granular control over your hosting infrastructure, security, and scaling options. Perfect for professional developers, agencies, and businesses that demand full control and flexibility.
Stay connected for more advanced DevOps and deployment guides!
