Next.js 배포와 최적화 전략: Vercel vs AWS 비교 분석과 성능 튜닝 실전

// 잘못된 배포 전략 (문제점이 많음)
// package.json
{
  "scripts": {
    "build": "next build",
    "start": "next start"
  }
}

// ❌ 환경별 최적화 없음
// ❌ 빌드 캐싱 미활용
// ❌ 성능 모니터링 부재

// vercel.json - 최적화된 Vercel 설정
{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "functions": {
    "app/api/**/*.js": {
      "maxDuration": 30
    }
  },
  "regions": ["icn1", "hnd1"], // 아시아 최적화
  "framework": "nextjs",
  "crons": [
    {
      "path": "/api/cleanup",
      "schedule": "0 0 * * *"
    }
  ]
}

// next.config.js - Vercel 최적화 설정
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Vercel 환경 최적화
  experimental: {
    optimizePackageImports: ['lodash', '@mui/material'],
    serverComponentsExternalPackages: ['sharp']
  },

  // 이미지 최적화 (Vercel 내장 기능 활용)
  images: {
    formats: ['image/webp', 'image/avif'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384]
  },

  // Edge Runtime 활용
  runtime: 'edge',

  // 번들 분석기 통합
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        fs: false,
        net: false,
        tls: false,
      };
    }
    return config;
  }
};

module.exports = nextConfig;

// api/edge/route.ts - Edge Function 최적화
export const runtime = 'edge';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const userId = searchParams.get('userId');

  // ✅ Edge에서 빠른 응답
  const userCache = await caches.open('user-data');
  const cachedResponse = await userCache.match(request);

  if (cachedResponse) {
    return cachedResponse;
  }

  // 데이터 페칭과 캐싱
  const userData = await fetch(`${process.env.API_URL}/users/${userId}`);
  const response = new Response(JSON.stringify(userData), {
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 's-maxage=300' // 5분 캐싱
    }
  });

  await userCache.put(request, response.clone());
  return response;
}

# .github/workflows/deploy.yml
name: Deploy to Vercel

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'

      # 환경별 빌드 최적화
      - name: Install dependencies
        run: npm ci --prefer-offline --no-audit

      - name: Run tests
        run: npm run test:ci

      - name: Build project
        run: npm run build
        env:
          NODE_ENV: production
          NEXT_TELEMETRY_DISABLED: 1

      # Vercel 배포
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: '--prod'
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}

// lib/analytics.ts - Vercel Analytics 연동
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export function AnalyticsProvider({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <Analytics />
      <SpeedInsights />
    </>
  );
}

// 사용자 정의 이벤트 추적
export const trackEvent = (name: string, properties?: Record<string, any>) => {
  if (typeof window !== 'undefined' && window.va) {
    window.va('track', name, properties);
  }
};

// 성능 메트릭 수집
export const trackPerformance = () => {
  if (typeof window !== 'undefined') {
    const paintEntries = performance.getEntriesByType('paint');
    const navigationEntry = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;

    trackEvent('performance', {
      fcp: paintEntries.find(entry => entry.name === 'first-contentful-paint')?.startTime,
      lcp: navigationEntry.loadEventEnd - navigationEntry.fetchStart,
      cls: 0 // 실제로는 web-vitals 라이브러리 사용 권장
    });
  }
};

// amplify.yml - AWS Amplify 설정
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --cache .npm --prefer-offline --no-audit
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - .npm/**/*
      - .next/cache/**/*
      - node_modules/**/*

# 환경별 설정
environments:
  main:
    variables:
      NODE_ENV: production
      NEXT_TELEMETRY_DISABLED: 1
    buildCommand: npm run build:prod
  develop:
    variables:
      NODE_ENV: development
    buildCommand: npm run build:dev

// next.config.js - OpenNext 최적화
const { withOpenNext } = require('@opennextjs/aws');

