作ったアプリをどこに置く？
デプロイ先3社比較

CHAPTER 1

そもそも「置き場所」って何のこと？

AIと一緒にアプリを作ると、まず自分のパソコンの中だけで動く状態ができあがります。この時点では、他の人は使えません。パソコンを閉じたら止まりますし、そもそも他人からは見えないからです。

これを「誰でもURLを開けば使える状態」にする作業が必要で、そのとき借りる場所が「置き場所」——専門用語でホスティングです。VercelもCloudflareも、この置き場所を貸してくれる会社です。

大事なのは、置き場所を変えても、作ったアプリの中身は基本的に同じだということです。後から引っ越すこともできます。ですから「一生の選択」ではありません。ただし引っ越しには手間がかかるので、最初に向き不向きを知っておくと得をします。

先に整理：WordPressとは別の話です

ここでいちばん混乱しやすいのがWordPressとの関係です。役割がまったく違うので、先に切り分けておきます。

WordPressは、VercelにもCloudflareにも置きません。WordPressはPHPという言語とデータベースが動く環境を必要とし、VercelもCloudflare Workersも主にJavaScript系のプログラムを動かす場所だからです。WordPressを使うなら、エックスサーバーやConoHaのようなレンタルサーバーが普通の選択になります。

この教材でいちばん大事な言葉：「サーバー側の処理」

この先、「サーバー側で何が動くか」という言い方が何度も出てきます。置き場所の判断は、最終的にすべてここで決まります。逆にここが分からないままだと、最後まで読んでも自分のケースを判断できません。先に押さえてください。

Webページには、仕事をする場所が2つあります。

なお、昔ながらの「1台まるごと借りて月額固定」とも違います（WordPressを置くレンタルサーバーはその形です）。VercelやCloudflareは必要なときだけ動く場所を使い、動いた分だけ払う仕組みです。

だから「サーバー側の処理が増える＝費用がかかる」「ブラウザ側で完結する＝相手の端末が働くのでこちらは0円」という話になります。静的な配信が無料・無制限なのも、ファイルを渡すだけで借りているコンピューターが何も計算していないからです。

「サーバー側の処理があるか」の見分け方

次のどれかに当てはまれば、たいていサーバー側の処理があります。

• ログインがある
• フォームの内容が届く・保存される（問い合わせ、予約、申し込み）
• 管理画面から中身を書き換える
• AIのAPIを呼ぶ（チャットボットなど）
• 決済がある
• 人によって表示が変わる（自分の注文履歴、会員限定ページなど）

ひとつも当てはまらないなら、そのページはただ表示されているだけ——つまり「サーバー側の処理がほぼない」状態です。

いちばん多い質問：問い合わせフォームはどっち？

答えは「送信先が自分か、外部か」で変わります。フォームがあるかどうかでは決まりません。

CHAPTER 2

2つの正体をひとことで

Vercel＝「Next.jsの開発元がやっている置き場所」

Next.js（ネクストジェイエス）は、Webアプリを作るときによく使われる道具（フレームワーク）です。Claude Codeに「Webアプリ作って」と頼むと、かなりの確率でこれが使われます。

Vercelは、そのNext.jsを作っている会社そのものが運営している置き場所です。だから相性がいいのは当たり前で、「作ったものをそのまま置ける」体験が一番なめらかです。

Cloudflare Workers＝「世界中の通信の入口にプログラムを置く仕組み」

Cloudflareはもともと、世界中にある通信の中継地点を持っている会社です（ネットの高速道路のサービスエリアのような設備を、世界各地に持っているイメージ）。

Workersは、その各地の中継地点そのものに、あなたのプログラムを置けるという仕組みです。利用者に物理的に近い場所で動くので反応が速く、通信設備を自前で持っているぶんデータを送り出す料金がかかりません。ここが最大の個性です。

※3つ目のNetlifyは、この2つの性格が分かってからのほうが理解しやすいので、第8章で扱います。位置としてはVercel側（作りやすさを売る大家さん）です。

CHAPTER 3

料金の実際（2026年8月時点）

いちばんの落とし穴：Vercelの無料プランは仕事に使えない

