スシロー

Posted on Jun 29

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

#saas #devops #tutorial #webdev

結論（おすすめ1つ）

移行先は Cloudflare Pages を推奨する。

Vercel は Next.js との親和性が高い反面、無料枠の帯域・ビルド制限がチームの成長とともに早期に上限へ達しやすい。Cloudflare Pages は無料枠の帯域が実質無制限（Workers リクエスト数は別途要確認）であり、グローバル CDN の拠点数でも優位に立つ。さらに Cloudflare Workers / D1 / R2 との統合により、API レイヤーも同一プラットフォームに集約でき、長期的な運用コストが下がりやすい。

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

項目	Vercel	Cloudflare Pages
無料枠帯域	100 GB/月	実質無制限（公式の料金ページで要確認）
無料枠ビルド	6,000 分/月	500 回/月
有料プラン料金	公式の料金ページで要確認	公式の料金ページで要確認
移行コスト	基準	低〜中（Next.js は要アダプタ）
ランタイム	Node.js / Edge Runtime	Cloudflare Workers Runtime（WinterCG 準拠）
サーバーレス関数	Vercel Functions（Node, Python, Go 等）	Cloudflare Workers（Node.js 完全互換ではない）
Next.js サポート	ネイティブ（ISR / PPR 完全対応）	`@cloudflare/next-on-pages` 経由（一部制約あり）
画像最適化	組み込み	Cloudflare Images（別サービス）または自前実装

数値は変更されることがあるため、最新情報は各公式の料金ページで必ず確認すること。

移行手順

1. Wrangler CLI のセットアップ

npm install -g wrangler
wrangler login

2. ビルド設定の確認

Cloudflare Dashboard → Pages → "Create a project" → GitHub リポジトリを選択し、以下を参考に設定する。

# [React](https://www.amazon.co.jp/s?k=React%20%E5%85%A5%E9%96%80%20%E6%9C%AC&tag=1280itsuya22-22) / Vite の場合
Build command:          npm run build
Build output directory: dist

# Next.js の場合（@cloudflare/next-on-pages 使用）
Build command:          npx @cloudflare/next-on-pages
Build output directory: .vercel/output/static

3. Next.js アダプタの導入（Next.js プロジェクトのみ）

npm install -D @cloudflare/next-on-pages

サーバーレス関数は Edge Runtime を明示しなければ動作しない。既存の API Route を以下のように修正する。

// app/api/hello/route.js
export const runtime = 'edge';   // この行が必須

export async function GET() {
  return new Response('Hello from Edge');
}

fs や child_process など Node.js ネイティブ API を使っている箇所は個別に代替実装が必要なため、移行前に依存ライブラリを洗い出すこと。

4. 環境変数の移行

Vercel Dashboard に登録していた環境変数を Cloudflare Pages の設定画面へ手動で移植する。シークレット類は CLI からも設定できる。

wrangler pages secret put MY_API_KEY
# プロンプトで値を入力（ターミナル履歴に残らない）

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

1. Cloudflare Dashboard → Pages → Custom domains → [ドメイン](https://px.a8.net/svt/ejp?a8mat=4B3XB4+4VMW8I+50+2HU3GX)を追加
2. DNS を Cloudflare へ委譲（すでに Cloudflare DNS 管理下なら自動適用）
3. Vercel 側のドメイン設定を削除してトラフィックを切り替え

TTL の関係で反映に最大数時間かかる。切り替え直後は Vercel 側をすぐ削除せず、ヘルスチェック後に外すと安全。

6. ローカルでのエッジ環境確認

npx wrangler pages dev .vercel/output/static
# http://localhost:8788 でエッジ相当の動作を確認できる

向き不向き

Cloudflare Pages が向くケース

グローバルユーザーを持つ静的・JAMstack サイト：CDN 拠点数が多く低レイテンシを実現しやすい
Cloudflare Workers / D1 / R2 を組み合わせたいチーム：同一プラットフォームでフルスタックが完結する
帯域コストを抑えたい個人開発者・小規模スタートアップ：無料枠の帯域制限が緩く長期運用しやすい
SPA や純粋な静的サイト：ビルド設定を変えるだけで移行がほぼ完了する

Cloudflare Pages を避けるべきケース

Next.js の ISR や PPR をフル活用しているプロジェクト：アダプタ経由での対応に制約があり、動作しない機能が存在する。移行前に公式の互換性マトリクスを必ず確認すること
Node.js ネイティブ API（fs・child_process 等）に強く依存したサーバーレス関数：Workers Runtime は完全互換ではなく、移植コストが移行メリットを上回るケースがある
Vercel の AI SDK・Analytics・Speed Insights などエコシステムを深く利用しているチーム：代替実装の調査・実装工数が発生するため、費用対効果を事前に見積もること
プレビュー URL を大量生成するレビューフロー：Vercel の Preview Deployments と挙動が異なる部分があるため、CI/CD パイプラインとの統合を事前に検証すること

DEV Community