Cloudflare Workers vs Vercel 徹底比較｜初心者でも選べる完全ガイド

Cloudflare Workers vs Vercel 徹底比較｜初心者でも選べる完全ガイド

published: 2026/08/07 · updated: 2026/08/07

「サイトやAPIを公開したいけど、CloudflareとVercelどっちを使えばいいの？」

そんな疑問を抱えて検索してきた人に、この記事はズバリ答えます。

どちらも「コードを書いてデプロイするだけ、サーバー管理不要」を実現してくれる人気サービスですが、得意なこと・向いているユーザー・料金体系が大きく異なります。特に「エンジニア経験が浅い」「とにかく安く始めたい」「Next.jsやAIアプリを作りたい」という人は、選び方を間違えると後で後悔することも。

この記事では、公式情報をもとに以下を整理します。

  • 両サービスの仕組みと強みの違い
  • 無料プラン・有料プランの実際の制限と料金
  • 「どんなアプリ・どんな人」にどちらが向くか
  • 実際にデプロイするまでのコマンド例

読み終えたら「自分はこっちを使う」と決められる状態になるはずです。

---

そもそも何ができるサービスなのか

Cloudflare Workersとは

Cloudflare Workers エッジで動くサーバーレス実行環境。無料枠が広く、静的サイトからフルスタックアプリまで低コストで公開できる。 詳細 →

Cloudflare Workersは、Cloudflareが運営する世界規模のネットワーク上でコードを動かせるサービスです。JavaScriptやTypeScriptで書いた処理を「エッジ(ユーザーの近くにあるサーバー)」で実行します。

自宅に例えるなら「全国の郵便局に自分のスタッフを置いて、荷物が届いたらその場で仕分けしてもらう」イメージです。東京のユーザーには東京のサーバーが、大阪のユーザーには大阪のサーバーが対応するので、世界中どこからアクセスしてもレスポンスが速い。

<cite index="17-2">CloudflareのWorkersは、300以上のエッジ拠点に分散されたV8アイソレート上でコードを実行し、コールドスタートをほぼゼロに抑えます。</cite>（コールドスタート＝サーバーが「おやすみ状態」から起き上がるのにかかるもたつき時間のこと）

Cloudflare Workersの主な特徴

  • APIの処理、認証、リダイレクトなどの軽い処理に最強
  • JavaScriptとTypeScript、WebAssemblyに対応
  • KV(キーバリューストア)・D1(SQLiteベースのDB)・R2(ストレージ)など周辺ツールが充実
  • DNS・CDN・DDoS対策もCloudflareで一括管理できる

Vercelとは

Vercelは、フロントエンド（Webサイトの見た目・画面部分）のデプロイに特化したクラウドサービスです。特にReactベースのフレームワーク「Next.js」との相性が抜群で、<cite index="37-2">VercelはNext.jsフレームワークを自社で作成・メンテナンスしている企業です。</cite>

「GitHubにコードをプッシュするだけで自動でデプロイされる」体験は多くの開発者を魅了しており、個人ブログからスタートアップの本番サービスまで幅広く使われています。

Vercelの主な特徴

  • Next.jsアプリのデプロイが最もカンタン
  • GitHubと連携するだけで自動デプロイ
  • ISR（ページを定期的に自動更新する仕組み）などNext.js固有の機能がフル活用できる
  • フロントエンドに加えてサーバーサイド処理(Vercel Functions)も動かせる
  • 複数人でのチーム開発サポートが充実

---

仕組みの違い：なぜ速さとできることが変わるのか

<cite index="20-11,20-12,20-13">2つのサービスの核心的な違いは料金やマーケティングではなく、コードが実行される「ランタイム(実行環境)」にあります。そしてすべての違いはそこから派生します。</cite>

Cloudflare WorkersはV8アイソレートを採用