Vercelの無料プラン（Hobbyプラン）は、公式の規約で「非商用・個人利用のみ」と明記されています。つまり——

• 自社の業務で使う社内ツール → 商用にあたるので対象外
• 顧客に納品するチャットボット → 当然、対象外
• 自分の趣味の実験、勉強用のお試し → これはOK

「まず無料で始めて、うまくいったらお金を払おう」という発想が通用しません。会社の仕事に使うと決めた時点で、月20ドルが確定します。ここは割り切って最初から予算に入れておくのが正解です。

なぜ「社内アプリ」もダメなのか

いちばん誤解されるのがここです。「社外に公開しない社内ツールなら、商用ではないのでは？」と考えたくなります。

ですが規約は、そのアプリが何をしているかで判定していません。判定の基準はこの一文です。

FIG. 商用かどうかの判定基準

社内アプリは、この基準に二重で当てはまります。

• 会社の利益のために作っている（業務効率化＝コスト削減＝金銭的利益）
• 作った人が報酬をもらっている（社員の給料でも、外注費でも同じ）

つまり「決済機能がない」「広告を出していない」「社外に公開していない」は、どれも判定に関係しません。よく引用される「決済・広告・アフィリエイト」の一覧は、規約上「これらを含むがこれらに限らない」と書かれた例示であって、条件のすべてではないためです。

どうしても無料で通したいなら

Cloudflare Workersの無料プランには、商用利用そのものの制限はありません。ただし代わりに2つの条件があります。

• 後述するCPU 1回10ミリ秒の壁（第7章の落とし穴④。実際のアプリでは超えやすい）
• 無料プランで動かしているサイトで、クレジットカード情報を処理・収集してはいけない（規約に明記）。決済のあるサービスは無料枠では作れません

「社内ツールで、決済がなく、処理も軽い」——この条件にあてはまるなら、Cloudflareの無料枠を正当に使えます。

CHAPTER 4

お金の話で本当に大事なこと

金額の表を見ると「月5ドル vs 月20ドル、Cloudflareが4倍安い」と読みたくなります。でも実務では、そう単純になりません。理由が3つあります。

理由①　Vercelは「アプリの数」では増えない

Vercelの有料プランは置けるアプリの数が無制限です。顧客案件のチャットボットを10個作っても、置き場所の費用は月20ドル＋実際に使った分だけ。1件ずつ課金されるわけではありません。「案件が増えるほど差が開く」というイメージは正しくないのです。

理由②　AIの返事待ちは、昔ほど高くつかない

チャットボットの処理は、時間のほとんどが「AIに質問を投げて、答えが返ってくるのを待っている時間」です。ここが従来のサーバーだと丸ごと課金対象で、コストの読めなさの原因でした。

現在は「計算していた時間」と「場所を確保していた時間」を分けて数える仕組みになっていて、待ち時間の扱いが3社で違います。

昔のレンタルサーバーのように待ち時間がまるごと高くつくことはなくなりましたが、「待っている間はまったくの無料」ではありません。チャットボットのように待ち時間が長い作りを本格運用するときは、ここが効いてきます。

理由③　チャットボットで一番高いのは、置き場所ではない

顧客向けチャットボットを作ると、費用の内訳はだいたいこうなります。

FIG. 費用の内訳。悩むべきはどこか

月15ドルの差で何時間も比較検討するより、早く動くものを作って、AIの使い方を改善するほうが効きます。置き場所選びは「大きく間違えなければいい」程度の判断です。

CHAPTER 5

Vercelの強みが効く場面

Vercelの強みは、ひとことで言えば「作りやすさ」です。ただしここには、見落とされがちな条件がついています。

Next.jsを、ほぼ設定なしで置ける

Vercelの公式ドキュメントには、「Next.jsをVercelにデプロイするのは zero-configuration（設定不要）」と明記されています。Next.js自体をVercelが開発・保守しているので、当然といえば当然です。

Claude Codeが書くプログラムも、ごく標準的な形（Node.jsという一般的な実行環境向け）で出てきます。Vercelはこれをそのまま受け取れるので、置くまでの手数が少なくて済みます。

変更を「公開前に見る」仕組みが標準でついてくる

