vercel-deployments

Vercel のデプロイ

プレビュー環境とマネージドエッジインフラストラクチャを活用して、ウェブアプリをすばやく公開できます。

このスキルを使用する場面

次の場合にこのスキルを使用します。

• Next.js、SvelteKit、Nuxt、または静的サイトをデプロイする
• すべての PR にプレビュー環境を設定する
• エッジ関数とサーバーレス API を構成する
• プレビュー環境と本番環境の環境変数を管理する
• カスタムドメインとリダイレクトを設定する

前提条件

• Node.js 18+
• Vercel アカウント（個人プロジェクトなら無料プランで利用できます）
• Git リポジトリ（GitHub、GitLab、または Bitbucket）

クイックスタート

# Install CLI
npm i -g vercel

# Login and link project
vercel login
vercel link

# Deploy to preview
vercel

# Deploy to production
vercel --prod

# Pull environment variables locally
vercel env pull .env.local

プロジェクトの構成

// vercel.json
{
  "framework": "nextjs",
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "installCommand": "npm ci",
  "regions": ["iad1", "sfo1", "cdg1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" },
        { "key": "X-Content-Type-Options", "value": "nosniff" }
      ]
    },
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "Strict-Transport-Security", "value": "max-age=63072000; includeSubDomains" }
      ]
    }
  ],
  "redirects": [
    { "source": "/blog/:slug", "destination": "/posts/:slug", "permanent": true }
  ],
  "rewrites": [
    { "source": "/api/v1/:path*", "destination": "https://api.example.com/:path*" }
  ]
}

環境変数

# Add environment variables
vercel env add DATABASE_URL production
vercel env add DATABASE_URL preview
vercel env add NEXT_PUBLIC_API_URL production

# List all env vars
vercel env ls

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

# Remove an env var
vercel env rm SECRET_KEY production

環境分離のパターン

# Production — real credentials
vercel env add DATABASE_URL production <<< "postgresql://prod-host:5432/app"
vercel env add STRIPE_SECRET_KEY production

# Preview — staging/test credentials
vercel env add DATABASE_URL preview <<< "postgresql://staging-host:5432/app"
vercel env add STRIPE_SECRET_KEY preview   # Use test mode key

# Development — local values
vercel env add DATABASE_URL development <<< "postgresql://localhost:5432/app"

エッジ関数

// app/api/geo/route.ts — Edge API route (Next.js App Router)
import { NextRequest } from 'next/server';

export const runtime = 'edge';

export function GET(request: NextRequest) {
  const country = request.geo?.country || 'US';
  const city = request.geo?.city || 'Unknown';

  return Response.json({
    country,
    city,
    region: request.geo?.region,
    timestamp: new Date().toISOString(),
  });
}

// middleware.ts — Edge middleware for auth/redirects
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // Block non-US traffic from admin
  if (request.nextUrl.pathname.startsWith('/admin')) {
    if (request.geo?.country !== 'US') {
      return NextResponse.redirect(new URL('/blocked', request.url));
    }
  }

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

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

GitHub Actions との統合

# .github/workflows/preview.yml
name: Vercel Preview
on: pull_request

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - run: npm ci
      - run: npm run lint
      - run: npm run test

      - name: Deploy to Vercel Preview
        id: deploy
        run: |
          npm i -g vercel
          URL=$(vercel --token ${{ secrets.VERCEL_TOKEN }} --yes)
          echo "url=$URL" >> "$GITHUB_OUTPUT"

      - name: Comment PR with preview URL
        uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `Preview deployed: ${{ steps.deploy.outputs.url }}`
            });

CLI コマンドのリファレンス

# Deployments
vercel                          # Deploy to preview
vercel --prod                   # Deploy to production
vercel rollback                 # Rollback last production deploy
vercel promote <url>            # Promote preview to production

# Domains
vercel domains add example.com
vercel domains ls
vercel certs ls

# Logs
vercel logs <deployment-url>
vercel logs <deployment-url> --follow

# Project management
vercel project ls
vercel project rm <name>

# Inspect deployment
vercel inspect <deployment-url>

本番環境のガードレール

• マージ前にプレビューのチェックを必須にします（GitHub のブランチ保護）
• プレビュー環境と本番環境の環境変数を分けます。API キーを共有しないでください
• 必須のデプロイステータスチェックを設定して、ブランチを保護します
• Vercel Analytics で関数の実行時間とコールドスタートの挙動を監視します
• Vercel のダッシュボードで支出上限を設定し、予期しないコストを防ぎます
• DDoS とボットからの保護のため、Vercel Firewall を有効にします
• セキュリティ対策（CSP、HSTS、X-Frame-Options）には vercel.json のヘッダーを使用します

監視と分析

# Enable Speed Insights in Next.js
npm install @vercel/speed-insights

# Enable Web Analytics
npm install @vercel/analytics

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

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

トラブルシューティング

問題	解決策
ビルドに失敗する	vercel logs を確認し、engines フィールドの Node.js バージョンを検証します
環境変数が見つからない	vercel env pull を実行し、変数の適用範囲（プレビュー環境か本番環境か）を確認します
エッジ関数がタイムアウトする	エッジの制限は 30s です。重い処理はサーバーレスに移します（runtime = 'edge' を指定しません）
コールドスタートが遅い	可能な場合はエッジランタイムを使用し、バンドルサイズを小さくします
ドメインが機能しない	DNS の伝播を確認し、vercel domains の構成を検証します

関連スキル

• github-actions — 自動デプロイのゲート
• cloudflare-pages — エッジホスティングの代替手段
• ssl-tls-management — カスタム証明書の設定