<cite index="21-8,21-9">各WorkerはChromeと同じサンドボックス技術であるV8アイソレート内で動作します。このアーキテクチャにより、Cloudflareは1台のサーバー上で何千ものWorker関数を、従来のサーバーレスコンテナのような起動時間のペナルティなしに実行できます。</cite>

<cite index="21-11">Cloudflare Workersのコールドスタートはグローバルで通常5ms以下であるのに対し、Node.jsベースのサーバーレス関数では200〜800ms以上かかることがあります。</cite>

Vercelは柔軟なランタイムを採用

<cite index="20-14">Vercelはバックエンドを主に2つのモードで実行します。従来のNode.jsサーバーレス関数と、軽量なEdgeランタイムです。</cite>

<cite index="16-1">VercelのFluid ComputeはNode.js・Python・Edge・Bun・Rustのランタイムをサポートします。</cite>一方、<cite index="16-2">Cloudflare WorkersはJavaScript/TypeScriptとWebAssemblyで動作し、Pythonバックエンドを使うにはWasmへのコンパイルが必要か、プラットフォームの変更が必要です。</cite>

要するにこういうことです：

  • Cloudflare Workers → 速い・軽い・世界中で均一な速度。ただしNode.jsの全ライブラリは使えない
  • Vercel → Node.jsがそのまま動く・npm ライブラリも使いやすい・Next.jsとの相性が最高

<cite index="20-1,20-2,20-3">VercelのNodeランタイムはこうした制約がなく、通常のNodeプロセスを前提としたパッケージもほぼそのまま動作します。これはエッジランタイムを念頭に書かれていないライブラリを使う場合の大きなメリットです。</cite>

---

料金の比較：実際いくらかかるのか

料金は頻繁に変わる可能性があります。以下はリサーチ時点の情報ですが、必ず公式サイトでご確認ください。

Cloudflare Workersの料金

<cite index="6-2">Workers有料プランには、Workers・Pages Functions・Workers KV・Hyperdrive・Durable Objectsの利用が含まれ、月額最低5ドルから始まります。</cite>

<cite index="25-3">無料プランでは1日あたり10万リクエストが利用できます。</cite><cite index="24-4">クレジットカード不要で、商用利用も可能です。</cite>

課金の仕組みに特徴があります。<cite index="1-6,1-7,1-8">Cloudflareはリクエスト数や経過時間ではなく、CPU時間(実際に計算が走っている時間)に対して課金します。I/O待ち（APIや外部DBへのリクエスト待ち）が多い処理では、実質的にコストが安くなります。</cite>

<cite index="28-5">無料プランで使えるサービスの概要は以下の通りです（制限あり）：Workers（1日10万リクエスト）・KV（1GBストレージ・1日10万読み書き）・D1 データベース（5GB・月500万読み書き）・R2ストレージ（10GB・月100万オペレーション）・Workers AI（1日1万推論）など。</cite>

Vercelの料金

<cite index="13-1">Vercelの料金プランは3段階：Hobby（無料）・Pro（月額20ドル/ユーザー）・Enterprise（カスタム）です。</cite>

<cite index="35-5">Hobbyプランは個人・非商用利用に限定されています。</cite>商用利用にはProプランへのアップグレードが必要です。

<cite index="33-12">HobbyプランにはVercel Functions・Middleware・画像最適化などの基本リソースと、100GBのFast Data Transferが含まれます。</cite>

<cite index="33-1,33-2">すべてのプランで使用量が上限に近づくと通知が届きます。Hobbyプランは無料枠を超えるとデプロイが一時停止されます。</cite>

<cite index="11-20">Vercelはハイブリッドな料金モデルを採用しており、固定の月額料金に加え、含まれる制限を超えた場合に追加料金が発生します。</cite>

料金早見表

