CD-05: Frontend Deployment Pipeline

flowchart LR
    subgraph "Source"
        A[GitHub PR/Merge] --> B{Branch?}
    end

    subgraph "CI Phase (2 min)"
        B -->|Feature Branch| C1[Lint + Type Check]
        B -->|Main| C2[Lint + Type Check]
        C1 --> D1[Unit Tests — Jest]
        C2 --> D2[Unit Tests — Jest]
        D1 --> E1[Build — Preview]
        D2 --> E2[Build — Production]
    end

    subgraph "Preview Deploy"
        E1 --> F1[Upload to S3 /preview/PR-123/]
        F1 --> G1[CloudFront preview.mangaassist.com/PR-123]
        G1 --> H1[Comment preview URL on PR]
    end

    subgraph "Production Deploy"
        E2 --> F2[Upload to S3 /releases/v1.42/]
        F2 --> G2[CloudFront Selective Invalidation]
        G2 --> H2[Smoke Tests]
        H2 -->|Pass| I2[Live at mangaassist.com]
        H2 -->|Fail| J2[Rollback to Previous Release]
    end

    style I2 fill:#1B660F,color:#fff
    style J2 fill:#DD344C,color:#fff

graph LR
    subgraph "CDN Edge"
        CF[CloudFront Distribution]
        CF -->|"/chat-widget/*"| S3_WIDGET["S3: Chat Widget<br/>(React SPA)"]
        CF -->|"/api/*"| APIGW["API Gateway<br/>(WebSocket + REST)"]
        CF -->|"/*"| S3_STATIC["S3: Static Assets<br/>(images, fonts)"]
    end

    subgraph "S3 Bucket Structure"
        S3_WIDGET --> R1["/releases/v1.42/ (current)"]
        S3_WIDGET --> R2["/releases/v1.41/ (previous)"]
        S3_WIDGET --> R3["/preview/PR-123/"]
        S3_WIDGET --> R4["/preview/PR-456/"]
    end

    style CF fill:#ff9900,color:#000

// vite.config.ts — Production build with content hashing
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    mode === 'production' && visualizer({
      filename: 'dist/bundle-stats.html',
      gzipSize: true,
    }),
  ],
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        // Content-hash filenames for cache busting
        entryFileNames: 'assets/[name]-[hash].js',
        chunkFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]',
        manualChunks: {
          vendor: ['react', 'react-dom'],
          websocket: ['./src/lib/websocket.ts'],
          chat: ['./src/components/ChatWidget/index.tsx'],
        },
      },
    },
  },
}));

name: frontend-deploy
on:
  push:
    branches: [main]
    paths: ['frontend/**']
  pull_request:
    paths: ['frontend/**']