/** @type {import('next').NextConfig} */
const nextConfig = {
  // AWS Lambda 최적화
  experimental: {
    serverComponentsExternalPackages: ['sharp', 'prisma']
  },

  // 이미지 최적화 (S3 + CloudFront)
  images: {
    domains: ['your-bucket.s3.amazonaws.com'],
    loader: 'custom',
    loaderFile: './lib/imageLoader.js'
  },

  // API Routes 최적화
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://your-api.execute-api.ap-northeast-2.amazonaws.com/prod/:path*'
      }
    ];
  }
};

module.exports = withOpenNext(nextConfig);

// infrastructure/stack.ts - AWS CDK 스택
import * as cdk from 'aws-cdk-lib';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
import * as lambda from 'aws-cdk-lib/aws-lambda';

export class NextJsStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // S3 버킷 (정적 자산)
    const assetsBucket = new s3.Bucket(this, 'NextJsAssets', {
      bucketName: 'nextjs-assets-bucket',
      publicReadAccess: true,
      websiteIndexDocument: 'index.html',
      websiteErrorDocument: 'error.html',
      cors: [{
        allowedMethods: [s3.HttpMethods.GET],
        allowedOrigins: ['*'],
        allowedHeaders: ['*']
      }]
    });

    // Lambda Function (SSR)
    const ssrFunction = new lambda.Function(this, 'NextJsSSR', {
      runtime: lambda.Runtime.NODEJS_18_X,
      handler: 'index.handler',
      code: lambda.Code.fromAsset('dist'),
      memorySize: 1024,
      timeout: cdk.Duration.seconds(30),
      environment: {
        NODE_ENV: 'production'
      }
    });

    // CloudFront 배포
    const distribution = new cloudfront.Distribution(this, 'NextJsDistribution', {
      defaultBehavior: {
        origin: new origins.S3Origin(assetsBucket),
        viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
        cachePolicy: cloudfront.CachePolicy.CACHING_OPTIMIZED,
        compress: true
      },
      additionalBehaviors: {
        '/api/*': {
          origin: new origins.HttpOrigin('your-api-gateway-url'),
          viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
          cachePolicy: cloudfront.CachePolicy.CACHING_DISABLED
        }
      }
    });
  }
}

// lib/monitoring.ts - 성능 모니터링 구현
interface PerformanceMetrics {
  platform: 'vercel' | 'aws-amplify' | 'aws-custom';
  metrics: {
    responseTime: number;
    throughput: number;
    errorRate: number;
    memoryUsage: number;
  };
}

export const monitorPerformance = async (): Promise<PerformanceMetrics> => {
  const startTime = Date.now();

  try {
    // API 호출 성능 측정
    const response = await fetch('/api/health');
    const responseTime = Date.now() - startTime;

    // 메모리 사용량 측정 (서버 환경)
    const memoryUsage = process.memoryUsage().heapUsed / 1024 / 1024; // MB

    return {
      platform: process.env.DEPLOYMENT_PLATFORM as any,
      metrics: {
        responseTime,
        throughput: 1000 / responseTime, // requests per second
        errorRate: response.ok ? 0 : 1,
        memoryUsage
      }
    };
  } catch (error) {
    return {
      platform: process.env.DEPLOYMENT_PLATFORM as any,
      metrics: {
        responseTime: Date.now() - startTime,
        throughput: 0,
        errorRate: 1,
        memoryUsage: 0
      }
    };
  }
};

// 실시간 성능 대시보드
export const PerformanceDashboard = ({ metrics }: { metrics: PerformanceMetrics[] }) => {
  const averageResponseTime = metrics.reduce((sum, m) => sum + m.metrics.responseTime, 0) / metrics.length;
  const errorRate = metrics.filter(m => m.metrics.errorRate > 0).length / metrics.length * 100;

  return (
    <div className="performance-dashboard">
      <div className="metric-card">
        <h3>평균 응답시간</h3>
        <span className={averageResponseTime < 200 ? 'good' : 'warning'}>
          {averageResponseTime.toFixed(0)}ms
        </span>
      </div>
      <div className="metric-card">
        <h3>에러율</h3>
        <span className={errorRate < 1 ? 'good' : 'error'}>
          {errorRate.toFixed(2)}%
        </span>
      </div>
    </div>
  );
};

