AIナレッジ
Codex・Claude Codeで作ったアプリ、どこで公開する？Vercel・Cloud Run・Cloudflareの選び方
CodexやClaude Codeに頼んで、ホームページや業務アプリを作った。自分のパソコンでは動いている。次は、友人に送ったり、お客様に試してもらったり、社員に使ってもらったりしたい。
そこで出てくるのが、Vercel、Cloud Run、Cloudflareという名前です。「どれでも公開できます」と言われても、何を基準に選べばよいか分かりません。
この記事では、初めてアプリを公開する人が、作ったものの中身と使い方から第一候補を選べるように説明します。
入口になる考え方は、次の3つです。
| まず考えること | 第一候補 | 代表的な例 |
|---|---|---|
| 画面のファイルを配れば使える？ | Cloudflare Workers | 作品紹介、診断クイズ、ブラウザー内で計算する見積もりツール |
| 裏側の処理もあるWebアプリを、公開・確認・更新したい？ | Vercel | AIチャット、入力内容に応じて結果を返すアプリ |
| 専用のソフトや実行環境を用意して動かしたい？ | Cloud Run | 音声・動画の変換、独自の道具を組み合わせる処理 |
これは機能を3社へ完全に振り分けた表ではありません。最初に検討する理由を示したものです。3つともできることは重なっています。後ほど、迷いやすい重なりも具体例で説明します。
情報確認日：2026年9月26日。選定の順番は本記事の提案です。公式資料は各製品の機能と条件の根拠として示しています。実際に使うプラン・対応する作り方・費用は公開前に確認してください。
1. まず「作る」と「人に使ってもらう」を分ける
自宅で料理を作れたことと、お店でお客様に出せることは違います。アプリも同じで、手元で完成した後に、ほかの人が使える状態を作る必要があります。
アドレス欄に localhost や 127.0.0.1 と出ている場合、通常は自分のパソコンで動かしています。そのURLを友人に送っても、友人のパソコンからあなたのアプリを開けるようにはなりません。file:// で開いたファイルも、そのままではインターネット上の共有URLではありません。
自分のパソコンを閉じた後も、相手がURLから使えるようにする。 そのために、画面のファイルや処理するプログラムを、インターネット上の公開先へ配置します。この作業を「デプロイ」と呼びます。
この記事で扱うのは、相手がブラウザーで使うサイトやアプリです。自分のパソコンのフォルダーを整理する道具や、デスクトップ専用ソフトを作った場合は、そのままWeb公開できるとは限りません。まず、どの形で相手に使ってもらうかを決めます。
Codexで作ったか、Claude Codeで作ったかによって、公開先が決まるわけではありません。判断するのは、完成したものがどこで、何を動かす必要があるかです。
2. 「画面を配る」と「裏で処理する」の違い
同じ「見積もりツール」でも、次の2つは中身が違います。
A：単価と個数を入れると、合計金額が出る。
この計算を、利用者のスマホやパソコンのブラウザー内で済ませる作りなら、計算方法を含む画面ファイルを届ければ使えます。紙の計算表と電卓をセットで渡すようなイメージです。
B：相談内容を入れると、AIが提案文付きの見積もりを作る。
こちらは、外部のAIへ依頼する処理が必要です。サービス運営者の秘密のAPIキーを使うなら、それを利用者に配る画面へ書き込むわけにはいきません。キーを表へ出さずにAIへ依頼する、裏側の処理を用意します。
ボタンが動くから、必ず裏側の処理が必要、ということではありません。 Aのように、その場の計算や表示切り替えだけで動くアプリもあります。
反対に、画面が一枚しかなくても、Bのように裏でAIや別の仕組みを動かしていることがあります。見た目の豪華さやページ数では判断できません。
自分で見分けられなければ、制作したAIにこう聞きます。
このアプリのコードを確認してください。
①画面のファイルを配るだけで使えますか？
②こちらが公開先で動かす、裏側のプログラムも必要ですか？
③音声・動画を変換するソフトなど、特別な道具を一緒に動かす必要がありますか？
すでに外部サービスに任せている処理があれば、それも分けてください。専門用語ではなく、このアプリの具体的な動作で答えてください。
読者が決めるのは「相手に何をしてもらいたいか」。AIに確認させるのは「その動作をどこで実行する作りか」です。
3. Yes／Noで第一候補を選ぶ
前の質問に対するAIの回答を使い、次の順に進みます。最初に見るのは、画面を配るだけで動くか。それで足りなければ、公開先でどんな処理を動かすかです。
制作AIにコードの中身を確認させ、その回答で進みます。
例：作品紹介、その場で計算するツール
画面のファイルを配信する第一候補
いいえ ↓ 公開先で動かす処理も必要
例：サーバー側で音声や動画を加工する道具
必要な道具ごと動かす第一候補
対応するWebアプリを公開・更新する第一候補
いずれも最初の候補です。実際の作りへの対応と必要なプランを確認します。分からない場合は、制作AIに具体的な動作で説明してもらいます。
誰が入れる？ ／ 何を保存する？ ／ どんな住所を渡す？
Q1：画面のファイルを配れば使えますか？
はい → Cloudflare Workersを第一候補に。 作品紹介ページ、ブラウザー内で計算するツール、架空データで動く提案デモなどです。
いいえ → Q2へ。 公開先で動かす裏側のプログラムも必要なら、次へ進みます。
ここでいう「配れば使える」は、画面が動かないという意味ではありません。計算、グラフの切り替え、クイズの採点なども、ブラウザー内で済ませる作りなら含まれます。
Q2：専用のソフトや実行環境を用意して動かしますか？
はい → Cloud Runを第一候補に。 たとえば、サーバー側で動画を変換するソフトを動かす、独自の分析ツールを組み合わせる、といった場合です。
いいえ → Vercelを第一候補に。 対応する作りのWebアプリを公開し、相手に確認してもらいながら直す用途を想定しています。制作AIに、そのアプリがVercelで動く構成か確認させます。
分からない場合は、サービス名を当てず、前章の質問で中身を確認します。 AIの回答と必要な機能を照らせば、選んだ理由を自分でも説明できます。
これは「全アプリを必ず正しく分類する診断」ではありません。最初の候補を絞る地図です。適合しない作りや必要な機能が見つかったら、理由を確認して候補を変えます。
4. そのサービスを選ぶと、何が楽になる？
Cloudflare：画面を配る用途から始めやすい
Cloudflareには、アプリを動かす機能、ドメインの管理、アクセス制限など、いくつもの機能があります。ここで公開先として比べているのは、Cloudflare Workersです。
たとえば、作品紹介のページを100人に見てもらいたい。表示する文章や写真は同じで、利用者ごとにサーバーで計算する必要はない。この場合、まず必要なのは、画面ファイルを相手に届けることです。
Workersには、HTML・画像などのファイルを配信する仕組みがあります。確認時点では、この静的ファイルへのリクエストは無料・回数無制限と案内されています。プログラムの実行やほかの機能は別の課金条件になるため、「アプリ全体が何でも無料」という意味ではありません。Cloudflare公式：ファイル配信、料金と制限
画面を届ければ目的を達成できるなら、まず配信の仕組みを選ぶ。 これが、この用途でCloudflareを候補にする理由です。
なお、Workersは裏側の処理やAI連携も扱えます。「Cloudflareでは本物のアプリを作れない」という理解は誤りです。ただし、プログラムが動く環境や制限に合わせた確認が必要です。Workersの制限
Vercel：公開して、見てもらい、直す流れを作りやすい
たとえば、AIチャットのアプリを作って、友人に試してもらう。「文字を大きくして」「このボタンを上へ移して」という意見をもらい、何度も修正する。
このとき便利なのは、変更した版をURLで確認し、使ってもらう版へ反映する仕組みです。Vercelには、制作中の変更を確認する環境と、利用者へ提供する本番環境があります。変更ごとの確認URLを使う流れを作れます。Vercel公式：公開環境
Webアプリの作り方にも対応があり、たとえばNext.jsという開発の仕組みとの統合が用意されています。名前を覚える必要はありません。制作AIに「このアプリはVercelが対応する作りか」と聞けば確認できます。Vercel公式：Next.js対応
Vercelは画面を置くだけのサービスでもありません。裏側のプログラムを動かす機能があり、AIへ依頼したり、入力内容を処理したりできます。Vercel Functions
ただし、どんなプログラムでも無変更で置けるわけではありません。動かし方や制限に合うかを確認します。公開・確認・更新の手間をまとめやすいことが、ここでVercelを候補にする理由です。
Cloud Run：必要な道具をまとめて動かしやすい
たとえば、音声ファイルを受け取り、変換ソフトで形式をそろえ、長い録音を分割してからAIへ送るアプリを作ったとします。
この場合は、画面と短いプログラムだけでなく、変換ソフトなどの道具も動かす必要があります。Cloud Runでは、プログラムと、その実行に必要なソフトやライブラリをまとめた形で動かせます。このまとまりを「コンテナ」と呼びます。Google公式：Cloud Runの仕組み
例えるなら、備え付けの設備に合わせるだけでなく、必要な調理器具を持ち込める厨房です。何を一緒に動かすかの自由度が必要なときに、検討する理由があります。
その分、起動方法や処理の受け付け方、設定する権限など、制作側で決めることもあります。コードをそのまま送れば、どんなアプリも自動的に完成するわけではありません。
また、「処理が長いからCloud Run」「Pythonで書いたからCloud Run」と機械的に決めるのも不正確です。VercelにもPython対応があります。時間の長い処理は、どのサービスでも、受け付け後に結果を取りに来る形などを検討します。まず見るのは、必要な道具と実行方法です。Vercel公式：対応言語・実行環境
5. 具体的な6つのアプリで、選び方を練習する
例1：ポートフォリオやイベント紹介ページ
写真、文章、開催日時、外部の申し込みページへのリンクがあるサイトです。自分のサイトでは申し込みを保存しません。
第一候補はCloudflare Workers。 画面ファイルを配ることで目的を達成できるためです。ページの見た目を何度も比較して確認する流れを重視するなら、Vercelも候補です。
例2：その場で結果が出る診断クイズ・料金計算ツール
選択肢を選ぶとタイプが出る、数量を入れると料金が出る。計算や採点はブラウザー内で行い、入力内容をサーバーへ残しません。
第一候補はCloudflare Workers。 ボタンが動いても、公開先で計算する仕組みが不要なら、画面の配信で済むからです。
例3：本当にAIが回答するチャット
利用者の質問を外部のAIへ送り、回答を表示します。運営者のAPIキーは、公開先の裏側で管理します。専用の変換ソフトは使わない構成です。
第一候補はVercel。 対応する作りなら、画面とAIを呼ぶ処理を公開し、動作を確認しながら更新する流れを作れます。画像生成でも、外部のAIサービスに依頼して結果を受け取るだけなら、同じ考え方で検討できます。
「AIが使われているからCloud Run」とは決まりません。自分が借りる公開先で、何を実行するかを見ます。
例4：録音を加工してから議事録を作るアプリ
利用者が録音を送り、サーバー側で音声形式を変えたり分割したりする専用ソフトを動かし、その結果をAIへ渡します。
第一候補はCloud Run。 変換ソフトを含めて実行する環境を用意したいからです。議事録という名前だから選ぶのではありません。録音をそのまま外部サービスへ渡すだけの作りなら、例3に近い判断になります。
例5：社員が使う日報・顧客メモのアプリ
社員がログインし、メモを書き、別のパソコンからも過去の内容を見られるアプリです。一般的なWebアプリとして、裏側の処理を用意する想定にします。
公開・更新の第一候補はVercel。加えて、ログインと保存の仕組みが必要です。 社員用というだけでCloud Runに決まるわけではありません。
一方、画面からSupabaseなどの外部サービスへ接続し、ログインや保存をそちらへ任せる作りなら、画面の配信先はCloudflare Workersという構成もあり得ます。外部サービスを使うことと、自分が公開先でプログラムを動かすことは分けて考えます。誰がどの記録を見られるかの設定は必要です。Supabase公式：データへのアクセス制御
例6：ワークショップで作品を作り、家でも続きたい
これは一つの商品名だけでは選べません。「その場で遊べるクイズ」なら例2。「外部AIで作品を作る」なら例3。「動画を加工する」なら例4の判断が使えます。
さらに、家でも作品を見たいなら保存が必要です。自分の作品だけを見せたいなら、本人を識別する仕組みも必要になります。
「ワークショップ用だから何を使うか」ではなく、「参加者にどの動作を提供するか」に分解すると決められます。
6. 公開先を決めたら、別に確認する3つのこと
誰に使わせる？――全員か、指定した人だけか
友人、お客様、社員のどれに共有するかだけでは、公開先は決まりません。ただし、入れる人の設定は変わります。
URLを社員にしか教えないことと、社員しか開けないことは別です。 社内情報を扱うなら、許可した人だけが入り、必要なデータだけを見られる形にします。
公開前の確認URLを守る機能と、アプリの会員がログインする機能も、目的が異なります。制作AIには「誰が入れて、何を見られる必要があるか」を伝えます。Vercelの公開制限、Cloud Runの利用者認証、Cloudflare Access
何を残す？――作品や入力内容を翌日も使うか
Supabaseは、データの保存やログインなどを用意するサービスです。今回の3社と並べて「公開先を4択にする」というより、必要な機能として組み合わせて考えます。Supabase公式
例えるなら、公開先がお店の営業場所なら、保存先は記録を保管する棚です。お店を用意しただけで、顧客メモが自動的に保存されるわけではありません。
ブラウザーの中だけに保存した情報が、そのまま別のスマホからも見られるとは限りません。「保存ボタンがある」だけで判断せず、どこへ残す作りかを確認します。
どんな住所を渡す？――標準URLか独自ドメインか
独自ドメインは、お客様へ渡す住所です。Vercel・Cloud Run・Cloudflareのどれを選ぶかとは別の判断です。独自ドメインを使うためだけに、Cloud Runをやめる必要はありません。Google公式：独自ドメインの接続
友人に短期間試してもらう段階なら、サービスから発行されるURLで始められます。継続して提供するサービスや教材なら、覚えやすく案内しやすい独自ドメインを検討します。デモごとに新しいドメインを買う必要はなく、一つのドメインを区分して使う方法もあります。
なお、Cloudflareでドメインや通信の入口を管理し、アプリはCloud Runなど別の場所で動かす組み合わせもできます。この記事で比べている「Workersで動かす使い方」とは別です。Cloudflare公式：仕組み
7. 「無料で使える？」は、公開先とAI利用料を分けて考える
画面を公開する料金と、AIに回答・画像を作ってもらう料金は別です。公開先が無料枠に収まっても、外部AIの利用料が発生することがあります。保存容量や独自ドメインの更新料も別に確認します。
Vercelの無料Hobbyプランは、個人の非商用利用が対象です。仕事のデモや事業用アプリも無料でよいとは判断せず、用途に合うプランを確認します。Vercel公式：Hobbyプラン
このため、「一番安いサービスはどれか」より、公開場所・AI利用・保存・ドメインのどこに費用が発生するかを、作ったアプリに即して確認する方が役に立ちます。
8. 判断した後、制作AIに渡す依頼文
最初に作りを確認し、候補を絞ったら、次のように頼めます。
このアプリをURLでほかの人に使ってもらいたいです。
相手は［誰でも／指定したお客様／指定した社員］です。
相手にしてほしいことは［画面を見る／操作する／AIで生成する／記録を保存する］です。公開先は［Cloudflare Workers／Vercel／Cloud Run］を第一候補にしています。理由は［画面を配れば動く／Webアプリの公開・確認・更新をまとめたい／専用の道具ごと動かしたい］からです。
コードを確認して、この選択で必要な機能が動くかを確かめてください。向いていなければ、合わない点と別の候補を具体的に説明してください。
ログイン、保存、独自ドメインが必要かも整理してください。費用が発生する箇所と、公開範囲を説明してから作業を進めてください。
最後に、相手が使えるURLで必要な操作が動くことを確認してください。限定共有の場合は、許可していない人が画面やデータへ入れないことも確認してください。
「何でもよいので公開して」と頼むより、自分が選んだ理由と、相手に使ってほしい機能を渡すと、確認すべきことが明確になります。
公開後は、自分の開発画面ではなく、相手が使うURLで確かめます。AIチャットなら回答が返ること。保存が必要なら開き直しても残ること。社員限定なら、許可されていない人は入れないこと。この確認まで進めて、共有できる状態になります。
覚える入口は、画面を配るならCloudflare、Webアプリの公開・更新ならVercel、必要な道具ごと動かすならCloud Run。 そのうえで、ログイン・保存・住所を整えます。サービス名の知識が増えたことより、自分のアプリでその選択をする理由が説明できることが大切です。
あなたのAI顧問株式会社の「あなたのAI顧問」は、AI・DX領域のBPO × AI教育を通じて、業務改善の実装と現場の自走を支援しています。業務の棚卸しと優先順位付けから、契約範囲内の実装、考え方・手順の教育と移管まで進めます。
WRITERライター紹介
黒山結音
あなたのAI顧問株式会社 代表取締役
「AIは現場で使えなきゃ意味がない」を掲げ、30社以上にAI顧問として導入から定着までサポート。OpenClaw・Claude・ChatGPTなどAIツールを実務でフル活用し、AI駆動経営を実践。本メディアでは、実際の現場で効果が出た事例や、AI初心者がつまずく「最初の一歩」を、専門用語を極力使わずに解説します。
OpenClaw / Claude Code / Codex / Cursor / Manus
この記事をシェアする