Vercelは、修正するたびに本番とは別の確認用URLを自動で発行します。本番に反映する前に「この変更、大丈夫か」を目で見て確かめられる仕組みです。顧客に納品したものを改修するときなど、「直したつもりが本番を壊した」を防げるので、慎重に進めたい場面では効きます。

CHAPTER 6

Cloudflareが向いている場面

Cloudflareが明確に有利なのは、次の4つのどれかに当てはまるときです。

① 「社員だけが使える」状態にしたい場合

社内ツール（在庫確認・申請・日報など）を、会社のGoogleやMicrosoftのアカウントでログインさせて、社員だけに絞りたい——このニーズには、CloudflareのAccessという機能が正面から応えます。「@自社ドメインのメールを持つ人だけ通す」といった条件を、プログラムを書かずに設定画面で作れます。

Vercelでも公開範囲を制限する仕組みはありますが、外部アカウントによるログイン限定は最上位プランが必要になります。社員限定の社内ツールを作るなら、ここは差が大きいところです。

② 顧客に「サーバー代はそちら持ちで」と請求する場合

月5ドルに近い固定額で、データを送り出す料金がかからないため、請求額が読めます。顧客に「毎月これくらいです」と説明しやすいのは実務上かなり大きいです。Vercelは月20ドル＋使った分なので、月によって変動し「今月なぜ高いの？」という説明が発生しえます。

③ 大きなファイルをたくさん配る場合

動画・画像・PDFなど重いファイルを多くの人にダウンロードさせる仕組みでは、通信料が主なコストになります。Workers（アプリを動かす場所）にもR2（ファイル置き場）にも、公式にデータの送り出しに対する課金がありません。ここは明確な差になります。

※これは今回扱っているWorkersとR2の話です。Cloudflareのすべてのサービスが同じというわけではなく、動画配信や画像配信の専用サービスは配信量に応じた料金がかかります。

ちなみにHTMLや画像のような「ただ置いてあるファイル」への閲覧リクエストは、無料プランでも有料プランでも「無料かつ無制限」と公式に明記されています。よく言われる「無料は1日10万リクエストまで」の制限は、サーバー側のプログラムが動いた回数にかかるもので、置いてあるファイルを配るだけのアクセスは対象外です。この教材ページ自身もCloudflareで配信されていますが、費用はかかっていません。

④ 小さな仕組みを何十個も量産する場合

「顧客ごとに小さな自動化を1つずつ持つ」ような使い方では、1日10万リクエストまでの無料枠が効きます。小さく・数が多い用途はCloudflareの土俵です。

CHAPTER 7

Cloudflareの落とし穴（正直に）

安くて速いなら全部Cloudflareでいいのでは、と思うところですが、非エンジニアが踏みやすい落とし穴があります。ここは正直に書きます。

落とし穴①　「普通のプログラム」が一部そのままでは動かない

Cloudflare Workersは、一般的な実行環境（Node.js）の一部だけを再現した特殊な環境です。公式ドキュメントにも「Node.jsの機能の一部（サブセット）を提供」と明記されています。

やっかいなのは、使えない機能でも「読み込みだけは成功して、実行すると失敗する」ものがある点です。動くように見えて、途中で止まります。原因の切り分けは、慣れていないとかなりきついです。

落とし穴②　Next.jsを載せるには「変換」が要る

Claude Codeがよく使うNext.jsをCloudflareで動かすには、OpenNext（オープンネクスト）という変換ツールを1枚はさむ必要があります。これは実際に広く使われている方法で、Next.js側の公式ブログでも紹介されている正規のやり方です。

ただし、Cloudflare自身の公式アダプタは2026年中に提供予定という段階で、この領域はまだ動いています。手順やバージョン対応が変わりやすいため、Vercelに置くのと比べると「調べる時間」が余分に必要です。

さらにCloudflareは公式ドキュメントで、手元で開発するときはNode.jsで動き、公開したあとはworkerdという別の実行環境で動くと説明しています。そのうえで「本番に近い確認をするには、専用のプレビュー用コマンドを使うこと」と案内しています。つまり手元と本番が違う環境であることは、Cloudflare公式が前提として認めている話です。

落とし穴③　「動かない原因」を調べるのが難しい

