github_action_ci_cd.md

🚀 Automated CI/CD with GitHub Actions, Vite React & Nginx on EC2 (100% Copy-Paste Ready)

In this step-by-step tutorial you'll learn how to:

1. Generate and upload an SSH deploy key to EC2
2. Link your local Vite React project to a GitHub repo
3. Configure GitHub Secrets for secure SSH access
4. Create a GitHub Actions workflow that:
   • Builds your Vite React app
   • Copies build artifacts to your EC2 via SCP
   • Deploys them to Nginx via SSH
5. Install Nginx & Certbot on EC2 and enable HTTPS with Let's Encrypt

Let's dive in!

---

1️⃣ What Is GitHub Actions?

GitHub Actions is GitHub's built-in CI/CD platform. It lets you define workflows in YAML that automatically run on events (e.g. push to main), so you can:

• Build your code
• Test against multiple Node.js versions
• Deploy to any environment (EC2, Kubernetes, Firebase, etc.)

All without leaving GitHub.

---

🛠️ Prerequisites

• An EC2 instance (Ubuntu or Amazon Linux) with public IP
• A domain pointing to your EC2's IP (optional for HTTPS)
• Your local machine with Git, Node.js & Yarn (or npm) installed
• A Vite React project already created (if not, run npm create vite@latest my-app --template react)

---

2️⃣ SSH Deploy Key Setup

This key lets GitHub Actions SSH into your EC2 without exposing your personal key.

2.1 Generate Deploy Key

ssh-keygen -t rsa -b 4096 \
  -C "github-deploy" \
  -f ~/.ssh/github_deploy_key \
  -N ""

• Private key: ~/.ssh/github_deploy_key
• Public key: ~/.ssh/github_deploy_key.pub

2.2 copy the pub to authorized_keys

cat ~/.ssh/github_deploy_key.pub | \
  ssh EC2_USER@EC2_HOST "\
    mkdir -p ~/.ssh && \
    cat >> ~/.ssh/authorized_keys && \
    chmod 700 ~/.ssh && \
    chmod 600 ~/.ssh/authorized_keys
  "
✔️ Now GitHub Actions can SSH in using your deploy key.

---

## 3️⃣ Configure GitHub Secrets

1. Go to your GitHub repo → **Settings** → **Secrets & variables** → **Actions**  
2. Click **New repository secret** and add:

| Secret Name   | Value                                      |
|--------------|---------------------------------------------|
| `EC2_HOST`   | `your.ec2.public.ip.or.domain`             |
| `EC2_USERNAME` | `ubuntu` (or `ec2-user`)                   |
| `EC2_SSH_KEY`| *(paste contents of `~/.ssh/github_deploy_key`)* |

---

## 4️⃣ Link & Push Your Project to GitHub

```bash
cd path/to/your-vite-react-app
git init
git remote add origin https://github.com/YOUR_USER/YOUR_REPO.git
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Pushing to main triggers the workflow we'll create next.

---

5️⃣ Create Your GitHub Actions Workflow

5.1 Create Workflow Directory & File

mkdir -p .github/workflows
touch .github/workflows/deploy.yml

5.2 Populate deploy.yml

name: Deploy to EC2

on:
  push:
    branches: [main] # 或者是你希望触发部署的分支

jobs:
  build-and-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'

      - name: Install dependencies
        run: yarn install

      - name: Build project
        run: yarn build

      - name: Upload via SCP
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ${{ secrets.EC2_USERNAME }}
          key: ${{ secrets.EC2_SSH_KEY }}
          source: "dist/*"
          target: "/tmp/frontend"

      - name: Deploy to Nginx directory
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ${{ secrets.EC2_USERNAME }}
          key: ${{ secrets.EC2_SSH_KEY }}
          script: |
            sudo rm -rf /usr/share/nginx/html/*
            sudo cp -r /tmp/frontend/* /usr/share/nginx/html/

5.3 Commit & Push Workflow

git add .github/workflows/deploy.yml
git commit -m "Add CI/CD workflow"
git push

Pushing now will automatically build your app and deploy it to Nginx on EC2!

---

6️⃣ Nginx & HTTPS on EC2

6.1 Install & Configure Nginx

# Ubuntu
ssh EC2_USER@EC2_HOST
sudo apt update && sudo apt install -y nginx
sudo ufw allow 'Nginx Full'

# Amazon Linux
# sudo yum install -y nginx
# sudo systemctl enable --now nginx

6.2 Install Certbot & Enable HTTPS

# Ubuntu
sudo apt install -y certbot python3-certbot-nginx

# Amazon Linux
# sudo yum install -y certbot python3-certbot-nginx

sudo certbot --nginx \
  -d yourdomain.com \
  -d www.yourdomain.com

Certbot will:

1. Obtain SSL certificates
2. Auto-modify your Nginx config
3. Reload Nginx

6.3 Auto-Renewal

echo "0 3 * * * certbot renew --quiet --deploy-hook 'systemctl reload nginx'" \
  | sudo tee -a /etc/crontab

---

✅ Done!

• Every push to main now triggers:

  1. Build of your Vite React app
  2. SCP to EC2
  3. SSH deploy to Nginx

• Your site is served over HTTPS via Let's Encrypt

---

🔗 Ready to share this on LinkedIn?
Copy, paste and hit Post! 👏

Have questions or need a GitHub template repo? Drop a comment below! ⬇️