項目Cloudflare WorkersVercel
無料プランあり（商用OK）あり（非商用のみ）
有料プラン最低額月$5〜月$20/ユーザー〜
無料枠のリクエスト1日10万月100万関数実行（Hobby）
無料枠の転送量記載なし（公式参照）100GB/月（Hobby）
課金の単位CPU時間・リクエスト数CPU時間・メモリ・転送量など
商用利用（無料）✅ 可❌ 不可

※料金は変更される場合があります。最新情報はCloudflare公式・Vercel公式でご確認ください。

---

機能・開発体験の比較

フロントエンド開発（Next.js・Reactアプリ）

<cite index="17-6">VercelはNext.jsアプリのデプロイにおけるゴールドスタンダードであり、ISR・Edge Middleware・Server ActionsといったフルセットのNext.js機能に最適化されたプラットフォームです。</cite>

一方、CloudflareでもNext.jsは動かせますが、<cite index="16-4">ISR・オンデマンド再検証・Fluid特有の動作はVercelのインフラを前提としており、OpenNextというアダプターが対応しているものの、新しいNext.jsの機能に追随し続けるのが難しい状況です。</cite>

→ Next.jsアプリはVercel一択に近い。

APIサーバー・バックエンド処理

<cite index="17-5">Cloudflare Workersは、レイテンシ重視のワークロード・APIミドルウェア・認証・エッジリダイレクト・A/Bテスト、またCloudflareエコシステム内でDNS・CDN・コンピュートをまとめて管理したいチームに最適です。</cite>

APIエンドポイントを世界中のユーザーに高速に提供したい場合、Cloudflare Workersのエッジ実行は圧倒的に有利です。

データ永続化（DBやストレージ）

Cloudflare Workers周辺には、同じエコシステムで使えるストレージが揃っています。

  • D1：SQLite互換のサーバーレスDB（スプレッドシートの代わりに使えるデータベース）
  • KV：シンプルなキーバリューストア（Excelのような辞書型のデータ保存）
  • R2：S3互換のオブジェクトストレージ（ファイルを保存する場所）。<cite index="25-16">エグレス（データ転送）費用がゼロという大きなメリットがある。</cite>
  • Durable Objects：リアルタイム・WebSocketなど状態管理が必要な処理向け

Vercelはデータベースを直接提供せず、外部のDB（PlanetScaleやSupabase等）と組み合わせるスタイルが一般的です。

ロックイン（乗り換えのしやすさ）のリスク

<cite index="16-6,16-7,16-8">Cloudflareのロックインはストレージに関連します。R2はS3互換・D1はSQLiteなのでデータは移植可能ですが、Durable Objectsで作った状態管理パターンにはどこにも移植できる相当品がありません。</cite>

<cite index="16-3,16-4,16-5">Vercelのロックインはフレームワークに関連します。ISR・オンデマンド再検証・Fluid特有の動作はVercelインフラを前提としており、本番Next.jsアプリをVercelから移行するにはすべての機能をアダプターマトリクスでテストする必要があります。</cite>

機能比較表

機能Cloudflare WorkersVercel
Next.js最適化△（OpenNext経由で対応）◎（公式サポート）
コールドスタート◎ほぼゼロ（5ms以下）△（Node.js関数は200ms〜）
エッジ展開拠点数◎ 300拠点以上○（グローバル展開）
Node.js互換性△（制限あり）◎（フル対応）
統合DB・ストレージ◎（D1・KV・R2など）△（外部サービス推奨）
チーム開発機能△◎
無料商用利用✅❌
料金の予測しやすさ○（$5固定+使用量）△（複数指標で変動）

---

実際にデプロイしてみる

Cloudflare Workersへのデプロイ手順

前提条件

  • Node.jsがインストールされていること（node -v でバージョンが表示されればOK）
  • Cloudflareのアカウントを作成済み（cloudflare.com で無料登録）

Step 1: Wranglerをインストールする

Wrangler（ラングラー）はCloudflare Workers専用のコマンドラインツールです。

npm install -g wrangler

Step 2: ログインする

wrangler login