①②が重なると、エラーが出たときに何が原因か分からない状態になりやすくなります。AIに聞いても、Cloudflare特有の制約は情報が少なく、解決までの往復が増えます。

この「調べる時間」が、月15ドルの差より高くつく——これが、迷ったらVercelと言い切る理由です。

落とし穴④　無料枠は「軽い処理」しか入らない

もうひとつ、性能そのものの制約があります。Cloudflare Workersの無料プランは、1回の処理で使えるCPU時間が10ミリ秒までです。

この数字が厳しいことは、Cloudflare自身が同じページで書いています。平均的な処理は約2.2ミリ秒で収まる一方、「ログイン処理・画面の組み立て・大きなデータの読み込みを含む処理は10〜20ミリ秒を使う」と明記されているのです。

つまりふつうのWebアプリを作ると、公式の想定値の時点で無料枠を超えます。「Cloudflareは無料で使える」は、正確には「軽いAPIなら無料で使える」という意味だと理解しておいてください。月5ドルの有料プランを前提に考えるほうが実態に合います。

あわせて、1回の処理で使えるメモリも128MBです（Vercelは標準2GB、Proなら設定で4GBまで）。画像の加工や大きなファイルの処理は、ここで頭を打ちやすくなります。

CHAPTER 8

3つ目の選択肢：Netlify

置き場所を調べていると、3つ目の名前として必ず出てくるのがNetlify（ネットリファイ）です。売っているものはVercelに近く、「作ったものをGitに送るだけで公開できる体験」が主力です。Next.jsも設定なしで置けます。

ただし、この教材の判断軸——サーバー側で何が動くか——に載せると、Netlifyにはほかの2つと決定的に違う点があります。先にそこから書きます。

大前提：ネットで見かける数字は、ほとんど古い

Netlifyは2025年9月4日に、料金の仕組みそのものを作り替えました。公式ドキュメントに「2025年9月4日以降、すべての新規Netlifyアカウントは新しいクレジット制のプランを使う」と明記されています。それ以前に作られたアカウントは「レガシー（旧）プラン」という別体系のまま残っています。

日本語の解説記事でよく見る「無料で月100GBまで」「ビルド300分」「メンバー追加は1人19ドル」といった数字は、この旧プランの数字です（公式の旧プラン一覧に、そのまま載っています）。これから登録する人には当てはまりません。

新しい仕組み：クレジット制＝毎月配られる回数券

新プランでは「クレジット」という共通の点数が毎月配られ、やったことに応じて減っていきます。転送量・リクエスト数・処理時間をバラバラに数えるのをやめて、1本の点数にまとめた形です。

★判断軸に載せると：Netlifyは「表示するだけ」でもメーターが回る

ここがこの章の核心です。上の表をよく見てください。「リクエスト」と「データの送り出し」がクレジットを消費します。そして公式ドキュメントは、その中身をこう定義しています。

FIG. Netlifyが「リクエスト」と呼んでいるもの

つまりサーバー側で何も動いていないページ——第1章で「置いてあるファイルを配るだけ」と説明した状態でも、Netlifyでは見られた回数と送った量の両方が課金対象になります。

ここがCloudflareとの、いちばん大きな違いです。

使い切るとどうなる：サイトが止まる

ここは必ず知っておいてください。公式ドキュメントの表現はこうです。

FIG. クレジットを使い切ったときの挙動

さらに公式のFAQには「1つのサイトが上限を超えると、アカウント上のすべてのサイトが停止する」とも書かれています。有料プランなら自動チャージ（クレジットの自動追加）を有効にして止まらないようにできますが、無料プランには追加購入の手段がありません。翌月まで待つか、有料に上げるかの二択です。

無料プランを仕事に使えるか

Vercelでいちばんの落とし穴だった点（第3章）を、Netlifyでも確認しました。

Netlifyの利用規約（Self-Serve Subscription Agreement）を通して確認したところ、「非商用」「個人利用のみ」に当たる言葉は文書中に見当たりませんでした（2026年8月9日確認）。Vercelのような「無料プランは商用禁止」という条文は無い、というのが調べた結果です。

ただし、無料プランについて第6条にはこう書かれています。

