vercel-deployment

Vercel へのデプロイ

このスキルでは、ベストプラクティスに従って Vercel 上で Next.js アプリケーションをデプロイ、設定する方法を紹介します。

デプロイ前のクイックチェックリスト

• Vercel ダッシュボードで環境変数を設定済み
• ビルドコマンドを設定済み（デフォルト：next build）
• 出力ディレクトリが正しい（デフォルト：.next）
• Node.js のバージョンを指定済み（20.x を推奨）
• Vercel のネットワークからデータベースにアクセス可能
• シークレットを git にコミットしていない

環境変数

変数の設定

Vercel ダッシュボード（シークレットにはこちらを推奨）：

1. Project Settings → Environment Variables
2. 適切なスコープで変数を追加します：
   • Production：本番環境のデプロイのみ
   • Preview：PR とブランチのプレビュー
   • Development：ローカルの vercel dev

CLI 経由：

vercel env add VARIABLE_NAME production
vercel env pull .env.local  # Pull to local

変数の命名

# Server-only (never exposed to browser)
DATABASE_URL=
SESSION_SECRET=
ANTHROPIC_API_KEY=

# Client-exposed (prefixed with NEXT_PUBLIC_)
NEXT_PUBLIC_APP_URL=
NEXT_PUBLIC_ANALYTICS_ID=

サイズ制限

コンテキスト	上限
デプロイあたりの合計	64 KB
Edge Functions	変数あたり 5 KB
単一の変数	最大 64 KB

このプロジェクトで必要な変数

# Authentication (required)
SESSION_SECRET=your-32-char-minimum-secret-here

# AI Integration (required for chat)
ANTHROPIC_API_KEY=sk-ant-api...

# Database (if using external)
DATABASE_URL=file:./data/app.db

# Push Notifications (optional)
VAPID_PUBLIC_KEY=
VAPID_PRIVATE_KEY=
VAPID_SUBJECT=mailto:[email protected]

# OAuth (optional)
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
APPLE_CLIENT_ID=
APPLE_CLIENT_SECRET=

vercel.json の設定

{
  "buildCommand": "npm run build",
  "framework": "nextjs",
  "regions": ["iad1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store, must-revalidate" }
      ]
    },
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "X-XSS-Protection", "value": "1; mode=block" }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/old-path",
      "destination": "/new-path",
      "permanent": true
    }
  ],
  "rewrites": [
    {
      "source": "/api/v1/:path*",
      "destination": "/api/:path*"
    }
  ]
}

TypeScript の設定（2025 年の新機能）

// vercel.ts - Type-safe configuration
import { defineConfig } from '@vercel/config';

export default defineConfig({
  regions: ['iad1'],

  headers: async () => [
    {
      source: '/api/:path*',
      headers: [
        { key: 'Cache-Control', value: 'no-store' },
      ],
    },
  ],

  redirects: async () => [
    {
      source: '/old',
      destination: '/new',
      permanent: true,
    },
  ],
});

Edge Functions

Edge を使用する場合

適している用途：

• 認証／認可
• A/B テスト
• 位置情報に基づくコンテンツ
• リクエスト／レスポンスの変換
• シンプルで高速な処理

適していない用途：

• データベース接続（代わりにサーバーレスを使用）
• 長時間実行される処理
• 大きな依存関係

Edge Function の例

// src/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export const config = {
  matcher: ['/api/:path*', '/protected/:path*'],
};