ブラウザが開いてCloudflareのログイン画面が表示されます。

Step 3: 新しいWorkerプロジェクトを作成する

npm create cloudflare@latest my-first-worker

質問に答えると雛形が作成されます。「Hello Worker!」を返すサンプルコードが入っています。

Step 4: ローカルで動作確認する

cd my-first-worker
npm run dev

http://localhost:8787 にアクセスすると動作を確認できます。

Step 5: 本番環境へデプロイする

npm run deploy

これだけで *.workers.dev のURLが発行され、世界中からアクセス可能になります。

---

Vercelへのデプロイ手順

前提条件

  • Node.jsがインストールされていること
  • GitHubアカウントを持っていること
  • Vercelのアカウントを作成済み（vercel.com でGitHubアカウントと連携して登録）

Step 1: Vercel CLIをインストールする

npm install -g vercel

Step 2: プロジェクトを作成してデプロイする

既存のプロジェクトフォルダに移動して、以下を実行するだけです。

cd my-next-app
vercel

質問に答えると自動でデプロイされ、URLが発行されます。

GitHubと連携する場合（推奨）

Vercelダッシュボードで「New Project」→ GitHubリポジトリを選択 → 「Deploy」ボタンを押すだけ。以後はGitHubにpushするたびに自動でデプロイされます。

# コードを修正してGitHubにpushするだけで自動デプロイ
git add .
git commit -m "update"
git push origin main

---

どんな人にどちらが向くか

Cloudflare Workersが向いている人

✅ こんな人におすすめ

  • 個人開発でAPIサーバーを作りたい（無料で商用利用したい）
  • とにかくレスポンス速度を重視したい
  • AIアプリのバックエンドAPIを安くホストしたい
  • 世界中のユーザーに均一なレスポンス速度を提供したい
  • DNS・CDN・セキュリティもまとめてCloudflareで管理したい
  • Flowise や OpenHands などAIツールと連携するAPIを公開したい

❌ こんな人には向かない

  • Next.jsの最新機能（ISR・Server Actionsなど）をフルに使いたい
  • PythonのnumpyやOpenCVなど、Node.js以外の重いライブラリを使いたい
  • 長時間（数分以上）かかるバッチ処理を動かしたい
  • チームで本格的な開発・レビューをしたい

Vercelが向いている人

✅ こんな人におすすめ

  • Next.jsでWebアプリを作っている・作る予定がある
  • GitHubと連携して「コードを書いたらすぐ公開」を手軽に実現したい
  • shadcn/ui を使ったフロントエンドを素早く公開したい
  • Gradio や Streamlit では物足りず、本格的なNext.js UIを作りたい
  • チームで開発しており、プレビューデプロイ（PRごとに確認用URLが発行される機能）を使いたい

❌ こんな人には向かない

  • 商用サービスをタダで動かし続けたい（HobbyはPR個人/非商用限定）
  • 大量のAPIリクエストを低コストでさばきたい
  • Python重視のバックエンドを動かしたい
  • コスト予測を厳密に管理したい（複数の使用量指標でコストが変動するため）

組み合わせて使うという選択肢

実は「どちらか一方」に縛る必要はありません。たとえば：

  • フロントエンド（Next.jsサイト）→ Vercelでデプロイ
  • APIエンドポイント・認証処理 → Cloudflare Workersで実行

という組み合わせも実用的な選択肢です。Codex CLI や Gemini CLI などAIコーディングツールを使って開発する場合も、役割を分けることで両方の強みを活かせます。

Vercel Next.jsを開発するVercel社のホスティングプラットフォーム。フロントエンドのデプロイ体験とAI SDKで支持を集める。 詳細 →

---

よくある質問

Q1. 個人の副業・商用サービスを無料で始めるならどちら？

A. Cloudflare Workers一択です。

