# Vercel CLI のインストール
npm install -g vercel
 
# プロジェクトの初期化とリンク
vercel link
 
# 開発サーバー（Vercel の環境変数を利用可能）
vercel dev
 
# プレビューデプロイ（ステージング）
vercel
 
# 本番デプロイ
vercel --prod
 
# 環境変数の設定
vercel env add NEXT_PUBLIC_API_URL
vercel env add DATABASE_URL --sensitive
 
# 環境変数の一覧表示
vercel env ls
 
# 環境変数の削除
vercel env rm NEXT_PUBLIC_API_URL

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "nextjs",
  "buildCommand": "pnpm build",
  "installCommand": "pnpm install --frozen-lockfile",
  "outputDirectory": ".next",
  "regions": ["hnd1", "sfo1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,POST,PUT,DELETE,OPTIONS" },
        { "key": "Access-Control-Allow-Headers", "value": "Content-Type, Authorization" },
        { "key": "Cache-Control", "value": "no-store, max-age=0" }
      ]
    },
    {
      "source": "/(.*)\\.(?:js|css|woff2?|png|jpg|svg|ico)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:;"
        },
        { "key": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" }
      ]
    }
  ],
  "redirects": [
    { "source": "/old-page", "destination": "/new-page", "permanent": true },
    { "source": "/blog/:slug", "destination": "/posts/:slug", "permanent": true }
  ],
  "rewrites": [
    { "source": "/api/:path*", "destination": "https://api.example.com/:path*" }
  ],
  "functions": {
    "api/**/*.ts": {
      "memory": 1024,
      "maxDuration": 30
    },
    "api/heavy-task.ts": {
      "memory": 3009,
      "maxDuration": 60
    }
  },
  "crons": [
    {
      "path": "/api/cron/cleanup",
      "schedule": "0 0 * * *"
    },
    {
      "path": "/api/cron/sync",
      "schedule": "*/15 * * * *"
    }
  ]
}

// app/api/edge-example/route.ts
import { NextRequest, NextResponse } from 'next/server';
 
export const runtime = 'edge';
 
// エッジで実行される API Route
export async function GET(request: NextRequest) {
  // リクエストのジオロケーション情報を取得
  const { geo, ip } = request;
  const country = geo?.country || 'Unknown';
  const city = geo?.city || 'Unknown';
  const region = geo?.region || 'Unknown';
 
  // ユーザーの地域に基づくコンテンツのパーソナライズ
  const greeting = getLocalizedGreeting(country);
 
  return NextResponse.json({
    greeting,
    location: { country, city, region },
    ip,
    timestamp: new Date().toISOString(),
    edge: true,
  }, {
    headers: {
      'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=300',
    },
  });
}
 
function getLocalizedGreeting(country: string): string {
  const greetings: Record<string, string> = {
    JP: 'こんにちは！',
    US: 'Hello!',
    KR: '안녕하세요!',
    CN: '你好！',
    FR: 'Bonjour!',
    DE: 'Hallo!',
    ES: '¡Hola!',
  };
  return greetings[country] || 'Hello!';
}

// middleware.ts（Vercel Edge Middleware）
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
export function middleware(request: NextRequest) {
  const { pathname, searchParams } = request.nextUrl;
  const country = request.geo?.country || 'US';
 
  // 1. 地域ベースのリダイレクト
  if (pathname === '/' && country === 'JP') {
    return NextResponse.redirect(new URL('/ja', request.url));
  }
 
  // 2. A/Bテスト（Cookie ベース）
  const abTestCookie = request.cookies.get('ab-test-variant');
  if (!abTestCookie && pathname.startsWith('/landing')) {
    const variant = Math.random() < 0.5 ? 'a' : 'b';
    const response = NextResponse.rewrite(
      new URL(`/landing/${variant}`, request.url)
    );
    response.cookies.set('ab-test-variant', variant, {
      maxAge: 60 * 60 * 24 * 7, // 1週間
      httpOnly: true,
    });
    return response;
  }
 
  // 3. Bot検出とブロック
  const userAgent = request.headers.get('user-agent') || '';
  const isBot = /bot|crawl|spider|scrape/i.test(userAgent);
  if (isBot && pathname.startsWith('/api/')) {
    return new NextResponse('Forbidden', { status: 403 });
  }
 
  // 4. レート制限ヘッダーの付与
  const response = NextResponse.next();
  response.headers.set('X-Request-Country', country);
  response.headers.set('X-Request-Time', Date.now().toString());
 
  return response;
}
 
export const config = {
  matcher: ['/', '/landing/:path*', '/api/:path*'],
};