// lib/user-metrics.ts - 사용자 경험 측정
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

export const trackWebVitals = () => {
  getCLS(console.log); // Cumulative Layout Shift
  getFID(console.log); // First Input Delay
  getFCP(console.log); // First Contentful Paint
  getLCP(console.log); // Largest Contentful Paint
  getTTFB(console.log); // Time to First Byte
};

// 플랫폼별 Core Web Vitals 비교
export const platformVitals = {
  vercel: {
    fcp: 1.2, // seconds
    lcp: 2.1,
    fid: 35,   // milliseconds
    cls: 0.08,
    ttfb: 180  // milliseconds
  },
  awsAmplify: {
    fcp: 1.8,
    lcp: 3.2,
    fid: 58,
    cls: 0.12,
    ttfb: 280
  },
  awsCustom: {
    fcp: 1.1,
    lcp: 1.9,
    fid: 28,
    cls: 0.06,
    ttfb: 95
  }
};

// 성능 점수 계산
export const calculatePerformanceScore = (vitals: typeof platformVitals.vercel): number => {
  const fcpScore = vitals.fcp <= 1.8 ? 100 : Math.max(0, 100 - (vitals.fcp - 1.8) * 50);
  const lcpScore = vitals.lcp <= 2.5 ? 100 : Math.max(0, 100 - (vitals.lcp - 2.5) * 40);
  const fidScore = vitals.fid <= 100 ? 100 : Math.max(0, 100 - (vitals.fid - 100) * 0.5);
  const clsScore = vitals.cls <= 0.1 ? 100 : Math.max(0, 100 - (vitals.cls - 0.1) * 500);

  return Math.round((fcpScore + lcpScore + fidScore + clsScore) / 4);
};

// utils/cost-calculator.ts - 비용 계산기
interface CostCalculation {
  monthly: {
    hosting: number;
    bandwidth: number;
    functions: number;
    storage: number;
    total: number;
  };
}

export const calculateVercelCost = (
  pageViews: number,
  functionInvocations: number,
  bandwidthGB: number
): CostCalculation => {
  const proTier = pageViews > 100000;

  return {
    monthly: {
      hosting: proTier ? 20 : 0, // Pro plan $20/month
      bandwidth: Math.max(0, (bandwidthGB - 100) * 0.40), // $0.40/GB after 100GB
      functions: Math.max(0, (functionInvocations - 1000000) * 0.0000004), // $0.40/million after 1M
      storage: 0, // Included
      total: 0
    }
  };
};

export const calculateAWSCost = (
  pageViews: number,
  functionInvocations: number,
  bandwidthGB: number,
  storageGB: number = 10
): CostCalculation => {
  const lambdaRequests = functionInvocations;
  const s3Requests = pageViews * 3; // 평균 3개 파일 요청

  return {
    monthly: {
      hosting: 0,
      bandwidth: bandwidthGB * 0.09, // CloudFront $0.09/GB (Asia)
      functions: (lambdaRequests / 1000000) * 0.20, // Lambda $0.20/million requests
      storage: storageGB * 0.023 + (s3Requests / 1000) * 0.0004, // S3 $0.023/GB + $0.40/million requests
      total: 0
    }
  };
};

// 실제 사용 시뮬레이션
const trafficScenarios = [
  { name: '스타트업', pageViews: 10000, functionInvocations: 50000, bandwidthGB: 5 },
  { name: '중소기업', pageViews: 100000, functionInvocations: 500000, bandwidthGB: 30 },
  { name: '대기업', pageViews: 1000000, functionInvocations: 5000000, bandwidthGB: 200 }
];

trafficScenarios.forEach(scenario => {
  const vercelCost = calculateVercelCost(scenario.pageViews, scenario.functionInvocations, scenario.bandwidthGB);
  const awsCost = calculateAWSCost(scenario.pageViews, scenario.functionInvocations, scenario.bandwidthGB);

  console.log(`${scenario.name}: Vercel $${vercelCost.monthly.total}, AWS $${awsCost.monthly.total}`);
});

