CI/CD Pipeline using GitHub Actions and AWS S3

#githubactions #aws #cicd #cloudcomputing

🚀 React + Vite App Deployment to AWS S3 using GitHub Actions

This project demonstrates how to deploy a React + Vite application to an AWS S3 bucket using a CI/CD pipeline powered by GitHub Actions. Once pushed to the main branch, the app is automatically built and deployed.

🧠 Prerequisites

Before you begin, ensure you have:

✅ AWS account with S3 access
✅ An S3 bucket created and configured for static website hosting
✅ IAM user with AmazonS3FullAccess (or custom limited policy)
✅ GitHub repository with your React + Vite code
✅ Basic knowledge of GitHub Actions

🪄 Step-by-Step Setup

1. 🛠 Create an IAM User in AWS

Go to AWS IAM Console
Create a user with Programmatic Access
Attach the following policy (minimum required):

✅ 2. Create an S3 Bucket

Go to the AWS S3 Console
Click Create bucket
Provide:
- Bucket name: your-unique-bucket-name
- Region: e.g., Asia Pacific (Mumbai) - ap-south-1
Leave other settings as default and click Create bucket

🌐 3. Enable Static Website Hosting

Go to your created bucket
Click on the Properties tab
Scroll to Static website hosting > Click Edit
Enable Static website hosting
Set:
- Index document: index.html
- Error document: index.html (or error.html optionally)
Click Save changes

🔓 4. Allow Public Access

Go to the Permissions tab
Under Block public access (bucket settings), click Edit
Uncheck all options (especially "Block all public access")
Confirm by checking the warning box
Click Save changes

👥 5. Set Object Ownership to Public

Still under the Permissions tab
Scroll to Object Ownership and click Edit
Choose:
- ACLs enabled
- Bucket owner preferred
Save the changes

🛡 6. Attach Public Read Policy Using Policy Generator

🧰 Use AWS Policy Generator:

Open: AWS Policy Generator

Fill in:

Effect: Allow
Principal: paste-your-IAM-user-ARN
Action: s3:GetObject
ARN: paste-your-S3-Bucket-ARN

7. Create access-keys for IAM user

8. Go to GitHub Actions

Open your GitHub repository.
Click on the "Actions" tab.
Click on "Set up a workflow yourself" or choose "New workflow".

9. Create a Workflow File

In the .github/workflows/ folder, create a file named: main.yml
paste below code in the code area and click commit changes.

name: Upload Website

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Install dependencies
        run: npm ci

      - name: Build Vite app
        run: npm run build

      - name: Sync dist folder to S3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --follow-symlinks --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: 'eu-north-1'
          SOURCE_DIR: 'dist'