permissions:
  id-token: write
  contents: read
  pull-requests: write

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: frontend
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
          cache-dependency-path: frontend/package-lock.json

      - run: npm ci

      - name: Lint + Type Check
        run: |
          npm run lint
          npm run type-check

      - name: Unit Tests
        run: npm test -- --coverage --ci

      - name: Build
        run: npm run build
        env:
          VITE_API_URL: ${{ github.event_name == 'push' && 'https://api.mangaassist.com' || 'https://api-staging.mangaassist.com' }}
          VITE_WS_URL: ${{ github.event_name == 'push' && 'wss://ws.mangaassist.com' || 'wss://ws-staging.mangaassist.com' }}

      - name: Bundle Size Check
        run: |
          TOTAL=$(du -sb dist | cut -f1)
          echo "Bundle size: $TOTAL bytes"
          if [ "$TOTAL" -gt 524288 ]; then  # 512KB limit
            echo "::warning::Bundle size exceeds 512KB"
          fi

      - uses: actions/upload-artifact@v4
        with:
          name: frontend-build
          path: frontend/dist

  preview-deploy:
    if: github.event_name == 'pull_request'
    needs: build-and-test
    runs-on: ubuntu-latest
    steps:
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: arn:aws:iam::role/github-actions-frontend
          aws-region: us-east-1

      - uses: actions/download-artifact@v4
        with:
          name: frontend-build
          path: dist

      - name: Deploy to preview
        run: |
          aws s3 sync dist/ s3://mangaassist-frontend/preview/PR-${{ github.event.number }}/ \
            --delete --cache-control "no-cache"

      - name: Comment preview URL
        uses: marocchino/sticky-pull-request-comment@v2
        with:
          message: |
            ### Preview Deployment
            URL: https://preview.mangaassist.com/PR-${{ github.event.number }}/
            Build: ${{ github.sha }}

  production-deploy:
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    needs: build-and-test
    runs-on: ubuntu-latest
    steps:
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: arn:aws:iam::role/github-actions-frontend
          aws-region: us-east-1

      - uses: actions/download-artifact@v4
        with:
          name: frontend-build
          path: dist

      - name: Upload to S3 (versioned release)
        run: |
          VERSION=$(echo ${{ github.sha }} | cut -c1-8)
          aws s3 sync dist/ s3://mangaassist-frontend/releases/$VERSION/ \
            --cache-control "public, max-age=31536000, immutable"
          # Update pointer file to current release
          echo $VERSION > /tmp/current-version.txt
          aws s3 cp /tmp/current-version.txt s3://mangaassist-frontend/current-version.txt \
            --cache-control "no-cache, no-store"

      - name: CloudFront Selective Invalidation
        run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DIST_ID }} \
            --paths "/index.html" "/current-version.txt" "/chat-widget/*"

      - name: Smoke Tests
        run: |
          # Wait for invalidation propagation
          sleep 15
          # Check chat widget loads
          STATUS=$(curl -s -o /dev/null -w "%{http_code}" https://mangaassist.com/chat-widget/)
          if [ "$STATUS" != "200" ]; then
            echo "Smoke test failed: HTTP $STATUS"
            exit 1
          fi

      - name: Lighthouse CI
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: 'https://mangaassist.com/'
          budgetPath: frontend/lighthouse-budget.json

flowchart TD
    subgraph "Cache TTLs"
        A["index.html<br/>Cache-Control: no-cache<br/>(always fresh)"]
        B["assets/*-[hash].js<br/>Cache-Control: immutable, max-age=1yr<br/>(forever cached)"]
        C["assets/*-[hash].css<br/>Cache-Control: immutable, max-age=1yr<br/>(forever cached)"]
        D["images/*<br/>Cache-Control: max-age=86400<br/>(1 day)"]
    end

    E[User Browser] --> F{Cache Hit?}
    F -->|"index.html"| G[Always re-validate with origin]
    F -->|"hashed assets"| H[Serve from edge cache — never re-validate]
    F -->|"images"| I[Serve from cache, re-validate after 1 day]

# Rollback by re-pointing to previous release
import boto3

def rollback_frontend(distribution_id: str, s3_bucket: str):
    s3 = boto3.client('s3')
    cf = boto3.client('cloudfront')

    # Read current version
    current = s3.get_object(
        Bucket=s3_bucket, Key='current-version.txt'
    )['Body'].read().decode().strip()

    # List all release versions, find the one before current
    response = s3.list_objects_v2(
        Bucket=s3_bucket, Prefix='releases/', Delimiter='/'
    )
    versions = sorted([
        p['Prefix'].split('/')[1]
        for p in response['CommonPrefixes']
    ])

    current_idx = versions.index(current)
    if current_idx == 0:
        raise ValueError("No previous version to rollback to")

    previous = versions[current_idx - 1]

    # Update pointer to previous version
    s3.put_object(
        Bucket=s3_bucket,
        Key='current-version.txt',
        Body=previous.encode(),
        CacheControl='no-cache, no-store',
    )

    # Invalidate CloudFront to pick up new pointer
    cf.create_invalidation(
        DistributionId=distribution_id,
        InvalidationBatch={
            'Paths': {'Quantity': 2, 'Items': ['/index.html', '/current-version.txt']},
            'CallerReference': f"rollback-{previous}",
        },
    )
    return previous

graph TD
    subgraph "Frontend Developer"
        FE1["Want instant deployment visibility"]
        FE2["Hate waiting for cache invalidation"]
        FE3["Preview URLs for every PR"]
    end

    subgraph "Architect"
        AR1["Cache hit ratio must be > 95%"]
        AR2["Global edge caching = low latency"]
        AR3["Aggressive caching saves origin costs"]
    end

    subgraph "Product Manager"
        PM1["Hotfix must reach customers in < 5 min"]
        PM2["Feature flags preferred over delayed deploys"]
        PM3["A/B test new UI without deploy"]
    end

    FE2 ---|"Tension"| AR2
    PM1 ---|"Tension"| AR1
    FE3 ---|"Costs"| PM3

Monthly cost with per-PR previews:
- S3 storage: ~20 active PRs × ~500KB × $0.023/GB = ~$0.001/month
- CloudFront: Preview subdomain already on same distribution = $0
- Total: < $1/month

Value delivered:
- Designers review directly (saves ~30 min/PR in communication)
- PMs test features before merge (catches UX issues earlier)
- No "staging is busy" bottleneck
- ROI: ~$1/month for ~20 hours/month saved in review cycles