Deploying ReactJS & Next.js Apps on EC2, Nginx/Apache, and S3 | AzBuildAi

🚀 ReactJS Deployment on EC2

1. Build Your React App

npm run build

This creates a build/ folder with static HTML, CSS, and JS.

2. Setup Apache or Nginx

sudo yum install httpd -y  # for Apache
sudo yum install nginx -y # for Nginx

3. Configure Apache

sudo nano /etc/httpd/conf.d/reactapp.conf
          

<VirtualHost *:80>
    DocumentRoot "/var/www/html/build"
    <Directory "/var/www/html/build">
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

4. Configure Nginx

sudo nano /etc/nginx/conf.d/reactapp.conf
          

server {
    listen 80;
    server_name your-domain.com;

    root /var/www/html/build;
    index index.html;

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

5. Enable HTTPS with Certbot

sudo yum install epel-release -y
sudo yum install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your-domain.com

---

🌐 Next.js Deployment (EC2)

1. Install Dependencies & Build

npm install
npm run build
npm start

2. Use PM2 (Optional)

npm install -g pm2
pm2 start npm --name "next-app" -- start
pm2 save
pm2 startup

3. Nginx Reverse Proxy

location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

---

🪣 Deploy to AWS S3 (Static Hosting)

1. Create an S3 Bucket

Enable static website hosting, set permissions to public-read.

2. Upload Build Files

aws s3 sync build/ s3://your-bucket-name/ --acl public-read

3. Set index and error pages

Index document: index.html
Error document: index.html

4. (Optional) Connect to CloudFront

Use CloudFront for CDN + HTTPS (via ACM certificate).