Infrastructure & Deployment

Git-to-Production Workflow

Build Configuration

Amplify uses the amplify.yml file to define build steps, artifact locations, and caching strategies.

# amplify.yml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci                    # Install dependencies
    build:
      commands:
        - npm run build           # Next.js production build
  artifacts:
    baseDirectory: .next         # Build output directory
    files:
      - '**/*'                    # Include all build artifacts
  cache:
    paths:
      - node_modules/**/*        # Cache dependencies
      - .next/cache/**/*         # Cache Next.js build cache

Environment Configuration

Custom Domain & SSL

Automated Workflows

GitHub Actions handle continuous integration, testing, and deployment triggers to ensure code quality and seamless deployments.

# .github/workflows/ci.yml
name: CI/CD Pipeline
on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run linter
        run: npm run lint
      
      - name: Run type check
        run: npm run type-check
      
      - name: Build application
        run: npm run build
        env:
          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
      
      - name: Run E2E tests
        run: npm run cypress:run

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
      - name: Trigger Amplify Deployment
        run: |
          curl -X POST \
            -H "Authorization: token ${{ secrets.AMPLIFY_WEBHOOK_TOKEN }}" \
            "${{ secrets.AMPLIFY_WEBHOOK_URL }}"
      
      - name: Wait for deployment
        run: |
          echo "Deployment triggered. Check AWS Amplify console for status."
      
      - name: Notify Slack
        if: always()
        uses: 8398a7/action-slack@v3
        with:
          status: ${{ job.status }}
          webhook_url: ${{ secrets.SLACK_WEBHOOK }}

Quality Gates

Performance Optimization

Monitoring & Analytics

Next.js Configuration

// next.config.js - Production optimizations
const nextConfig = {
  productionBrowserSourceMaps: true,    // Enable source maps for debugging
  reactStrictMode: true,                // Strict mode for development
  output: 'standalone',                 // Optimized for serverless deployment
  
  webpack: (config, { isServer }) => {
    config.experiments = { 
      ...config.experiments, 
      topLevelAwait: true                // Enable top-level await
    }
    
    // Client-side optimizations
    if (!isServer) {
      config.resolve.fallback = {
        fs: false,
        path: false,
        os: false,
      }
    }
    
    return config
  },
  
  images: {
    unoptimized: true,                  // Handled by Amplify
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'i.imgur.com',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'axldgpriuvgigpfwqxrg.supabase.co',
        pathname: '/**',
      }
    ]
  }
}

Horizontal Scaling

Disaster Recovery