FIG. Netlify無料プランの規約上の位置づけ

まとめると「規約で禁止されてはいないが、止められても文句を言えない前提」です。Vercelのように「使った時点で規約違反」ではないぶん健全ですが、会社の仕事で使うなら有料前提で考えるという結論は変わりません。

社員だけに見せたい場合

第6章でCloudflareの強みとして挙げた「社員だけに限定する」を、Netlifyでやる方法は3つあります。

Next.jsは、Vercelと同じく設定なしで置ける

ここはNetlifyの明確な強みです。公式ドキュメントに「Netlifyは主要なNext.jsの機能すべてを、設定なし（zero configuration）でサポートする」と明記されています。仕組みは、第7章でCloudflareの落とし穴として出てきたOpenNextという変換ツールですが、Netlify版はNetlify自身が作って保守しており、自動で最新版が使われます。

つまりCloudflareでは「自分で変換ツールを入れて、バージョン追従も自分で追う」作業が、Netlifyでは要りません。この一点においては、NetlifyはVercel側に立っています。

サーバー側の処理は、どこで・どれだけ動くか

第2章でVercelについて「関数は既定で米国東部の1リージョン」と書きましたが、Netlifyも同じ考え方です。3社のうち「最初から利用者に近い場所でサーバー側の処理が動く」のはCloudflareだけ、という整理になります。

結局、Netlifyはどこで効くのか

CHAPTER 9

やってはいけない「分離」

置き場所を調べていると、「画面はVercel、処理はCloudflare」と分ける構成を紹介する記事に出会います。かっこよく見えますし、実際にそうしている人もいます。

ただし、最初の何本かでは真似しないでください。非エンジニアが分離すると、ほぼ確実に次の3つで止まります。

分離が正解になるのは、アプリが十分に大きくなって、処理の部分だけ別に育てたくなったときです。それは「困ってから」でまったく遅くありません。

CHAPTER 10

3つの質問で決める

実際に迷ったときは、上から順に答えてください。

FIG. 置き場所の判断フロー

この図の外側にある4つ目の選択肢：Google Apps Script

ここまでの3社は「外に置く」という前提の話でした。ただし社員だけが使うAIツールなら、そもそも外に出さずにGoogle Workspaceの中で完結できます。Apps ScriptにはHTML Service（画面を自分で作れる仕組み）があるからです。

用途別の目安

CHAPTER 11

まとめ

1. 置き場所は「一生の選択」ではない
   後から引っ越せる。悩みすぎて作らないほうが損。
2. 決め手は「作るものの種類」ではなく「サーバー側で何が動くか」
   同じコーポレートサイトでも、同じ画像変換ツールでも、中身しだいで答えが変わる。名前で決めようとすると外す。
3. Vercelが効くのは、Next.jsを使うときと、サーバー側で重い処理をするとき
   「Next.jsを設定なしで置ける」が強みの中身。読んでもらうだけのサイトでは、この強みを活かす場面が少ない。
4. Cloudflareが効くのは、配信・社員限定・既存サーバーの公開
   静的配信は無料・無制限、送り出しの通信も無料。Access（社員だけに絞る）とTunnel（既存サーバーを作り直さず公開）は、Vercelに同等のものがない。
5. Netlifyが効くのは、Next.jsを無料から始めたいときと、触る人が多いとき
   設定なしで置ける手軽さはVercelと同じで、無料プランに「商用禁止」の条文が無い。月20ドルで人数無制限。ただし置いてあるだけのページでも通信とWebリクエストが課金対象で、使い切るとサイトが止まる。
6. 会社の仕事に使うなら、Vercelの無料プランは選択肢に入らない
   規約で非商用・個人利用のみ。最初から月20ドルを見込んでおく。Cloudflareは無料でも商用に使え、Netlifyも規約上の商用禁止はない（ただし「予告なく止めうる」と明記）。
7. 料金の仕組みは、記事より先に公式を見る
   Netlifyは2025年9月に課金の考え方ごと作り替えた（旧プランは別体系のまま残っている）。検索で出てくる「無料で100GB」などの数字は旧プランの話。数字を拾う場所は解説記事ではなく公式の料金ページ。
