DEV Community

スシロー
スシロー

Posted on

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

#saas #devops #tutorial #webdev

結論（おすすめ1つ）

移行先として Cloudflare Pages を推奨する。

帯域無制限の無料枠と CDN のグローバル到達速度が Vercel Free プランの制約を実運用で上回ることが多い。ただし Next.js の ISR や Vercel 独自のサーバレス関数を多用している場合は移行コストが高くつくため、Next.js 依存度を先に棚卸しすること。静的ビルド主体・あるいは Remix/Astro/SvelteKit を使うプロジェクトは乗り換え効果が最大になる。

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

項目 Vercel Cloudflare Pages
無料枠の帯域 制限あり（月間上限あり） 実質無制限（公式ページで要確認）
無料ビルド数 制限あり 月 500 ビルドまで（要確認）
Pro プラン料金 公式の料金ページで要確認 公式の料金ページで要確認
エッジランタイム V8 Isolates (Edge Functions) V8 Isolates (Workers Runtime)
サーバレス関数 Node.js / Python / Go 等 Workers のみ（Node.js 互換モードあり）
対応フレームワーク Next.js 最優先、他も対応 Next.js は要 Adapter、他は良好
ISR サポート ネイティブ 非対応（KV で代替可能）
カスタムドメイン 無料で設定可 無料で設定可
移行コスト（静的サイト） 低 ←
移行コスト（Next.js App Router） 中〜高 ←

移行手順

1. 前提確認 

# Node.js と wrangler をインストール（未導入の場合）
npm install -g wrangler

# ログイン
wrangler login
Enter fullscreen mode Exit fullscreen mode

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

# 既存リポジトリのルートで実行
npm create cloudflare@latest -- --type pages
Enter fullscreen mode Exit fullscreen mode

Git 連携を選択すると GitHub / GitLab からの自動デプロイが設定される。Vercel と同様に PR ごとのプレビューURLが発行される。

3. ビルド設定を合わせる

Vercel の vercel.json に書いていたビルドコマンドを Cloudflare Pages のダッシュボード（または wrangler.toml）へ転記する。

# wrangler.toml（Pages Functions を使う場合）
name = "my-app"
compatibility_date = "2024-09-23"
compatibility_flags = ["nodejs_compat"]

[site]
bucket = "./dist"
Enter fullscreen mode Exit fullscreen mode 
# ビルドコマンド例（SvelteKit / Astro 等）
# Build command: npm run build
# Output directory: dist  (フレームワークごとに異なる)
Enter fullscreen mode Exit fullscreen mode

4. Next.js の場合は Adapter を追加 

npm install --save-dev @cloudflare/next-on-pages
npx @cloudflare/next-on-pages
Enter fullscreen mode Exit fullscreen mode 
// package.json に追加
{
  "scripts": {
    "pages:build": "npx @cloudflare/next-on-pages",
    "preview": "wrangler pages dev .vercel/output/static"
  }
}
Enter fullscreen mode Exit fullscreen mode

注意: next/image の最適化・ISR・Route Handlers の一部は Workers 環境で動作しないことがある。next.config.js の output: 'standalone' は不要になり、代わりに edge ランタイム指定を関数ごとに確認する。

5. 環境変数を移行

Vercel ダッシュボードの Environment Variables をエクスポートし、Cloudflare Pages の Settings > Environment Variables へ転記する。シークレットは以下で CLI から設定できる。

wrangler pages secret put SECRET_KEY
Enter fullscreen mode Exit fullscreen mode

6. カスタムドメインを切り替える 

1. Cloudflare Pages のダッシュボード → Custom Domains → [ドメイン](https://px.a8.net/svt/ejp?a8mat=4B3XB4+4VMW8I+50+2HU3GX)追加
2. DNS レコードを Cloudflare に移管（または CNAME を向け直す）
3. Vercel 側のドメインを削除
4. TTL 伝播を待って動作確認（5〜30 分程度）
Enter fullscreen mode Exit fullscreen mode

7. 動作確認 

# ローカルで Pages 環境を再現してテスト
wrangler pages dev ./dist --compatibility-flags nodejs_compat
Enter fullscreen mode Exit fullscreen mode

向き不向き

Cloudflare Pages が向くケース

  • 静的サイト・JAMstack 構成（Astro / SvelteKit / Nuxt static / Hugo など）
  • 帯域コストを抑えたいチーム：無料枠の上限に悩んでいるスタートアップや個人開発者
  • グローバルレイテンシを重視するプロダクト：Workers の PoP 数は多く、エッジでの処理が速い
  • Cloudflare の他サービス（R2・KV・D1・Durable Objects）と組み合わせる構成

Vercel を維持すべきケース

  • Next.js App Router + ISR を本番で多用している：Adapter は成熟してきたが、エッジ非対応 API が残る
  • Vercel AI SDK や OG Image 生成など Vercel 固有の機能を使っている
  • チームが Next.js のサポートを Vercel に求めている（商用サポート契約込みの場合）
  • デプロイパイプラインが Vercel の Preview / Comment 機能に強く依存している

避けるべきケース（Cloudflare Pages）

  • Node.js のネイティブモジュール（fs、child_process 等）をエッジ関数内で直接使う構成：Workers は Node.js 互換モードを持つが完全ではない
  • 長時間実行が必要なバックグラウンドジョブ：Workers の CPU 時間制限に注意（公式ドキュメントで上限を確認すること）

Top comments (0)