export function middleware(request: NextRequest) {
  // Check auth token
  const token = request.cookies.get('session')?.value;

  if (!token && request.nextUrl.pathname.startsWith('/protected')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // Add headers
  const response = NextResponse.next();
  response.headers.set('X-Request-Id', crypto.randomUUID());

  return response;
}

API ルートでの Edge ランタイム

// src/app/api/edge-example/route.ts
export const runtime = 'edge';

export async function GET(request: Request) {
  // Limited to edge-compatible APIs
  return Response.json({ timestamp: Date.now() });
}

ビルド設定

package.json のスクリプト

{
  "scripts": {
    "build": "next build",
    "postbuild": "npm run db:generate"
  }
}

ビルド環境

# Set Node.js version
# In Vercel Dashboard → Settings → General → Node.js Version
# Or in package.json:
{
  "engines": {
    "node": "20.x"
  }
}

ビルド出力

# Check build locally
npm run build

# Analyze bundle
ANALYZE=true npm run build

データベースに関する考慮事項

Vercel での SQLite

better-sqlite3 を使った SQLite は Vercel のサーバーレス関数で動作しますが、次の点に注意してください：

• /tmp を除き、ファイルシステムは読み取り専用です
• 呼び出し間でデータは保持されません
• 本番データの保存には適していません

本番データベースの選択肢

1. Turso（SQLite エッジデータベース）

   import { createClient } from '@libsql/client';
   
   const db = createClient({
     url: process.env.TURSO_DATABASE_URL!,
     authToken: process.env.TURSO_AUTH_TOKEN,
   });
   

2. Vercel Postgres

   import { sql } from '@vercel/postgres';
   
   const result = await sql`SELECT * FROM users`;
   

3. PlanetScale（MySQL）

4. Neon（Postgres）

プレビューデプロイ

ブランチプレビュー

git にプッシュするたびにプレビューデプロイが作成されます：

• https://<project>-<branch>-<team>.vercel.app
• プレビュー用の環境変数は本番環境とは別に設定

プレビュー環境変数

# Different values for preview vs production
# In Vercel Dashboard, set both:

DATABASE_URL (Production): postgres://prod-db...
DATABASE_URL (Preview): postgres://staging-db...

PR へのコメント

Vercel は PR に次の情報を自動的にコメントします：

• プレビュー URL
• ビルドステータス
• パフォーマンス指標

トラブルシューティング

ビルドの失敗

# Check build locally first
npm run build

# Common issues:
# - Missing environment variables
# - TypeScript errors
# - ESLint errors (strict mode)
# - Missing dependencies

環境変数の問題

# Verify variables are set
vercel env ls

# Pull to local for debugging
vercel env pull .env.local

関数のタイムアウト

// Increase timeout (max 60s on Pro, 10s on Hobby)
// In vercel.json:
{
  "functions": {
    "api/long-running.ts": {
      "maxDuration": 60
    }
  }
}

メモリの問題

// Increase memory (affects cost)
{
  "functions": {
    "api/heavy-processing.ts": {
      "memory": 1024
    }
  }
}

モニタリング

Vercel Analytics

// src/app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Speed Insights

import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

関数のログ

# View logs via CLI
vercel logs <deployment-url>

# Real-time logs
vercel logs <deployment-url> --follow

ドメイン

カスタムドメインの設定

1. Vercel Dashboard → Domains
2. ドメインを追加
3. DNS を設定：
   • A レコード：76.76.21.21
   • または CNAME：cname.vercel-dns.com
4. SSL は自動的にプロビジョニングされます

リダイレクト

// vercel.json
{
  "redirects": [
    {
      "source": "/:path((?!api/).*)",
      "has": [{ "type": "host", "value": "old-domain.com" }],
      "destination": "https://new-domain.com/:path",
      "permanent": true
    }
  ]
}

セキュリティ

保護されたルート

ミドルウェアを使用して認証をチェックします（上記の Edge Functions を参照）。

レート制限

Vercel はサーバーレス関数向けのレート制限を標準で提供していないため、アプリケーションレベルでレート制限を実装してください。

シークレット管理

• .env ファイルをコミットしないでください
• Vercel の暗号化された環境変数を使用してください
• シークレットを定期的にローテーションしてください
• プレビュー環境と本番環境で異なるシークレットを使用してください

参考資料

• Vercel のドキュメント
• 環境変数
• Edge Functions
• Vercel 上の Next.js