// next.config.ts - Vercel 向け最適化設定
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  // standalone 出力（Docker デプロイ時に有用）
  // output: 'standalone',
 
  // 画像最適化
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
    formats: ['image/avif', 'image/webp'],
    minimumCacheTTL: 60 * 60 * 24 * 30, // 30日
  },
 
  // ヘッダー設定
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-DNS-Prefetch-Control',
            value: 'on',
          },
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=63072000; includeSubDomains; preload',
          },
        ],
      },
    ];
  },
 
  // 実験的機能
  experimental: {
    // PPR (Partial Prerendering) の有効化
    ppr: true,
    // Server Actions の最適化
    serverActions: {
      bodySizeLimit: '2mb',
    },
  },
 
  // ログ設定（Vercel でのデバッグ用）
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};
 
export default nextConfig;

# Wrangler CLI のインストール
npm install -g wrangler
 
# 認証
wrangler login
 
# 新規プロジェクトの作成（フレームワーク選択）
npm create cloudflare@latest my-app
 
# 既存プロジェクトの Pages デプロイ
wrangler pages deploy ./dist
 
# Pages プロジェクトの作成（GitHub 連携）
wrangler pages project create my-project
 
# ローカル開発サーバー
wrangler pages dev ./dist --port 3000
 
# 環境変数の設定
wrangler pages secret put API_KEY

// src/worker.ts - 基本的な Worker
export interface Env {
  MY_KV: KVNamespace;
  MY_DB: D1Database;
  MY_BUCKET: R2Bucket;
  API_KEY: string;
}
 
export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);
    const path = url.pathname;
 
    // ルーティング
    switch (true) {
      case path === '/api/health':
        return new Response(JSON.stringify({ status: 'ok' }), {
          headers: { 'Content-Type': 'application/json' },
        });
 
      case path.startsWith('/api/users'):
        return handleUsers(request, env, ctx);
 
      case path.startsWith('/api/files'):
        return handleFiles(request, env, ctx);
 
      default:
        return new Response('Not Found', { status: 404 });
    }
  },
 
  // スケジュールされたタスク（Cron Triggers）
  async scheduled(
    event: ScheduledEvent,
    env: Env,
    ctx: ExecutionContext
  ): Promise<void> {
    ctx.waitUntil(cleanupExpiredData(env));
  },
 
  // キューの処理
  async queue(
    batch: MessageBatch<unknown>,
    env: Env,
    ctx: ExecutionContext
  ): Promise<void> {
    for (const message of batch.messages) {
      await processMessage(message, env);
      message.ack();
    }
  },
};
 
// ユーザー API のハンドラ
async function handleUsers(
  request: Request,
  env: Env,
  ctx: ExecutionContext
): Promise<Response> {
  const { method } = request;
 
  if (method === 'GET') {
    // D1 データベースからユーザー一覧を取得
    const { results } = await env.MY_DB.prepare(
      'SELECT id, name, email, created_at FROM users ORDER BY created_at DESC LIMIT 50'
    ).all();
 
    return Response.json({ users: results });
  }
 
  if (method === 'POST') {
    const body = await request.json() as { name: string; email: string };
    const { name, email } = body;
 
    // バリデーション
    if (!name || !email) {
      return Response.json(
        { error: 'name and email are required' },
        { status: 400 }
      );
    }
 
    // D1 にユーザーを挿入
    const result = await env.MY_DB.prepare(
      'INSERT INTO users (name, email, created_at) VALUES (?, ?, datetime("now")) RETURNING *'
    ).bind(name, email).first();
 
    // KV にキャッシュ
    ctx.waitUntil(
      env.MY_KV.put(`user:${result?.id}`, JSON.stringify(result), {
        expirationTtl: 3600,
      })
    );
 
    return Response.json({ user: result }, { status: 201 });
  }
 
  return new Response('Method Not Allowed', { status: 405 });
}
 
// ファイル処理ハンドラ（R2 使用）
async function handleFiles(
  request: Request,
  env: Env,
  ctx: ExecutionContext
): Promise<Response> {
  const url = new URL(request.url);
  const key = url.pathname.replace('/api/files/', '');
 
  if (request.method === 'PUT') {
    // R2 にファイルをアップロード
    const body = await request.arrayBuffer();
    const contentType = request.headers.get('content-type') || 'application/octet-stream';
 
    await env.MY_BUCKET.put(key, body, {
      httpMetadata: { contentType },
      customMetadata: {
        uploadedAt: new Date().toISOString(),
        size: body.byteLength.toString(),
      },
    });
 
    return Response.json({ key, size: body.byteLength });
  }
 
  if (request.method === 'GET') {
    const object = await env.MY_BUCKET.get(key);
    if (!object) {
      return new Response('Not Found', { status: 404 });
    }
 
    const headers = new Headers();
    headers.set('Content-Type', object.httpMetadata?.contentType || 'application/octet-stream');
    headers.set('Cache-Control', 'public, max-age=31536000, immutable');
    headers.set('ETag', object.httpEtag);
 
    return new Response(object.body, { headers });
  }
 
  return new Response('Method Not Allowed', { status: 405 });
}
 
async function cleanupExpiredData(env: Env): Promise<void> {
  await env.MY_DB.prepare(
    'DELETE FROM sessions WHERE expires_at < datetime("now")'
  ).run();
}
 
