DEV Community

スシロー
スシロー

Posted on

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

#saas #devops #tutorial #webdev

結論（おすすめ1つ）

個人開発・スタートアップには Cloudflare Pages への移行を推奨する。
無料枠の帯域制限がなく、グローバル CDN のレイテンシが優秀で、Workers との統合によりエッジロジックをシンプルに書ける。Next.js の App Router や ISR に深く依存している場合は Vercel のまま留まるのが合理的だが、フレームワーク非依存のプロジェクトであれば移行コストに見合うリターンが得られる。

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

項目 Vercel Cloudflare Pages
無料枠の帯域 制限あり（公式の料金ページで要確認） 無制限（商用利用も可）
無料枠のビルド数 月次制限あり（公式の料金ページで要確認） 月 500 ビルド（公式の料金ページで要確認）
有料プランの開始価格 ユーザー単価課金（公式の料金ページで要確認） サイト数・帯域ベース（公式の料金ページで要確認）
エッジ関数 Edge Functions（Node.js ランタイム互換） Cloudflare Workers（V8 isolate、冷起動なし）
Next.js サポート ネイティブ（ISR・App Router 完全対応） 部分対応（ISR 非対応、SSR は Workers 経由）
Astro / Remix / SvelteKit 対応 対応
移行コスト ― 低〜中（設定ファイル書き換えが主）
カスタムドメイン 無料枠で使用可 無料枠で使用可
プレビューデプロイ PR ごとに自動生成 PR ごとに自動生成
アナリティクス 有料オプション Web Analytics が無料で利用可

移行手順

1. リポジトリを Cloudflare Pages に接続する

Cloudflare ダッシュボード → Workers & Pages → Create application → Pages → Connect to Git でリポジトリを選択する。

2. ビルド設定を確認する

フレームワークごとのデフォルト設定はほぼ自動検出されるが、明示的に指定したい場合は以下を入力する。

Build command:   npm run build
Build output:   dist    # または out / .next/static など
Root directory: /       # モノレポの場合はサブディレクトリを指定
Enter fullscreen mode Exit fullscreen mode

3. 環境変数を移行する

Vercel のダッシュボードから .env 形式でエクスポートし、Cloudflare Pages の Settings → Environment variables にインポートする。

# Vercel CLI でエクスポート（要 @vercel/cli）
vercel env pull .env.production
Enter fullscreen mode Exit fullscreen mode

その後 Cloudflare ダッシュボードで同じ変数を手動または wrangler 経由で登録する。

# wrangler を使う場合
npx wrangler pages project list
npx wrangler pages secret put MY_SECRET_KEY
Enter fullscreen mode Exit fullscreen mode

4. API Routes / Serverless Functions を Workers に置き換える

Vercel の /api/*.ts に相当する処理は、Cloudflare Pages Functions として functions/ ディレクトリに配置する。

// functions/api/hello.ts
export const onRequest: PagesFunction = async (context) => {
  return new Response(JSON.stringify({ message: "hello" }), {
    headers: { "Content-Type": "application/json" },
  });
};
Enter fullscreen mode Exit fullscreen mode

Node.js 固有の API（fs、path など）は V8 isolate では動かないため、代替 API（crypto.subtle 等）への書き換えが必要になる場合がある。

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

# DNS レコードの変更例（ドメインレジストラ側）
CNAME  www   <project>.pages.dev
Enter fullscreen mode Exit fullscreen mode

Cloudflare にドメインを移管している場合は、ダッシュボードから 1 クリックで設定できる。Vercel 側のドメイン設定を削除するのは DNS 伝播完了後にすること。

6. 動作確認 

# プレビュー URL でのスモークテスト
curl -I https://<branch>.<project>.pages.dev/api/hello
Enter fullscreen mode Exit fullscreen mode

向き不向き

Cloudflare Pages が向くケース

  • 帯域コストを抑えたい個人・スタートアップ: 無制限帯域は大きなアドバンテージになる
  • フレームワーク非依存のプロジェクト: Astro、SvelteKit、静的サイトは移行摩擦が少ない
  • エッジで低レイテンシを実現したいチーム: Workers の冷起動ゼロはリアルタイム系に有利
  • すでに Cloudflare の DNS・WAF を使っているチーム: 同一プラットフォームで完結する

Cloudflare Pages を避けるべきケース

  • Next.js の ISR や App Router の Dynamic Rendering に依存している: 現時点では Vercel のネイティブサポートに追いついていない
  • Node.js ランタイムを前提にした API が多数ある: V8 isolate への移植コストが高くなる
  • Vercel の Preview Comments や Checks インテグレーションを活用している: 同等機能は Cloudflare には存在しない

Vercel のままが合理的なケース

  • Next.js を中心としたチームで、ISR・Server Actions・Partial Prerendering を積極活用している
  • Vercel の DX（プレビューコメント、ログ UI、Speed Insights）をチームのワークフローに組み込んでいる

移行の最大の落とし穴は Node.js 依存のサーバーロジック と ISR の有無 の 2 点に集約される。事前にこの 2 点を棚卸しするだけで、移行可否の判断は 1 時間以内に下せる。

Top comments (0)