8. 最初は1つの置き場所にまとめる
   「画面はこっち、処理はあっち」の分離は、困ってから考えればいい。

用語ミニ辞典

用語ミニ辞典

ホスティング

作ったアプリを、誰でもURLで使える状態にして置いておくこと。またはその場所を貸すサービス。

サーバー

プログラムを動かしたりファイルを配ったりする、向こう側のコンピューター。この教材ではVercelやCloudflareから借りているものを指す（自分で買うわけではない）。ただし「社内サーバー」だけは自社が持っている実機のことなので、区別する。

サーバー側の処理

置き場所のコンピューターの中で動く仕事のこと。ログイン、フォームの受け取りと保存、AIのAPIを呼ぶ、決済、人によって表示を変える——などが該当する。ここが無ければ、ページは「ただ表示されているだけ」＝ブラウザ側で完結している。置き場所の判断はここで決まる。

ブラウザ側の処理

見ている人のスマホやパソコンの中で動く仕事。表示、開閉、その場での計算や変換など。相手の端末を借りているので、こちらの費用はかからない。

Vercelバーセル

Webアプリの置き場所を貸す会社。Next.jsの開発元でもあるため、Next.jsとの相性が最もよい。

Cloudflare Workersクラウドフレア・ワーカーズ

世界中にあるCloudflareの通信中継地点で、自分のプログラムを動かせる仕組み。速く、通信の送り出しが無料。

Netlifyネットリファイ

Webサイトやアプリの置き場所を貸す会社。Vercelに近い「Gitに送るだけで公開できる」体験が売りで、Next.jsも設定なしで置ける。2025年9月から料金の数え方を「クレジット」に作り替えた。

クレジットNetlifyの料金単位

Netlifyの新しい料金の数え方。毎月決まった点数が配られ、本番への公開（1回15）・データの送り出し（1GBで20）・Webリクエスト（1万回で2）・処理時間（メモリ1GB×1時間で10）に応じて減る。使い切るとサイトが止まる（無料プランは追加購入できない）。
※「Webリクエスト」は「ページが見られた回数」ではありません。公式の定義に「HTMLページ、画像、JavaScript、CSSなどの静的ファイルへのリクエストも含む」と書かれているとおり、ページを1回表示すると画像やCSSへのリクエストも発生するため、1回の表示＝1リクエストにはなりません。ページの作りによっては1回の表示で数十リクエストになることもあります。実際の数はブラウザに保存された分（キャッシュ）や外部サービスから読み込む分で変わるので、正確な数は管理画面の実測（Usage & billing の Web Requests）で確認してください。

Next.jsネクストジェイエス

Webアプリを作るときによく使われる道具（フレームワーク）。ページの切り替え・サーバー側での画面の組み立て・画像の最適化などが最初から用意された「部品セット」。AIにWebアプリを作らせると多くの場合これが使われる。

WordPressワードプレス

記事を書いてサイトを運用するための完成品のソフト。管理画面から更新できるのが特徴で、作る道具であるNext.jsとは役割が違う。PHPとデータベースが必要なため、置き場所はレンタルサーバーになる（VercelやCloudflareではない）。

Node.jsノードジェイエス

プログラムを動かすための一般的な土台。「普通のプログラムがそのまま動く」というときの「普通」がこれ。

リクエスト

利用者がページを開いたり、ボタンを押したりするたびに発生する「1回の呼び出し」。料金の数え方の単位になる。

データ転送（送り出し）エグレス

サーバーから利用者へデータを送る通信量。画像や動画が多いと大きくなる。Cloudflareはここが無料。

R2アールツー

Cloudflareのファイル置き場サービス。保管した量に対して課金され、取り出しは無料。

OpenNextオープンネクスト

Next.jsで作ったアプリを、Vercel以外の場所（Cloudflare・Netlify等）で動かせるように変換する道具。Netlifyは自社で作った版を自動で当ててくれるので利用者は意識しなくてよいが、Cloudflareでは自分で入れてバージョン追従も自分で追う——同じ道具でも手間が違う。

ドメイン

アプリの住所にあたる文字列（例：example.com）。別々の住所どうしの通信には制約がある。

SOURCES

元にしたカリキュラム／情報源