async function processMessage(
  message: Message<unknown>,
  env: Env
): Promise<void> {
  console.log('Processing message:', message.body);
}

# wrangler.toml
name = "my-worker"
main = "src/worker.ts"
compatibility_date = "2024-12-01"
compatibility_flags = ["nodejs_compat"]
 
# 環境設定
[vars]
ENVIRONMENT = "production"
 
# KV Namespace
binding = "MY_KV"
id = "xxxxxxxxxxxxxxxxxxxx"
preview_id = "yyyyyyyyyyyyyyyyyyyy"
 
# D1 Database
binding = "MY_DB"
database_name = "my-database"
database_id = "zzzzzzzzzzzzzzzzzzzz"
 
# R2 Bucket
binding = "MY_BUCKET"
bucket_name = "my-bucket"
 
# Cron Triggers
[triggers]
crons = ["0 0 * * *", "*/30 * * * *"]
 
# Queue
queue = "my-queue"
binding = "MY_QUEUE"
 
queue = "my-queue"
max_batch_size = 10
max_batch_timeout = 30
 
# ルーティング
pattern = "api.example.com/*"
zone_name = "example.com"
 
# ステージング環境
[env.staging]
name = "my-worker-staging"
[env.staging.vars]
ENVIRONMENT = "staging"
 
# D1 のマイグレーション
tag = "v1"
new_classes = ["UserDurableObject"]

# D1 データベースの作成
wrangler d1 create my-database
 
# マイグレーションの作成
wrangler d1 migrations create my-database init
 
# マイグレーション SQL の例
# migrations/0001_init.sql

-- migrations/0001_init.sql
CREATE TABLE IF NOT EXISTS users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL,
  email TEXT NOT NULL UNIQUE,
  password_hash TEXT NOT NULL,
  created_at TEXT NOT NULL DEFAULT (datetime('now')),
  updated_at TEXT NOT NULL DEFAULT (datetime('now'))
);
 
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_created_at ON users(created_at);
 
CREATE TABLE IF NOT EXISTS sessions (
  id TEXT PRIMARY KEY,
  user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  expires_at TEXT NOT NULL,
  created_at TEXT NOT NULL DEFAULT (datetime('now'))
);
 
CREATE INDEX idx_sessions_user_id ON sessions(user_id);
CREATE INDEX idx_sessions_expires_at ON sessions(expires_at);
 
CREATE TABLE IF NOT EXISTS posts (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  content TEXT NOT NULL,
  slug TEXT NOT NULL UNIQUE,
  published BOOLEAN NOT NULL DEFAULT 0,
  created_at TEXT NOT NULL DEFAULT (datetime('now')),
  updated_at TEXT NOT NULL DEFAULT (datetime('now'))
);
 
CREATE INDEX idx_posts_user_id ON posts(user_id);
CREATE INDEX idx_posts_slug ON posts(slug);
CREATE INDEX idx_posts_published ON posts(published);

# マイグレーションの実行（ローカル）
wrangler d1 migrations apply my-database --local
 
# マイグレーションの実行（本番）
wrangler d1 migrations apply my-database --remote
 
# データベースへのクエリ実行
wrangler d1 execute my-database --command "SELECT * FROM users LIMIT 10"
 
# SQL ファイルの実行
wrangler d1 execute my-database --file ./seed.sql --remote

# ============================================
# Next.js 本番用 Dockerfile（最適化版）
# ============================================
 
# ── Stage 1: 依存関係のインストール ──
FROM node:20-alpine AS deps
WORKDIR /app
 
# セキュリティ: 不要なパッケージを入れない
RUN apk add --no-cache libc6-compat
 
# パッケージマネージャのファイルをコピー
COPY package.json pnpm-lock.yaml ./
 
# pnpm を有効化して依存関係をインストール
RUN corepack enable pnpm && \
    pnpm install --frozen-lockfile --prod=false
 
# ── Stage 2: ビルド ──
FROM node:20-alpine AS builder
WORKDIR /app
 
# 環境変数（ビルド時に必要なもの）
ARG NEXT_PUBLIC_API_URL
ARG NEXT_PUBLIC_SITE_URL
ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
ENV NEXT_PUBLIC_SITE_URL=$NEXT_PUBLIC_SITE_URL
 
# 依存関係をコピー
COPY --from=deps /app/node_modules ./node_modules
COPY . .
 
# テレメトリの無効化
ENV NEXT_TELEMETRY_DISABLED=1
 
# ビルド実行
RUN corepack enable pnpm && pnpm build
 
# ── Stage 3: 本番イメージ ──
FROM node:20-alpine AS runner
WORKDIR /app
 
# 本番モード
ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1
 
# セキュリティ: 非 root ユーザーで実行
RUN addgroup --system --gid 1001 nodejs && \
    adduser --system --uid 1001 nextjs
 
# 必要なファイルのみコピー（standalone 出力の場合）
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
 
