Vercelデプロイ入門 - Next.jsアプリを公開

このチュートリアルで学ぶこと

• ✓ Vercelアカウント作成
• ✓ GitHubリポジトリ連携
• ✓ 自動デプロイ設定
• ✓ 環境変数設定
• ✓ カスタムドメイン

Step 1: Vercelアカウント作成

1. vercel.com にアクセス
2. Sign Up → Continue with GitHub
3. GitHubアカウントを連携

Step 2: プロジェクトをインポート

1. New Project をクリック
2. Import Git Repository
3. リポジトリを選択
4. Configure Project で設定確認
5. Deploy をクリック

Step 3: ローカルからデプロイ

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

# ログイン
vercel login

# デプロイ
vercel

# 本番デプロイ
vercel --prod

Step 4: 環境変数設定

ダッシュボードから Project → Settings → Environment Variables を開き、次の手順で設定します。

1. Key と Value を入力
2. Environment を選択（Production / Preview / Development）
3. Add をクリック

# Vercel CLI 33+ / https://vercel.com/docs/cli/env
# CLIで設定
vercel env add VARIABLE_NAME

# .env.local からインポート
vercel env pull

Step 5: カスタムドメイン

1. Settings → Domains
2. ドメイン名を入力
3. DNSレコードを設定
   • Aレコード: 76.76.21.21
   • またはCNAME: cname.vercel-dns.com
4. SSL証明書は自動発行

Step 6: プレビューデプロイ

• PRを作成すると自動でプレビューURLが生成
• コメントにプレビューURLが投稿される
• マージ前に確認可能

Step 7: vercel.json設定

{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  "regions": ["hnd1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ]
}

ベストプラクティス

• ✓ 環境変数は必ずダッシュボードで設定
• ✓ プレビューデプロイでPRレビュー
• ✓ Edge Functionsでグローバル配信
• ✓ Analyticsでパフォーマンス監視

まとめ

VercelはNext.jsに最適化されたプラットフォームで、GitHubと連携した自動デプロイやプレビュー機能が便利です。

参考リソース

• Vercel 公式ドキュメント
• Vercel CLI リファレンス
• Vercel Project Configuration
• Next.js Deployment ガイド