A complete DevOps demonstration showcasing automated deployment of a React.js application using AWS services, Terraform Infrastructure as Code, and GitHub Actions CI/CD pipeline.

• 🎯 Project Overview
• 🏗️ Architecture
• 🛠️ Technologies Used
• ⚡ Quick Start
• 🔧 Local Development
• ☁️ AWS Deployment
• 🔄 CI/CD Pipeline
• 📁 Project Structure
• 🔒 Security Features
• 💰 Cost Optimization
• 📚 Learning Resources
• 🤝 Contributing

This project demonstrates production-grade frontend deployment using modern DevOps practices. It's designed to showcase skills in:

• Infrastructure as Code with Terraform
• Automated CI/CD with GitHub Actions
• AWS Cloud Services integration
• Security best practices
• Cost-effective architecture

✅ Fully Automated Deployment - Push to main branch triggers complete deployment
✅ Secure Architecture - Private S3 bucket with CloudFront OAI
✅ Global Content Delivery - CloudFront CDN for worldwide performance
✅ Infrastructure as Code - Reproducible infrastructure with Terraform
✅ Zero-Downtime Deployments - Automated cache invalidation
✅ Cost Optimized - Serverless architecture with minimal costs

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   Developer     │───▶│  GitHub Actions  │───▶│   AWS Cloud     │
│   (git push)    │    │     CI/CD        │    │                 │
└─────────────────┘    └──────────────────┘    └─────────────────┘
                                ▼
                       ┌──────────────────┐
                       │   React Build    │
                       │   (npm run build)│
                       └──────────────────┘
                                ▼
                       ┌──────────────────┐
                       │   S3 Bucket      │
                       │   (Static Files) │
                       └──────────────────┘
                                ▼
                       ┌──────────────────┐
                       │   CloudFront     │
                       │   (Global CDN)   │
                       └──────────────────┘
                                ▼
                       ┌──────────────────┐
                       │   End Users      │
                       │   (Worldwide)    │
                       └──────────────────┘

• React 18 - Modern UI library
• Vite - Fast build tool
• TypeScript - Type safety
• Tailwind CSS - Utility-first styling

• Terraform - Infrastructure as Code
• AWS CLI - Command-line interface
• GitHub Actions - CI/CD automation

• Git - Version control
• GitHub - Repository hosting
• OIDC - Secure authentication

• AWS Account with appropriate permissions
• GitHub Account
• Node.js 18+ installed
• Git installed
• Terraform installed (1.0+)
• AWS CLI configured

1. Clone the repository

   git clone https://github.com/vinsin21/cloud-quiz-craft.git
   cd cloud-quiz-craft

2. Configure AWS credentials

   aws configure
   # Enter your AWS Access Key ID, Secret Access Key, and region

3. Update Terraform variables

   cd terraform

   Edit terraform.tfvars:

   aws_region         = "ap-south-1"  # Your preferred region
   bucket_name_prefix = "your-project-bucket-"
   github_username    = "your-github-username"
   github_repository  = "your-repo-name"

4. Deploy infrastructure

   terraform init
   terraform plan
   terraform apply

5. Save outputs for GitHub Actions

   terraform output

# Install dependencies
npm install

# Start development server
npm run dev

# Access application
open http://localhost:5173

# Create production build
npm run build

# Preview production build
npm run preview

# Run tests
npm test

# Run linting
npm run lint

# Type checking
npm run type-check

# Build the application
npm run build

# Deploy to S3
aws s3 sync dist/ s3://your-bucket-name --delete

# Invalidate CloudFront cache
aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"

resource "aws_s3_bucket" "cloudquiz_bucket" {
  bucket_prefix = var.bucket_name_prefix
  force_destroy = true
  
  # Security configurations
  # - Block public access
  # - Server-side encryption
  # - Versioning disabled for cost optimization
}

resource "aws_cloudfront_distribution" "s3_cloudquiz_distribution" {
  # Global edge locations
  # HTTPS redirect enforcement
  # Optimized caching for static assets
  # Origin Access Identity for security
}

# GitHub OIDC Provider for secure authentication
# IAM role for GitHub Actions
# Minimal required permissions (principle of least privilege)

The CI/CD pipeline automatically triggers on push to main branch:

name: Deploy to AWS S3

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read
    
    steps:
    - name: Checkout code
    - name: Setup Node.js
    - name: Install dependencies
    - name: Build React app
    - name: Configure AWS credentials (OIDC)
    - name: Deploy to S3
    - name: Invalidate CloudFront cache

Add these secrets in your GitHub repository settings:

✅ Automated Testing - Runs linting and type checking
✅ Secure Authentication - Uses OIDC instead of AWS keys
✅ Atomic Deployments - Complete deployment or rollback
✅ Cache Invalidation - Immediate content updates
✅ Build Optimization - Minified and optimized assets

cloud-quiz-craft/
├── 📁 src/                          # React application source
│   ├── 📁 components/               # Reusable UI components
│   ├── 📁 pages/                    # Page components
│   ├── 📁 hooks/                    # Custom React hooks
│   ├── 📁 lib/                      # Utility functions
│   └── 📁 data/                     # Static data files
├── 📁 public/                       # Static assets
├── 📁 terraform/                    # Infrastructure as Code
│   ├── 📄 main.tf                   # Main Terraform configuration
│   ├── 📄 variables.tf              # Input variables
│   ├── 📄 output.tf                 # Output values
│   ├── 📄 provider.tf               # Provider configuration
│   └── 📄 terraform.tfvars          # Variable values
├── 📁 .github/workflows/            # CI/CD pipeline
│   └── 📄 deploy.yml                # GitHub Actions workflow
├── 📄 package.json                  # Node.js dependencies
├── 📄 vite.config.ts                # Vite configuration
├── 📄 tailwind.config.ts            # Tailwind CSS configuration
├── 📄 .gitignore                    # Git ignore rules
└── 📄 README.md                     # This file

• Private S3 Bucket - No public access allowed
• Origin Access Identity - Only CloudFront can access S3
• HTTPS Enforcement - All traffic redirected to HTTPS
• IAM Best Practices - Principle of least privilege
• Server-Side Encryption - All files encrypted at rest

• OIDC Authentication - No long-lived AWS credentials stored
• Repository-specific Access - IAM role limited to specific repo
• Secure Secrets Management - GitHub repository secrets
• Audit Trail - All deployments logged and traceable

✅ S3 Standard Storage - Cost-effective for frequently accessed files
✅ CloudFront Free Tier - 1TB monthly transfer included
✅ No EC2 Instances - Serverless architecture
✅ Efficient Caching - Reduced origin requests
✅ Automated Cleanup - Old build artifacts removed

1. AWS Fundamentals

   • AWS Cloud Practitioner
   • AWS Well-Architected Framework

2. Terraform Learning

   • Terraform Getting Started
   • Terraform AWS Provider

3. GitHub Actions

   • GitHub Actions Documentation
   • Workflow Syntax

• AWS CDK vs Terraform comparison
• Multi-environment deployment strategies
• Blue-green deployments with CloudFront
• Monitoring and alerting with CloudWatch
• Security scanning in CI/CD pipelines

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• Add monitoring and alerting
• Implement blue-green deployments
• Add automated testing in CI/CD
• Create Kubernetes deployment option
• Add custom domain setup guide

Vinsin Patel - AWS DevOps Engineer
📧 Email: [email protected]
💼 LinkedIn: linkedin.com/in/vinsin21
🐙 GitHub: @vinsin21

This project is licensed under the MIT License - see the LICENSE file for details.

⭐ If this project helped you learn AWS DevOps, please give it a star! ⭐