# ファイルの所有権を変更
RUN chown -R nextjs:nodejs /app
 
# 非 root ユーザーに切り替え
USER nextjs
 
# ヘルスチェック
HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
  CMD wget --no-verbose --tries=1 --spider http://localhost:3000/api/health || exit 1
 
# ポートの公開
EXPOSE 3000
ENV PORT=3000
ENV HOSTNAME="0.0.0.0"
 
# サーバー起動
CMD ["node", "server.js"]

// next.config.js（standalone 出力を有効化）
/** @type {import('next').NextConfig} */
module.exports = {
  output: 'standalone',
  // イメージサイズ削減のため不要な機能を無効化
  poweredByHeader: false,
  compress: true,
};

# ============================================
# Express/Fastify API 本番用 Dockerfile
# ============================================
 
FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable pnpm && pnpm install --frozen-lockfile
 
FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN corepack enable pnpm && pnpm build
 
FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
 
RUN addgroup --system --gid 1001 appgroup && \
    adduser --system --uid 1001 appuser
 
# 本番用依存関係のみコピー
COPY --from=deps /app/node_modules ./node_modules
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/package.json ./
 
# セキュリティ: 不要なファイルを削除
RUN rm -rf /app/node_modules/.cache
 
USER appuser
EXPOSE 8080
ENV PORT=8080
 
HEALTHCHECK --interval=30s --timeout=10s --retries=3 \
  CMD wget --no-verbose --tries=1 --spider http://localhost:8080/health || exit 1
 
CMD ["node", "dist/server.js"]

# docker-compose.prod.yml
version: '3.9'
 
services:
  # ── アプリケーション ──
  app:
    build:
      context: .
      dockerfile: Dockerfile
      args:
        NEXT_PUBLIC_API_URL: https://api.example.com
    restart: always
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - DATABASE_URL=postgresql://app:secret@db:5432/myapp
      - REDIS_URL=redis://redis:6379
      - SESSION_SECRET=${SESSION_SECRET}
    depends_on:
      db:
        condition: service_healthy
      redis:
        condition: service_healthy
    networks:
      - app-network
    deploy:
      resources:
        limits:
          cpus: '1.0'
          memory: 512M
        reservations:
          cpus: '0.25'
          memory: 128M
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"
 
  # ── データベース ──
  db:
    image: postgres:16-alpine
    restart: always
    environment:
      POSTGRES_DB: myapp
      POSTGRES_USER: app
      POSTGRES_PASSWORD: ${DB_PASSWORD}
    volumes:
      - postgres_data:/var/lib/postgresql/data
      - ./init.sql:/docker-entrypoint-initdb.d/init.sql
    ports:
      - "5432:5432"
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U app -d myapp"]
      interval: 10s
      timeout: 5s
      retries: 5
    networks:
      - app-network
    deploy:
      resources:
        limits:
          cpus: '1.0'
          memory: 1G
 
  # ── Redis ──
  redis:
    image: redis:7-alpine
    restart: always
    command: redis-server --appendonly yes --requirepass ${REDIS_PASSWORD}
    volumes:
      - redis_data:/data
    ports:
      - "6379:6379"
    healthcheck:
      test: ["CMD", "redis-cli", "-a", "${REDIS_PASSWORD}", "ping"]
      interval: 10s
      timeout: 5s
      retries: 5
    networks:
      - app-network
    deploy:
      resources:
        limits:
          cpus: '0.5'
          memory: 256M
 
  # ── Nginx リバースプロキシ ──
  nginx:
    image: nginx:alpine
    restart: always
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
      - ./nginx/conf.d:/etc/nginx/conf.d:ro
      - certbot_data:/var/www/certbot:ro
      - certbot_certs:/etc/letsencrypt:ro
    depends_on:
      - app
    networks:
      - app-network
 
  # ── SSL 証明書の自動更新 ──
  certbot:
    image: certbot/certbot
    volumes:
      - certbot_data:/var/www/certbot
      - certbot_certs:/etc/letsencrypt
    entrypoint: "/bin/sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"
 
volumes:
  postgres_data:
  redis_data:
  certbot_data:
  certbot_certs:
 
networks:
  app-network:
    driver: bridge

# nginx/conf.d/default.conf
upstream app_server {
    server app:3000;
    keepalive 64;
}
 
# HTTP → HTTPS リダイレクト
server {
    listen 80;
    server_name example.com www.example.com;
 
    # Let's Encrypt の認証用
    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
 
    location / {
        return 301 https://$host$request_uri;
    }
}
 