<cite index="35-5">VercelのHobbyプランは個人・非商用利用に限定されています。</cite>つまり、お金が発生するサービスにHobbyプランを使うことはVercelの利用規約上NGです。一方、Cloudflare Workersの無料プランは商用利用が許可されており、<cite index="24-4">クレジットカード不要・期限なし・商用利用OKで利用できます。</cite>副業でAPIを公開したい場合は、まずCloudflare Workersの無料枠で始めるのが賢明です。

Q2. Next.jsアプリを作るなら絶対Vercel？Cloudflareでも動く？

A. Next.jsならVercelが断然ラクです。Cloudflareでも動かせますが追加の設定が必要です。

<cite index="16-4">ISRやオンデマンド再検証などVercel固有の機能はOpenNextというアダプター経由でCloudflare Workersでも動作しますが、新しいNext.js機能への対応が遅れることがあります。</cite>初心者にはVercelでNext.jsを動かすほうが圧倒的にハマりにくくおすすめです。screenshot-to-codeなどのフロントエンドAIツールで生成したコードをそのまま公開したい場合もVercelが最適です。

Q3. 無料プランの上限を超えたらどうなる？

A. 両サービスで動作が異なります。

Cloudflare Workersの無料プランは<cite index="25-3,25-4">1日10万リクエストで、UTC 00:00にリセットされます。</cite>上限を超えるとその日のリクエストはエラーになりますが、翌日にリセットされます。

VercelのHobbyプランは<cite index="33-2">無料枠を超えるとデプロイが一時停止されます。</cite>また<cite index="35-2">Hobbyプランの多くの機能では、上限を超えると30日経過するまで再利用できません。</cite>突然サービスが止まるリスクがある点には注意が必要です。

Q4. AIアプリのバックエンドAPIを作るならどちらが向いてる？

A. 軽いAPIならCloudflare Workers、Next.jsフロントエンドと一体化させるならVercelです。

Cloudflare Workersは<cite index="5-1,5-2">Workers AIという機能があり、無料で1日1万Neuron（AI推論の単位）まで利用できます。</cite>外部AIのAPIを呼び出すだけのシンプルなAPIエンドポイントなら、Cloudflare Workersの無料枠で十分に賄える場合があります。OpenCodeなど最新AIコーディングツールと組み合わせてAPIを作る際にも活躍します。一方、LibreChat のようなAIチャットUIをフロントエンドごとデプロイするならVercelとの組み合わせも選択肢です。

---

まとめ：あなたの次のアクション

2つのサービスの違いを整理すると、シンプルにこう言えます。

> 「APIを安く速く動かしたい→Cloudflare Workers」 > 「Next.jsサイトをサッと公開したい→Vercel」

迷ったときのチェックリストはこちら：

  • [ ] 商用サービスを無料で始めたい → Cloudflare Workers
  • [ ] Next.jsを使っている・使う予定 → Vercel
  • [ ] 世界中のユーザーへ低レイテンシでAPIを届けたい → Cloudflare Workers
  • [ ] GitHubと連携してボタン1つでデプロイしたい → Vercel
  • [ ] PythonやNode.jsの豊富なライブラリを使いたい → Vercel
  • [ ] DNS・CDN・セキュリティもまとめて管理したい → Cloudflare Workers

次のアクション：

  1. Cloudflare Workersを試す → developers.cloudflare.com/workers でアカウント作成、npm create cloudflare@latest で5分でHello Worldを動かせます
  2. Vercelを試す → vercel.com でGitHubアカウントと連携、既存のNext.jsリポジトリを選ぶだけでデプロイできます
  3. AIでコードを書いてデプロイする → Awesome CursorRules などのツールを活用してコード生成を効率化しましょう

どちらも無料で始められます。まずは手を動かして、実際の使い心地を確かめてみてください。

Cloudflare Workers エッジで動くサーバーレス実行環境。無料枠が広く、静的サイトからフルスタックアプリまで低コストで公開できる。 詳細 →