// lib/deployment-strategy.ts - 하이브리드 배포 전략
export const deploymentStrategy = {
  // 개발/스테이징: Vercel (빠른 피드백)
  development: {
    platform: 'vercel',
    branch: 'develop',
    domain: 'app-dev.vercel.app',
    features: ['preview-deployments', 'real-time-feedback']
  },

  // 프로덕션: AWS (비용 효율성)
  production: {
    platform: 'aws',
    branch: 'main',
    domain: 'app.example.com',
    features: ['auto-scaling', 'cost-optimization', 'enterprise-security']
  },

  // A/B 테스트: 트래픽 분할
  experiment: {
    vercelTraffic: 20, // 20%는 Vercel
    awsTraffic: 80,    // 80%는 AWS
    criteria: 'geographic-location' // 지역별 분할
  }
};

// 배포 환경 자동 선택
export const selectDeploymentPlatform = (branch: string, trafficLevel: 'low' | 'medium' | 'high') => {
  if (branch !== 'main') {
    return 'vercel'; // 개발 브랜치는 Vercel
  }

  return trafficLevel === 'high' ? 'aws' : 'vercel';
};

// next.config.js - 고급 캐싱 설정
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 빌드 캐시 최적화
  experimental: {
    incrementalCacheHandlerPath: require.resolve('./cache-handler.js'),
    isrMemoryCacheSize: 0, // Disable in-memory cache in favor of custom handler
  },

  // Webpack 캐싱
  webpack: (config, { buildId, dev, isServer, defaultLoaders, nextRuntime }) => {
    if (!dev) {
      config.cache = {
        type: 'filesystem',
        buildDependencies: {
          config: [__filename]
        },
        cacheDirectory: '.next/cache/webpack'
      };
    }

    // 번들 스플리팅 최적화
    config.optimization.splitChunks = {
      ...config.optimization.splitChunks,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: 10
        },
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true
        }
      }
    };

    return config;
  }
};

module.exports = nextConfig;

// cache-handler.js - Redis 기반 캐시 핸들러
const Redis = require('ioredis');

class CustomCacheHandler {
  constructor(options) {
    this.redis = new Redis(process.env.REDIS_URL);
    this.debug = options?.debug || false;
  }

  async get(key) {
    try {
      const cached = await this.redis.get(key);
      if (cached) {
        return JSON.parse(cached);
      }
      return null;
    } catch (error) {
      console.error('Cache get error:', error);
      return null;
    }
  }

  async set(key, data, ttl = 3600) {
    try {
      await this.redis.setex(key, ttl, JSON.stringify(data));
    } catch (error) {
      console.error('Cache set error:', error);
    }
  }

  async revalidateTag(tag) {
    try {
      const keys = await this.redis.keys(`*:${tag}:*`);
      if (keys.length > 0) {
        await this.redis.del(...keys);
      }
    } catch (error) {
      console.error('Cache revalidate error:', error);
    }
  }
}

module.exports = CustomCacheHandler;

# .github/workflows/optimized-deploy.yml
name: Optimized Deployment

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

