From Zero to Deployed: Setting Up a Static Site on EC2 with Nginx

me_codes — Sat, 18 Oct 2025 20:41:42 +0000

Deploying a Vite React App on AWS EC2 with Nginx and GitHub Actions

I just deployed my first static website on AWS EC2 with automated CI/CD, and honestly? The satisfaction of seeing everything work together is incredible! 🚀

In this guide, I'll walk you through deploying a Vite React app on an EC2 instance using Nginx as a web server, with GitHub Actions handling automatic deployments. Yes, EC2 might be overkill for a static site, but it's a fantastic learning experience that teaches you production deployment fundamentals.

What We're Building

Tech Stack:

Frontend: Vite + React
Server: AWS EC2 (Ubuntu)
Web Server: Nginx
CI/CD: GitHub Actions
Bonus: AWS Elastic IP for a static IP address (so we don't waste time assigning the domain to the new IP address every time you stop the instance)

Architecture Overview:

GitHub Push → GitHub Actions → Build React App → SCP to EC2 → Nginx Serves Static Files

Prerequisites

Before we start, make sure you have:

An AWS account (free tier works!)
A GitHub repository with your Vite React app
Basic terminal/SSH knowledge
(Optional) A domain name

Step 1: Setting Up Your EC2 Instance

Launch an EC2 Instance

Go to AWS Console → EC2 → Launch Instance
Choose Ubuntu Server 22.04 LTS (free tier eligible)
Instance type: t2.micro (free tier)
Key pair: Create a new key pair or use existing one (download the .pem file!)

Security Group: Configure the following rules:

SSH (port 22) - Your IP
HTTP (port 80) - Anywhere (0.0.0.0/0)
HTTPS (port 443) - Anywhere (0.0.0.0/0)

Launch the instance!

Allocate an Elastic IP

Elastic IP ensures your instance keeps the same public IP even after restarts:

EC2 Dashboard → Elastic IPs → Allocate Elastic IP address
Select the new EIP → Actions → Associate Elastic IP address
Choose your EC2 instance
Note down this IP - you'll need it!

Connect to Your Instance

chmod 400 your-key.pem  # you do this because ssh will prevent you from ssh'ing if it's public
ssh -i your-key.pem ubuntu@YOUR_ELASTIC_IP

Step 2: Installing and Configuring Nginx

Once connected to your EC2 instance:

Install Nginx

sudo apt update
sudo apt install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx

Visit your Elastic IP in a browser - you should see the Nginx welcome page!

Create Directory for Your App

sudo mkdir -p /var/www/myapp
sudo chown -R ubuntu:ubuntu /var/www/myapp

Configure Nginx

Create a new Nginx configuration:

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

Add this configuration:

server {
    listen 80;
    listen [::]:80;

    server_name YOUR_ELASTIC_IP;  # Or your domain name

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

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

    # Cache static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Important: The try_files $uri $uri/ /index.html; line is crucial for React Router to work properly!

Enable the Configuration

# Create symbolic link
sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/

# Remove default configuration
sudo rm /etc/nginx/sites-enabled/default

# Test configuration
sudo nginx -t

# Reload Nginx
sudo systemctl reload nginx

Step 3: Preparing Your GitHub Repository

Set Up GitHub Secrets

Go to your GitHub repo → Settings → Secrets and variables → Actions → New repository secret

Add these secrets:

EC2_HOST: Your Elastic IP
EC2_USERNAME: ubuntu
EC2_SSH_KEY: Contents of your .pem file (entire file, including BEGIN and END lines)

Step 4: Creating the GitHub Actions Workflow

Create .github/workflows/deploy.yml in your repository:

name: Deploy to EC2

on:
  push:
    branches:
      - main  # or master, depending on your default branch

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build project
        run: npm run build

      - name: Deploy to EC2
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ${{ secrets.EC2_USERNAME }}
          key: ${{ secrets.EC2_SSH_KEY }}
          source: "dist/*"
          target: "/var/www/myapp"
          strip_components: 1
          rm: true

What this does:

Triggers on every push to main
Checks out your code
Installs Node.js and dependencies
Builds your Vite app (creates dist folder)
Uses SCP to copy the built files to your EC2 instance

Step 5: Deploy!

Commit and push your changes:

git add .
git commit -m "Add CI/CD pipeline"
git push origin main

Go to your GitHub repo → Actions tab and watch the magic happen! ✨

Once complete, visit your Elastic IP - your React app should be live!

Troubleshooting Common Issues

Issue 1: Nginx Shows 403 Forbidden

Solution: Check file permissions

sudo chown -R ubuntu:ubuntu /var/www/myapp
sudo chmod -R 755 /var/www/myapp

Issue 2: GitHub Actions Can't Connect via SSH

Problem: The SSH key format might be incorrect

Solution:

Make sure you copied the ENTIRE .pem file content including -----BEGIN RSA PRIVATE KEY----- and -----END RSA PRIVATE KEY-----
Check that EC2 security group allows SSH from GitHub Actions IPs (or use 0.0.0.0/0 for testing)

Issue 3: SCP Not Copying Files

Problem: Target directory doesn't exist or permissions issue

Solution:

# On EC2
sudo mkdir -p /var/www/myapp
sudo chown -R ubuntu:ubuntu /var/www/myapp

Issue 4: React Router Returns 404 on Refresh

Problem: Nginx doesn't know to serve index.html for client-side routes

Solution: Make sure your Nginx config includes:

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

Issue 5: Nginx Config Test Fails

Check syntax errors:

sudo nginx -t

Common issues:

Missing semicolons
Wrong file paths
Typos in directives

Bonus: Adding a Custom Domain

In your domain registrar, add an A record pointing to your Elastic IP
Update your Nginx config:

server_name yourdomain.com www.yourdomain.com;

Reload Nginx: sudo systemctl reload nginx

Adding HTTPS with Let's Encrypt

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Certbot will automatically update your Nginx config and set up auto-renewal!

What I Learned

The good:

The whole process is more approachable than it seems
Seeing each piece connect is incredibly satisfying
GitHub Actions makes deployment feel magical

The challenges:

Nginx configuration syntax can be picky (those semicolons!)
SSH key formatting in GitHub Secrets needs to be exact
Understanding the try_files directive for React Router took some research

The revelation:

My biggest takeaway? Modern DevOps tools have abstracted away so much complexity. What used to require deep systems knowledge is now accessible to anyone willing to learn. We're standing on the shoulders of giants, and it's amazing.

Next Steps

Now that you have a working deployment pipeline, consider:

Setting up staging and production environments
Adding build caching to speed up deployments
Implementing blue-green deployments
Adding monitoring with CloudWatch
Setting up automated backups

Final Thoughts

Is EC2 overkill for a static site? Maybe. Could you use Vercel or Netlify instead? Absolutely. But there's immense value in understanding how production deployments work under the hood.

This knowledge transfers to deploying backends, databases, and more complex architectures. Plus, when that elastic IP resolves to your domain and Nginx serves your React app perfectly? That feeling is priceless. 🤯

My PSA: Don't be intimidated by how huge this sounds. The tools we have today are built by brilliant people who've hidden the truly scary stuff. What feels like magic is really just good engineering made accessible. Dive in, break things, fix them, and enjoy the journey!

Have questions or run into issues? Drop a comment below - I'd love to help troubleshoot!

Found this helpful? Give it a ❤️ and follow for more deployment guides!

DEV Community: me_codes