Next.js: 最終プロジェクト: デプロイと CI/CD

# 1 行の GitHub Actions で完全自動デプロイをトリガー
name: Deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build
      - uses: amondnet/vercel-action@v20

キーを含む JSON 設定: framework ("nextjs")、buildCommand、outputDirectory、installCommand、regions (iad1/hkg1/gru1)、env、crons、headers（セキュリティヘッダー + キャッシュルール）、redirects。

{
  "framework": "nextjs",
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "installCommand": "npm install",
  "regions": ["iad1", "hkg1", "gru1"],
  "env": {
    "NEXT_PUBLIC_APP_URL": "https://taskflow.vercel.app"
  },
  "crons": [
    {
      "path": "/api/cron/daily-digest",
      "schedule": "0 8 * * *"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        }
      ]
    },
    {
      "source": "/uploads/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/app",
      "destination": "/dashboard",
      "permanent": true
    }
  ]
}

JSON 設定が正常に適用されました。

コマンドが完了しました。

# 1. Vercel CLI のインストール
npm install -g vercel

# 2. Vercel にログイン
vercel login

# 3. プロジェクトの関連付け
vercel link

# 4. 環境変数の設定
vercel env add DATABASE_URL
vercel env add AUTH_SECRET
vercel env add GOOGLE_CLIENT_ID
vercel env add GOOGLE_CLIENT_SECRET
vercel env add AUTH_URL
vercel env add NEXT_PUBLIC_POSTHOG_KEY
vercel env add SENTRY_DSN

# 5. プレビューデプロイ
vercel

# 6. 本番デプロイ
vercel --prod

# 7. デプロイログの表示
vercel logs

127 パッケージが 3.2 秒で追加されました

38 パッケージが資金提供を求めています
  詳細は `npm fund` を実行してください
環境変数が設定されました。
環境変数が設定されました。
環境変数が設定されました。
環境変数が設定されました。
環境変数が設定されました。
環境変数が設定されました。
環境変数が設定されました。

Vercel CLI 28.0.0
? "C:\Users\admin\taskflow" をセットアップしてデプロイしますか？ [Y/n] Y
? どのスコープですか？ Acme Corp
? 既存のプロジェクトにリンクしますか？ いいえ
? プロジェクト名は何ですか？ taskflow
? コードはどのディレクトリにありますか？ ./
自動検出されたプロジェクト設定 (Next.js):
- ビルドコマンド: npx next build
- 出力ディレクトリ: .next
- Node.js バージョン: 20.x
✅ 本番: https://taskflow.vercel.app [7s]

# 1. Postgres データベースの作成
vercel env add DATABASE_URL

# 2. Vercel Postgres SDK のインストール
npm install @vercel/postgres

# 3. Prisma データソースの更新

// prisma/schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  // Vercel Postgres の自動接続プール管理
  // Vercel では、マイグレーション競合を避けるために shadowDatabaseUrl を有効にします
}

Prisma スキーマが更新されました。npx prisma generate を実行してクライアントを同期してください。

// src/lib/db.ts
import { PrismaClient } from "@prisma/client"

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma

ビルドコンテキストを Docker デーモンに送信しています  4.096kB
Step 1/8 : FROM node:20-alpine AS deps
 ---> 1dd67de0f936
...
Successfully built a7b3c2d1e0f9
Successfully tagged taskflow:latest

# ============================================
# ステージ 1: 依存関係
# ============================================
FROM node:20-alpine AS deps
RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci --only=production --ignore-scripts
RUN npm ci --only=development --ignore-scripts

# ============================================
# ステージ 2: ビルド
# ============================================
FROM node:20-alpine AS builder
WORKDIR /app

COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_TELEMETRY_DISABLED=1
ENV NODE_ENV=production
ENV NEXT_OUTPUT=standalone

RUN npx prisma generate
RUN npm run build

# ============================================
# ステージ 3: 本番ランナー
# ============================================
FROM node:20-alpine AS runner
WORKDIR /app

ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=builder /app/prisma ./prisma
COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma

USER nextjs

EXPOSE 3000

ENV PORT=3000
ENV HOSTNAME="0.0.0.0"

CMD ["node", "server.js"]

ビルドコンテキストを Docker デーモンに送信しています  4.096kB
Step 1/8 : FROM node:20-alpine AS deps
 ---> 1dd67de0f936
...
Successfully built a7b3c2d1e0f9
Successfully tagged taskflow:latest

上記の YAML 設定を指定されたファイルパスに保存してください。設定は次回のサーバー再起動時に有効になります。

