DEV Community

スシロー
スシロー

Posted on

【2026】Vercel vs Cloudflare Pages 移行ガイド：料金・移行コストで選ぶ

#saas #devops #tutorial #webdev

結論（おすすめ1つ）

Cloudflare Pages に移行することを推奨する。

帯域幅課金がなく、グローバルCDNの実効速度が高い。Next.js の App Router を使わず、静的サイトや軽量な SSR で十分なプロジェクトであれば、移行コストを払ってでも長期的な運用コストを下げられる。ただし Next.js の高度な機能（Middleware の全機能、ISR の細粒度制御）に依存している場合はVercel に残るのが安全だ。

比較表（料金/無料枠/移行コスト/対応言語）

項目 Vercel Cloudflare Pages
無料枠 公式の料金ページで要確認 公式の料金ページで要確認
帯域幅課金 あり（プランによる） なし（無制限）
ビルド時間（無料） 公式の料金ページで要確認 公式の料金ページで要確認
同時ビルド数 1（無料プラン） 1（無料プラン）
エッジ関数 Vercel Edge Functions Cloudflare Workers
対応フレームワーク Next.js・Nuxt・SvelteKit 等 Next.js（一部制限）・Nuxt・SvelteKit・Astro 等
カスタムドメイン 無料プランで利用可 無料プランで利用可
プレビューデプロイ PR 単位で自動生成 PR 単位で自動生成
Node.js ランタイム フルサポート Workers ランタイム（Node.js 互換モード）
移行コスト — 低〜中（構成次第）

料金は頻繁に改定されるため、移行判断の前に必ず公式ページで最新値を確認すること。

移行手順

1. 現状の確認 

# package.json のビルドコマンドとフレームワークを確認
cat package.json | grep -E '"build"|"start"|"framework"'

# Vercel 固有の設定ファイルを洗い出す
ls vercel.json .vercelignore 2>/dev/null
Enter fullscreen mode Exit fullscreen mode

2. Cloudflare Pages プロジェクトの作成 

# Wrangler CLI をインストール
npm install -g wrangler

# Cloudflare アカウントにログイン
wrangler login

# Pages プロジェクトを作成（GitHub リポジトリと接続する場合はダッシュボードから）
wrangler pages project create my-app
Enter fullscreen mode Exit fullscreen mode

3. vercel.json の設定を _headers / _redirects に変換

Vercel のリダイレクト設定：

// vercel.json (移行前)
{
  "redirects": [
    { "source": "/old-path", "destination": "/new-path", "permanent": true }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [{ "key": "X-Content-Type-Options", "value": "nosniff" }]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Cloudflare Pages の同等設定：

# public/_redirects
/old-path /new-path 301
Enter fullscreen mode Exit fullscreen mode 
# public/_headers
/*
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
Enter fullscreen mode Exit fullscreen mode

4. 環境変数の移行 

# Vercel から環境変数一覧を取得（Vercel CLI が必要）
vercel env ls

# Cloudflare Pages に同じ変数を登録
wrangler pages secret put MY_SECRET_KEY
# または wrangler.toml に非シークレット変数を記載

# wrangler.toml の例
Enter fullscreen mode Exit fullscreen mode 
# wrangler.toml
name = "my-app"
compatibility_date = "2024-09-23"

[vars]
API_BASE_URL = "https://api.example.com"
NODE_ENV = "production"
Enter fullscreen mode Exit fullscreen mode

5. デプロイと動作確認 

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

# Cloudflare Pages へ手動デプロイ（CI 接続前の確認用）
wrangler pages deploy ./dist --project-name my-app

# カスタムドメインを設定後、DNS 切り替え
# Cloudflare ダッシュボード → Pages → Custom domains から設定
Enter fullscreen mode Exit fullscreen mode

6. Next.js を使っている場合の追加対応 

# @cloudflare/next-on-pages アダプターを追加
npm install -D @cloudflare/next-on-pages

# package.json のビルドコマンドを変更
# "build": "next build" → "build": "npx @cloudflare/next-on-pages"
Enter fullscreen mode Exit fullscreen mode 
# wrangler.toml に追記
pages_build_output_dir = ".vercel/output/static"
Enter fullscreen mode Exit fullscreen mode

向き不向き

Cloudflare Pages が向いているケース

  • 静的サイト・JAMstack 構成：Hugo、Astro、Eleventy など、ビルド成果物がほぼ静的なプロジェクト
  • 帯域幅が多いサービス：画像・動画を大量配信し転送量の課金を避けたいケース
  • Workers との連携が前提：エッジでのキャッシュ制御や A/B テストを Cloudflare Workers で統合したい場合
  • 個人・小規模チーム：無料枠の制約内でグローバル配信を実現したいとき
  • Cloudflare DNS をすでに使っている：ドメイン管理を一元化でき、設定変更の伝播が速い

Vercel が向いているケース

  • Next.js の App Router をフル活用：Server Actions、Partial Prerendering、ISR の細粒度制御など Vercel 最適化機能に依存しているプロジェクト
  • プレビュー環境を PR ごとに細かく制御したい：Vercel のデプロイコメントや保護設定が業務フローに組み込まれているチーム
  • Node.js ネイティブ API を多用する SSR：fs、child_process など Workers ランタイムで動かない API を使っているアプリ
  • チームで DX を優先したい大規模組織：Vercel のダッシュボードや Analytics との統合が開発速度に直結している場合

移行を避けるべきケース

  • Vercel の Edge Middleware でリクエストの書き換え・認証を複雑に実装している（Workers に書き直すコストが高い）
  • next/image の最適化をサーバーサイドで多用している（Cloudflare Pages 側の対応状況を事前確認すること）
  • チームに Cloudflare の設定変更権限を持つメンバーがいない小規模組織（障害時の切り戻しリスクが上がる）

Top comments (0)