# HTTPS サーバー
server {
    listen 443 ssl http2;
    server_name example.com www.example.com;
 
    # SSL 証明書
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
 
    # SSL 設定
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
    ssl_prefer_server_ciphers off;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 1d;
    ssl_session_tickets off;
 
    # セキュリティヘッダー
    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
    add_header X-Frame-Options DENY always;
    add_header X-Content-Type-Options nosniff always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
 
    # Gzip 圧縮
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/xml application/json application/javascript
               application/xml+rss text/javascript image/svg+xml;
 
    # 静的ファイルのキャッシュ
    location /_next/static/ {
        proxy_pass http://app_server;
        proxy_cache_valid 200 365d;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }
 
    # 画像のキャッシュ
    location ~* \.(jpg|jpeg|png|gif|ico|svg|webp|avif)$ {
        proxy_pass http://app_server;
        proxy_cache_valid 200 30d;
        add_header Cache-Control "public, max-age=2592000";
    }
 
    # API エンドポイント
    location /api/ {
        proxy_pass http://app_server;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
 
        # レート制限
        limit_req zone=api burst=20 nodelay;
    }
 
    # メインアプリケーション
    location / {
        proxy_pass http://app_server;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}

# Amplify CLI のインストール
npm install -g @aws-amplify/cli
 
# Amplify の初期化
amplify init
 
# ホスティングの追加
amplify add hosting
 
# デプロイ
amplify publish

# amplify.yml - Amplify ビルド設定
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - corepack enable pnpm
        - pnpm install --frozen-lockfile
    build:
      commands:
        - pnpm build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/*
 
  # 環境変数（Amplify コンソールで設定推奨）
  environmentVariables:
    NEXT_PUBLIC_API_URL: https://api.example.com

// task-definition.json（ECS タスク定義）
{
  "family": "my-nextjs-app",
  "networkMode": "awsvpc",
  "requiresCompatibilities": ["FARGATE"],
  "cpu": "512",
  "memory": "1024",
  "executionRoleArn": "arn:aws:iam::ACCOUNT_ID:role/ecsTaskExecutionRole",
  "taskRoleArn": "arn:aws:iam::ACCOUNT_ID:role/ecsTaskRole",
  "containerDefinitions": [
    {
      "name": "nextjs-app",
      "image": "ACCOUNT_ID.dkr.ecr.ap-northeast-1.amazonaws.com/my-app:latest",
      "portMappings": [
        {
          "containerPort": 3000,
          "protocol": "tcp"
        }
      ],
      "environment": [
        { "name": "NODE_ENV", "value": "production" },
        { "name": "PORT", "value": "3000" }
      ],
      "secrets": [
        {
          "name": "DATABASE_URL",
          "valueFrom": "arn:aws:secretsmanager:ap-northeast-1:ACCOUNT_ID:secret:myapp/database-url"
        },
        {
          "name": "SESSION_SECRET",
          "valueFrom": "arn:aws:secretsmanager:ap-northeast-1:ACCOUNT_ID:secret:myapp/session-secret"
        }
      ],
      "logConfiguration": {
        "logDriver": "awslogs",
        "options": {
          "awslogs-group": "/ecs/my-nextjs-app",
          "awslogs-region": "ap-northeast-1",
          "awslogs-stream-prefix": "ecs"
        }
      },
      "healthCheck": {
        "command": ["CMD-SHELL", "wget --no-verbose --tries=1 --spider http://localhost:3000/api/health || exit 1"],
        "interval": 30,
        "timeout": 5,
        "retries": 3,
        "startPeriod": 60
      },
      "essential": true
    }
  ]
}

# ECR リポジトリの作成
aws ecr create-repository --repository-name my-app --region ap-northeast-1
 
# Docker イメージのビルドとプッシュ
aws ecr get-login-password --region ap-northeast-1 | \
  docker login --username AWS --password-stdin ACCOUNT_ID.dkr.ecr.ap-northeast-1.amazonaws.com
 
docker build -t my-app .
docker tag my-app:latest ACCOUNT_ID.dkr.ecr.ap-northeast-1.amazonaws.com/my-app:latest
docker push ACCOUNT_ID.dkr.ecr.ap-northeast-1.amazonaws.com/my-app:latest
 
# ECS サービスの作成（Fargate）
aws ecs create-service \
  --cluster my-cluster \
  --service-name my-nextjs-service \
  --task-definition my-nextjs-app \
  --desired-count 2 \
  --launch-type FARGATE \
  --network-configuration "awsvpcConfiguration={subnets=[subnet-xxx,subnet-yyy],securityGroups=[sg-zzz],assignPublicIp=ENABLED}" \
  --load-balancers "targetGroupArn=arn:aws:elasticloadbalancing:ap-northeast-1:ACCOUNT_ID:targetgroup/my-tg/xxx,containerName=nextjs-app,containerPort=3000"
 
# サービスの更新（新しいイメージでデプロイ）
aws ecs update-service \
  --cluster my-cluster \
  --service my-nextjs-service \
  --force-new-deployment

// lambda/handler.ts - Lambda 関数ハンドラ
import { APIGatewayProxyHandlerV2 } from 'aws-lambda';
 
export const handler: APIGatewayProxyHandlerV2 = async (event) => {
  const { httpMethod, path, body, queryStringParameters, headers } = event;
 
  try {
    // ルーティング
    if (path === '/api/health') {
      return {
        statusCode: 200,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: 'ok', timestamp: new Date().toISOString() }),
      };
    }
 
    if (path === '/api/users' && httpMethod === 'GET') {
      // DynamoDB からデータ取得（例）
      const users = await getUsers();
      return {
        statusCode: 200,
        headers: {
          'Content-Type': 'application/json',
          'Cache-Control': 'max-age=60',
        },
        body: JSON.stringify({ users }),
      };
    }
 
    if (path === '/api/users' && httpMethod === 'POST') {
      const userData = JSON.parse(body || '{}');
      const user = await createUser(userData);
      return {
        statusCode: 201,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ user }),
      };
    }
 
    return {
      statusCode: 404,
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ error: 'Not Found' }),
    };
  } catch (error) {
    console.error('Lambda error:', error);
    return {
      statusCode: 500,
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ error: 'Internal Server Error' }),
    };
  }
};
 
async function getUsers() {
  // DynamoDB / RDS からの取得ロジック
  return [];
}
 
async function createUser(data: Record<string, unknown>) {
  // ユーザー作成ロジック
  return { id: 'new-id', ...data };
}

# S3 バケットの作成（静的ウェブサイトホスティング用）
aws s3 mb s3://my-static-site --region ap-northeast-1
 
# バケットポリシーの設定（CloudFront OAI 用）
aws s3api put-bucket-policy --bucket my-static-site --policy '{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowCloudFrontOAI",
      "Effect": "Allow",
      "Principal": {
        "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXX"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::my-static-site/*"
    }
  ]
}'
 
# ビルド成果物のアップロード
aws s3 sync ./dist s3://my-static-site \
  --delete \
  --cache-control "public, max-age=31536000, immutable" \
  --exclude "*.html"
 
# HTML ファイルは短いキャッシュで
aws s3 sync ./dist s3://my-static-site \
  --include "*.html" \
  --cache-control "public, max-age=0, must-revalidate"
 
# CloudFront のキャッシュ無効化
aws cloudfront create-invalidation \
  --distribution-id EXXXXXX \
  --paths "/*"

# .github/workflows/deploy-aws.yml
name: Deploy to AWS
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
env:
  AWS_REGION: ap-northeast-1
  ECR_REPOSITORY: my-app
  ECS_SERVICE: my-nextjs-service
  ECS_CLUSTER: my-cluster
  CONTAINER_NAME: nextjs-app
 
permissions:
  id-token: write
  contents: read
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint
      - run: pnpm test
 
  deploy:
    needs: test
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      # AWS 認証（OIDC）
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/github-actions-role
          aws-region: ${{ env.AWS_REGION }}
 
      # ECR ログイン
      - name: Login to Amazon ECR
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v2
 
      # Docker ビルドとプッシュ
      - name: Build, tag, and push image to Amazon ECR
        id: build-image
        env:
          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
          IMAGE_TAG: ${{ github.sha }}
        run: |
          docker build \
            --build-arg NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }} \
            -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG \
            -t $ECR_REGISTRY/$ECR_REPOSITORY:latest \
            .
          docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
          docker push $ECR_REGISTRY/$ECR_REPOSITORY:latest
          echo "image=$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG" >> $GITHUB_OUTPUT
 
      # ECS タスク定義の更新
      - name: Fill in the new image ID in the Amazon ECS task definition
        id: task-def
        uses: aws-actions/amazon-ecs-render-task-definition@v1
        with:
          task-definition: task-definition.json
          container-name: ${{ env.CONTAINER_NAME }}
          image: ${{ steps.build-image.outputs.image }}
 
      # ECS サービスのデプロイ
      - name: Deploy Amazon ECS task definition
        uses: aws-actions/amazon-ecs-deploy-task-definition@v2
        with:
          task-definition: ${{ steps.task-def.outputs.task-definition }}
          service: ${{ env.ECS_SERVICE }}
          cluster: ${{ env.ECS_CLUSTER }}
          wait-for-service-stability: true

# Google Cloud SDK のインストール後
 
# プロジェクトの設定
gcloud config set project my-project-id
gcloud config set run/region asia-northeast1
 
# Artifact Registry にリポジトリを作成
gcloud artifacts repositories create my-repo \
  --repository-format=docker \
  --location=asia-northeast1
 
# Docker イメージのビルドとプッシュ（Cloud Build 使用）
gcloud builds submit --tag asia-northeast1-docker.pkg.dev/my-project-id/my-repo/my-app:latest
 
# Cloud Run へのデプロイ
gcloud run deploy my-app \
  --image asia-northeast1-docker.pkg.dev/my-project-id/my-repo/my-app:latest \
  --platform managed \
  --region asia-northeast1 \
  --allow-unauthenticated \
  --port 3000 \
  --memory 512Mi \
  --cpu 1 \
  --min-instances 0 \
  --max-instances 10 \
  --concurrency 80 \
  --timeout 300 \
  --set-env-vars "NODE_ENV=production" \
  --set-secrets "DATABASE_URL=db-url:latest,SESSION_SECRET=session-secret:latest"
 
# カスタムドメインの設定
gcloud run domain-mappings create \
  --service my-app \
  --domain app.example.com \
  --region asia-northeast1
 
# トラフィック分割（カナリアデプロイ）
gcloud run services update-traffic my-app \
  --to-revisions my-app-00002-rev=10,my-app-00001-rev=90

# Railway CLI のインストール
npm install -g @railway/cli
 
# ログイン
railway login
 
# プロジェクトの初期化
railway init
 
# ローカル開発（Railway の環境変数を使用）
railway run npm run dev
 
# デプロイ
railway up
 
# 環境変数の設定
railway variables set DATABASE_URL="postgresql://..."
railway variables set SESSION_SECRET="..."
 
# PostgreSQL の追加
railway add --plugin postgresql
 
# Redis の追加
railway add --plugin redis
 
# ログの確認
railway logs
 
# ドメインの設定
railway domain

# Fly CLI のインストール
curl -L https://fly.io/install.sh | sh
 
# ログイン
fly auth login
 
# アプリケーションの作成
fly launch
 
# デプロイ
fly deploy
 
# スケーリング
fly scale count 3          # インスタンス数
fly scale vm shared-cpu-2x  # マシンタイプ
fly scale memory 512        # メモリ
 
# リージョンの追加
fly regions add nrt  # 東京
fly regions add sjc  # サンノゼ
fly regions add lhr  # ロンドン
 
# PostgreSQL の作成
fly postgres create
 
# シークレットの設定
fly secrets set DATABASE_URL="postgresql://..."
fly secrets set SESSION_SECRET="..."
 
# ログの確認
fly logs
 
# SSH 接続
fly ssh console
 
# ステータス確認
fly status

# fly.toml - Fly.io 設定ファイル
app = "my-nextjs-app"
primary_region = "nrt"
 
[build]
  dockerfile = "Dockerfile"
 
[env]
  NODE_ENV = "production"
  PORT = "3000"
 
[http_service]
  internal_port = 3000
  force_https = true
  auto_stop_machines = true
  auto_start_machines = true
  min_machines_running = 1
  processes = ["app"]
 
  [http_service.concurrency]
    type = "requests"
    hard_limit = 250
    soft_limit = 200
 
  cpu_kind = "shared"
  cpus = 1
  memory_mb = 512
 
# ヘルスチェック
  interval = 10000
  grace_period = "5s"
  method = "get"
  path = "/api/health"
  protocol = "http"
  timeout = 2000
  tls_skip_verify = false
 
# ボリューム（永続ストレージ）
[mounts]
  source = "data"
  destination = "/data"

# .github/workflows/blue-green-deploy.yml
name: Blue-Green Deploy
 
on:
  push:
    branches: [main]
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Build and push Docker image
        run: |
          docker build -t my-app:${{ github.sha }} .
          docker push my-app:${{ github.sha }}
 
      - name: Deploy Green environment
        run: |
          # 新しいタスク定義を登録（Green）
          aws ecs register-task-definition \
            --cli-input-json file://task-definition.json
 
          # Green サービスを作成/更新
          aws ecs update-service \
            --cluster production \
            --service my-app-green \
            --task-definition my-app:latest \
            --desired-count 2
 
          # Green の安定化を待機
          aws ecs wait services-stable \
            --cluster production \
            --services my-app-green
 
      - name: Run smoke tests on Green
        run: |
          GREEN_URL=$(aws ecs describe-services --cluster production --services my-app-green --query 'services[0].loadBalancers[0].targetGroupArn' --output text)
          curl -f https://green.example.com/api/health || exit 1
          npm run test:e2e -- --base-url=https://green.example.com
 
      - name: Switch traffic to Green
        run: |
          # ALB のターゲットグループを切り替え
          aws elbv2 modify-listener \
            --listener-arn $LISTENER_ARN \
            --default-actions Type=forward,TargetGroupArn=$GREEN_TARGET_GROUP_ARN
 
      - name: Verify production
        run: |
          sleep 30
          curl -f https://example.com/api/health || exit 1
 
      - name: Scale down Blue (optional)
        if: success()
        run: |
          aws ecs update-service \
            --cluster production \
            --service my-app-blue \
            --desired-count 0

// Vercel でのカナリアリリース（Edge Middleware）
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
const CANARY_PERCENTAGE = 10; // 10% のユーザーにカナリア版を配信
 
export function middleware(request: NextRequest) {
  // カナリアフラグの確認
  const canaryFlag = request.cookies.get('canary');
 
  if (!canaryFlag) {
    // 新規ユーザーにランダムで割り当て
    const isCanary = Math.random() * 100 < CANARY_PERCENTAGE;
    const response = NextResponse.next();
    response.cookies.set('canary', isCanary ? 'true' : 'false', {
      maxAge: 60 * 60 * 24, // 24時間
      httpOnly: true,
      sameSite: 'lax',
    });
 
    if (isCanary) {
      // カナリア版の URL にリライト
      return NextResponse.rewrite(
        new URL(request.url.replace('example.com', 'canary.example.com'))
      );
    }
    return response;
  }
 
  if (canaryFlag.value === 'true') {
    return NextResponse.rewrite(
      new URL(request.url.replace('example.com', 'canary.example.com'))
    );
  }
 
  return NextResponse.next();
}

# ---- Vercel のロールバック ----
# デプロイメント一覧を確認
vercel ls
 
# 特定のデプロイメントを本番に昇格
vercel promote <deployment-url>
 
# ---- AWS ECS のロールバック ----
# 前のタスク定義に戻す
aws ecs update-service \
  --cluster my-cluster \
  --service my-service \
  --task-definition my-app:PREVIOUS_REVISION \
  --force-new-deployment
 
# ---- Docker / VPS のロールバック ----
# 前のイメージに戻す
docker pull my-app:previous-tag
docker stop my-app-current
docker run -d --name my-app --restart always my-app:previous-tag
 
# ---- Fly.io のロールバック ----
# リリース一覧
fly releases
 
# 特定のリリースにロールバック
fly deploy --image registry.fly.io/my-app:sha-xxxxxxx
 
# ---- Railway のロールバック ----
# ダッシュボードから Deployments → 前のデプロイを選択 → Rollback
 
# ---- Cloud Run のロールバック ----
# リビジョン一覧
gcloud run revisions list --service my-app
 
# 前のリビジョンにトラフィックを切り替え
gcloud run services update-traffic my-app \
  --to-revisions my-app-00001-rev=100

// app/api/health/route.ts - 包括的なヘルスチェック
import { NextResponse } from 'next/server';
 
interface HealthStatus {
  status: 'healthy' | 'degraded' | 'unhealthy';
  version: string;
  uptime: number;
  timestamp: string;
  checks: {
    database: CheckResult;
    redis: CheckResult;
    externalApi: CheckResult;
  };
}
 
interface CheckResult {
  status: 'pass' | 'fail';
  responseTime: number;
  message?: string;
}
 
const startTime = Date.now();
 
export async function GET() {
  const checks = await Promise.allSettled([
    checkDatabase(),
    checkRedis(),
    checkExternalApi(),
  ]);
 
  const [dbResult, redisResult, apiResult] = checks;
 
  const health: HealthStatus = {
    status: 'healthy',
    version: process.env.APP_VERSION || '1.0.0',
    uptime: Math.floor((Date.now() - startTime) / 1000),
    timestamp: new Date().toISOString(),
    checks: {
      database: dbResult.status === 'fulfilled'
        ? dbResult.value
        : { status: 'fail', responseTime: 0, message: 'Check failed' },
      redis: redisResult.status === 'fulfilled'
        ? redisResult.value
        : { status: 'fail', responseTime: 0, message: 'Check failed' },
      externalApi: apiResult.status === 'fulfilled'
        ? apiResult.value
        : { status: 'fail', responseTime: 0, message: 'Check failed' },
    },
  };
 
  // 全体のステータス判定
  const failedChecks = Object.values(health.checks).filter(c => c.status === 'fail');
  if (failedChecks.length > 0) {
    health.status = failedChecks.length === Object.keys(health.checks).length
      ? 'unhealthy'
      : 'degraded';
  }
 
  const statusCode = health.status === 'unhealthy' ? 503 : 200;
  return NextResponse.json(health, { status: statusCode });
}
 
async function checkDatabase(): Promise<CheckResult> {
  const start = Date.now();
  try {
    // Prisma / Drizzle などの ORM を使用
    // await prisma.$queryRaw`SELECT 1`;
    return {
      status: 'pass',
      responseTime: Date.now() - start,
    };
  } catch (error) {
    return {
      status: 'fail',
      responseTime: Date.now() - start,
      message: error instanceof Error ? error.message : 'Unknown error',
    };
  }
}
 
async function checkRedis(): Promise<CheckResult> {
  const start = Date.now();
  try {
    // Redis クライアントで PING
    // await redis.ping();
    return {
      status: 'pass',
      responseTime: Date.now() - start,
    };
  } catch (error) {
    return {
      status: 'fail',
      responseTime: Date.now() - start,
      message: error instanceof Error ? error.message : 'Unknown error',
    };
  }
}
 
async function checkExternalApi(): Promise<CheckResult> {
  const start = Date.now();
  try {
    const response = await fetch('https://api.example.com/health', {
      signal: AbortSignal.timeout(5000),
    });
    return {
      status: response.ok ? 'pass' : 'fail',
      responseTime: Date.now() - start,
    };
  } catch (error) {
    return {
      status: 'fail',
      responseTime: Date.now() - start,
      message: error instanceof Error ? error.message : 'Timeout or network error',
    };
  }
}