version: "3.8"

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgresql://taskflow:password@db:5432/taskflow
      - AUTH_SECRET=${AUTH_SECRET}
      - AUTH_URL=https://taskflow.example.com
      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
      - NEXTAUTH_URL=https://taskflow.example.com
      - NODE_ENV=production
    depends_on:
      db:
        condition: service_healthy
    restart: unless-stopped
    networks:
      - taskflow-network
    healthcheck:
      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000/api/health"]
      interval: 30s
      timeout: 10s
      retries: 3

  db:
    image: postgres:16-alpine
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=taskflow
      - POSTGRES_USER=taskflow
      - POSTGRES_PASSWORD=${DB_PASSWORD}
    ports:
      - "5432:5432"
    restart: unless-stopped
    networks:
      - taskflow-network
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U taskflow"]
      interval: 10s
      timeout: 5s
      retries: 5

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
      - ./ssl:/etc/nginx/ssl:ro
    depends_on:
      - app
    restart: unless-stopped
    networks:
      - taskflow-network

volumes:
  postgres-data:

networks:
  taskflow-network:
    driver: bridge

設定セクション: version、services、volumes、networks。

セクション: version、services、volumes、networks。

# nginx.conf
events {
  worker_connections 1024;
}

http {
  upstream taskflow_app {
    server app:3000;
  }

  server {
    listen 80;
    server_name taskflow.example.com;
    return 301 https://$server_name$request_uri;
  }

  server {
    listen 443 ssl http2;
    server_name taskflow.example.com;

    ssl_certificate /etc/nginx/ssl/cert.pem;
    ssl_certificate_key /etc/nginx/ssl/key.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    # セキュリティヘッダー
    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_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript image/svg+xml;
    gzip_min_length 1000;
    gzip_comp_level 6;

    # 静的アセット（永続キャッシュ）
    location /_next/static {
      proxy_pass http://taskflow_app;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      expires 365d;
      add_header Cache-Control "public, immutable";
    }

    # アップロード
    location /uploads {
      proxy_pass http://taskflow_app;
      proxy_set_header Host $host;
      expires 30d;
      add_header Cache-Control "public, immutable";
    }

    # API ルート（キャッシュなし）
    location /api {
      proxy_pass http://taskflow_app;
      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_no_cache 1;
      proxy_cache_bypass 1;
    }

    # その他すべて
    location / {
      proxy_pass http://taskflow_app;
      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;

      # WebSocket サポート
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }
  }
}

Nginx 設定が適用されました。リロードして有効化してください。

# ============================================
# TaskFlow 完全本番デプロイプロセス
# ============================================

# --- プラン A: Vercel デプロイ ---

# 1. ビルド前チェック
npm run lint && npx tsc --noEmit && npm run test -- --run

# 2. ビルドと検証
npm run build
# 出力: ✓ 12.8 秒で正常にコンパイルされました

# 3. プレビューデプロイ
vercel
# 出力: https://taskflow-git-feature-abc123.vercel.app

# 4. E2E テストの実行
npx playwright test --url=https://taskflow-git-feature-abc123.vercel.app

# 5. Lighthouse チェック
npx lhci autorun

# 6. 本番デプロイ
vercel --prod
# 出力: https://taskflow.vercel.app (本番)

# 7. カスタムドメインの設定
vercel domains add taskflow.example.com
# 出力: ✓ ドメイン taskflow.example.com が追加されました

# 8. 検証
curl -I https://taskflow.example.com/api/health
# 出力: HTTP/2 200

# --- プラン B: Docker セルフホスト ---

# 1. Docker イメージのビルド
docker build -t taskflow:latest .

# 2. サービスの起動
docker compose up -d

# 3. データベースマイグレーションの実行
docker compose exec app npx prisma migrate deploy

# 4. シードの実行
docker compose exec app npx prisma db seed

# 5. 検証
curl http://localhost/api/health
# 出力: {"status":"healthy","timestamp":"2026-07-06T10:00:00Z"}

# 6. ログの表示
docker compose logs -f app

# 7. 監視指標
# - PostHog: https://app.posthog.com/project/taskflow
# - Sentry: https://sentry.io/organizations/acme/projects/taskflow
# - Vercel ダッシュボード: https://vercel.com/acme/taskflow

# --- パフォーマンス検証 ---

# Lighthouse レポート
# パフォーマンス: 94/100 ✅
# アクセシビリティ: 97/100 ✅
# ベストプラクティス: 93/100 ✅
# SEO: 100/100 ✅

# Core Web Vitals (RUM)
# LCP: 1.2s ✅ (目標 < 2.5s)
# FID: 12ms ✅ (目標 < 100ms)
# CLS: 0.02 ✅ (目標 < 0.1)