env:
  NODE_VERSION: '18'
  CACHE_VERSION: v1

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    # 의존성 캐싱으로 빌드 시간 단축
    strategy:
      matrix:
        node-version: [18]

    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          # 전체 git 히스토리 대신 shallow clone
          fetch-depth: 1

      # Node.js 캐싱 최적화
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'npm'
          cache-dependency-path: |
            package-lock.json
            packages/*/package-lock.json

      # 의존성 설치 최적화
      - name: Cache node modules
        uses: actions/cache@v3
        id: npm-cache
        with:
          path: |
            ~/.npm
            node_modules
            .next/cache
          key: ${{ runner.os }}-node-${{ env.CACHE_VERSION }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-${{ env.CACHE_VERSION }}-

      - name: Install dependencies
        if: steps.npm-cache.outputs.cache-hit != 'true'
        run: npm ci --prefer-offline --no-audit --progress=false

      # 병렬 작업으로 시간 단축
      - name: Run linting and tests in parallel
        run: |
          npm run lint &
          npm run test:ci &
          wait

      # 빌드 최적화
      - name: Build application
        run: |
          export NODE_ENV=production
          export NEXT_TELEMETRY_DISABLED=1
          npm run build
        env:
          # 빌드 메모리 최적화
          NODE_OPTIONS: '--max-old-space-size=4096'

      # 플랫폼별 배포
      - name: Deploy to Vercel (develop branch)
        if: github.ref == 'refs/heads/develop'
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: '--prebuilt'
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}

      - name: Deploy to AWS (main branch)
        if: github.ref == 'refs/heads/main'
        run: |
          npm run deploy:aws
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ap-northeast-2

// lib/performance-monitoring.ts - 성능 자동 모니터링
export class PerformanceMonitor {
  private metrics: Map<string, number[]> = new Map();
  private alertThresholds = {
    responseTime: 1000, // 1초
    errorRate: 0.05,    // 5%
    memoryUsage: 512    // 512MB
  };

  async collectMetrics() {
    const metrics = {
      timestamp: Date.now(),
      responseTime: await this.measureResponseTime(),
      memoryUsage: this.getMemoryUsage(),
      errorRate: await this.getErrorRate(),
      activeUsers: await this.getActiveUsers()
    };

    // 메트릭 저장
    Object.entries(metrics).forEach(([key, value]) => {
      if (!this.metrics.has(key)) {
        this.metrics.set(key, []);
      }
      this.metrics.get(key)!.push(value as number);
    });

    // 임계값 확인 및 알림
    await this.checkAlerts(metrics);

    return metrics;
  }

  private async measureResponseTime(): Promise<number> {
    const start = Date.now();
    try {
      await fetch('/api/health');
      return Date.now() - start;
    } catch {
      return 999999; // 오류 시 매우 큰 값
    }
  }

  private getMemoryUsage(): number {
    if (typeof process !== 'undefined') {
      return process.memoryUsage().heapUsed / 1024 / 1024; // MB
    }
    return 0;
  }

  private async checkAlerts(metrics: any) {
    const alerts = [];

    if (metrics.responseTime > this.alertThresholds.responseTime) {
      alerts.push({
        type: 'performance',
        message: `응답 시간이 ${metrics.responseTime}ms로 임계값을 초과했습니다.`,
        severity: 'warning'
      });
    }

    if (metrics.errorRate > this.alertThresholds.errorRate) {
      alerts.push({
        type: 'reliability',
        message: `에러율이 ${(metrics.errorRate * 100).toFixed(2)}%로 임계값을 초과했습니다.`,
        severity: 'critical'
      });
    }

    // Slack/이메일 알림 발송
    if (alerts.length > 0) {
      await this.sendAlerts(alerts);
    }
  }

  private async sendAlerts(alerts: any[]) {
    // Slack Webhook으로 알림 발송
    if (process.env.SLACK_WEBHOOK_URL) {
      await fetch(process.env.SLACK_WEBHOOK_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          text: `🚨 Next.js 애플리케이션 성능 알림`,
          attachments: alerts.map(alert => ({
            color: alert.severity === 'critical' ? 'danger' : 'warning',
            text: alert.message
          }))
        })
      });
    }
  }

  // 성능 대시보드용 데이터 제공
  getPerformanceReport() {
    const report = {};

    this.metrics.forEach((values, key) => {
      if (values.length > 0) {
        report[key] = {
          current: values[values.length - 1],
          average: values.reduce((a, b) => a + b, 0) / values.length,
          min: Math.min(...values),
          max: Math.max(...values)
        };
      }
    });

    return report;
  }
}

// 사용 예시
const monitor = new PerformanceMonitor();
setInterval(() => monitor.collectMetrics(), 60000); // 1분마다 수집