Vercel Deployment

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

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

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

環境変数

変数の設定

Vercel ダッシュボード（シークレット管理に推奨）:

Project Settings → Environment Variables
適切なスコープを指定して変数を追加:
- Production: 本番環境デプロイのみ
- Preview: PR およびブランチプレビュー
- Development: ローカルの vercel dev

CLI 経由:

vercel env add VARIABLE_NAME production
vercel env pull .env.local  # ローカルに取得

変数の命名規則

# サーバーのみ（ブラウザに公開されない）
DATABASE_URL=
SESSION_SECRET=
ANTHROPIC_API_KEY=

# クライアント公開（NEXT_PUBLIC_ プレフィックス付き）
NEXT_PUBLIC_APP_URL=
NEXT_PUBLIC_ANALYTICS_ID=

サイズ制限

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

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

# 認証（必須）
SESSION_SECRET=your-32-char-minimum-secret-here

# AI 統合（チャット機能に必須）
ANTHROPIC_API_KEY=sk-ant-api...

# データベース（外部を使用する場合）
DATABASE_URL=file:./data/app.db

# プッシュ通知（オプション）
VAPID_PUBLIC_KEY=
VAPID_PRIVATE_KEY=
VAPID_SUBJECT=mailto:admin@example.com

# OAuth（オプション）
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 - 型安全な設定
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) {
  // 認証トークンのチェック
  const token = request.cookies.get('session')?.value;

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

  // ヘッダーを追加
  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) {
  // Edge 対応 API のみに制限される
  return Response.json({ timestamp: Date.now() });
}

ビルド設定

package.json スクリプト

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

ビルド環境

# Node.js バージョンを設定
# Vercel ダッシュボード → Settings → General → Node.js Version
# または package.json で:
{
  "engines": {
    "node": "20.x"
  }
}

ビルド出力

# ローカルでビルドを確認
npm run build

# バンドルを分析
ANALYZE=true npm run build

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

Vercel 上の SQLite

SQLite と better-sqlite3 は Vercel のサーバーレス関数で動作しますが、以下の制限があります:

ファイルシステムは /tmp を除き 読み取り専用
データは呼び出しの間で保持されない
本番環境のデータストレージには適さない

本番環境のデータベースオプション

Turso（SQLite Edge データベース）

import { createClient } from '@libsql/client';

const db = createClient({
  url: process.env.TURSO_DATABASE_URL!,
  authToken: process.env.TURSO_AUTH_TOKEN,
});

Vercel Postgres

import { sql } from '@vercel/postgres';

const result = await sql`SELECT * FROM users`;

PlanetScale（MySQL）
Neon（Postgres）

プレビューデプロイ

ブランチプレビュー

git push のたびにプレビューデプロイが作成されます:

https://<project>-<branch>-<team>.vercel.app
プレビュー用に個別の環境変数が設定される

プレビュー環境変数

# プレビューと本番環境で異なる値
# Vercel ダッシュボードで両方を設定:

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

PR へのコメント

Vercel は自動的に PR にコメントを付与します:

プレビュー URL
ビルドステータス
パフォーマンスメトリクス

トラブルシューティング

ビルド失敗

# まずローカルでビルドを確認
npm run build

# 一般的な問題:
# - 環境変数の欠落
# - TypeScript エラー
# - ESLint エラー（厳密モード）
# - 依存関係の欠落

環境変数の問題

# 変数が設定されていることを確認
vercel env ls

# ローカルにプルしてデバッグ
vercel env pull .env.local

Function タイムアウト

// タイムアウトを増加（Pro で最大 60 秒、Hobby で 10 秒）
// vercel.json で:
{
  "functions": {
    "api/long-running.ts": {
      "maxDuration": 60
    }
  }
}

メモリの問題

// メモリを増加（コストに影響）
{
  "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>
  );
}

Function ログ

# CLI でログを表示
vercel logs <deployment-url>

# リアルタイムログ
vercel logs <deployment-url> --follow

ドメイン

カスタムドメイン設定

Vercel ダッシュボード → Domains
ドメインを追加
DNS を設定:
- A レコード: 76.76.21.21
- または CNAME: cname.vercel-dns.com
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 の暗号化された環境変数を使用
シークレットを定期的にローテーション
プレビュー環境と本番環境で異なるシークレットを使用

参考資料

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

SKILL.md 本文