TL;DR
- 月額約$7でAIアプリをフルスタック運用できた
- Cloudflare (Workers/D1/R2) + RunPod Serverless + Vercel の組み合わせが最強
- 固定費を避けてServerless構成にすれば、個人開発でも安心
はじめに
こんにちは！普段はAIエンジニアとして働いています。外国人で初めて日本語で文章を書くので、おかしいところがあれば、ご指摘いただけると嬉しいです！
「フルスタック開発ってどんな感じだろう？」「個人でもサービスを公開できるのかな？」
そんな好奇心から、暇の時にAI証明写真生成サービスの開発を試しました。（実は仕事で大量の画像分析AIを作ったのがきっかけです笑）
開発中はかなり遠回りをしましたが、最終的に月額約7ドルでフルスタックのAIアプリを運用できる構成にたどり着きました。この記事では、その試行錯誤の過程と、各サービスの無料枠について詳しく解説します。
開発期間は約3〜4ヶ月でした。AIエンジニアなのでPythonは得意ですが、フロントエンドやTypeScriptはほぼ未経験。最初はかなり苦労しました。ただ、Claude CodeやChatGPTを活用したおかげで、学習スピードもコーディングスピードも大幅に上がりました。
実際の月額コスト
| サービス | 月額 | 用途 | 備考 |
|---|---|---|---|
| Vercel | $0 | フロントエンドのホスティング | 無料枠内 |
| Cloudflare Workers | $5 | バックエンドAPI（ビジネスロジック） | 画像の後処理、印刷テンプレート作成でCPU計算が少し必要なので、有料プランに昇格 |
| Cloudflare D1 | $0 | データベース（SQLite） | 無料枠内 |
| Cloudflare R2 | $0 | 画像ファイルの保存（オブジェクトストレージ） | 無料枠内 |
| RunPod | ~$5 | AI推論（背景除去、顔検出など） | 利用量次第（1回の推論あたり約$0.01、今はほぼ無料） |
| Stripe | 決済額の3.6% | 決済システム | 売上次第（全然使う人がいない笑） |
| Resend | $0 | メール送信 | 月3,000通まで無料 |
| ドメイン | ~$10/年 | 独自ドメイン | 年払い |
合計: 約$7/月
AI推論とドメイン以外はほぼ無料枠で収まっています。
作ったもの
AIを使った証明写真生成サービスです。写真をアップロードすると、背景除去・顔検出・自動トリミング・美肌補正を行い、パスポートや履歴書用の証明写真を生成します。印刷用テンプレートも自動生成され、フチなし印刷時の拡大によるズレにも対応しています。コンビニ印刷にも対応しており、現在はプリンター会社とAPI連携の交渉中で、コンビニ印刷の自動登録機能を開発中です。
サービス名: ラムネAI証明写真
URL: https://ramune-photo.com
試行錯誤の記録
AIエンジニアなので、まず「AI処理」から着手しました。これが遠回りの始まりでした。
Phase 1: Pythonで全部やろうとした時代
最初の構成：
FastAPI (Python) → 全部入り → VPS(AWS EC2)にデプロイ
AIエンジニアにありがちな発想で、「バックエンドから着手して、ソースコードも全部Pythonで書けばいいじゃん」と思っていました。
やったこと:
- FastAPIでAPIサーバーを構築
- AI推論もビジネスロジックも同じサーバーに
- VPS(AWS EC2)を契約してデプロイ
ぶつかった壁:
- GPU付きVPSは月額数万円かかる
- AI推論がない時間帯も課金され続ける
- 個人開発で固定費が高いのは精神的にきつい
「このサービス、誰も使わなかったらどうしよう...」という不安が常にありました。
Phase 2: フロントエンドの開発
バックエンドが一通り動くようになったので、フロントエンドの開発に着手しました。
技術選定:
- Next.js + React：定番の組み合わせ
- Vercel：デプロイが楽
- TailwindCSS：スタイリングが速い
フロントエンドを作りながら気づいたこと：
- APIの設計がフロントエンド視点で考えられていなかった
- 「このレスポンス、フロントで使いにくいな...」の連続
- APIを何度も修正するはめに
学び: フロントエンドとバックエンドは並行して開発すべき。APIの設計は「使う側」の視点が必要。
Phase 3: GPU Serverlessとの出会い
フロントエンドも完成し、サービスとしては動くようになりました。しかし、VPSの固定費が気になっていました。
「使った分だけ払えばいいのでは？」という当たり前のことに気づき、RunPod Serverlessを発見。
RunPodの仕組み:
- GPUを必要な時だけ起動
- 処理が終わったら自動でシャットダウン
- 秒単位で課金
これでAI推論のコストが劇的に下がりました。Cold Start Time（ウォームアップ）はありますが、1回の推論に対してExecution Time（全体にかかる時間）は20~30秒前後なので、許容範囲内でした。
ただし、ビジネスロジック（支払い処理、データベース操作など）はまだVPS上のPythonで動いていました。
Phase 4: バックエンドの迷走
AI推論をServerless化できたので、次はビジネスロジックもServerless化しようと考えました。より小さいEC2に移行してコストは下がりましたが、まだVPSに課金され続けていました。
候補1: AWS Lambda + Python
- 慣れたPythonが使える
- でもAWSは設定が複雑で、個人開発には重い
- 料金体系も分かりにくい
候補2: Vercel Serverless Functions
- フロントエンドと一緒にデプロイできて楽
- でもNode.jsの実行時間制限が厳しい
- 画像処理には向かない
候補3: Cloudflare Workers
- エッジで動くので爆速
- 無料枠が太っ腹（10万リクエスト/日）
- ただしNode.jsではなくWorkers独自のランタイム
Cloudflareはより安価で安定したサービスを提供しているため、最終的にCloudflare Workersを選びました。
Phase 5: 現在の構成に至る
紆余曲折を経て、以下の構成に落ち着きました。
最終的なアーキテクチャ
┌─────────────────────────────────────────────────────────────┐
│ ユーザー │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ フロントエンド │
│ Next.js 15 + React 19 │
│ (Vercel) │
└─────────────────────────────────────────────────────────────┘
│
┌───────────────┴───────────────┐
▼ ▼
┌──────────────────────────┐ ┌──────────────────────────┐
│ ビジネスロジック API │ │ AI 推論 API │
│ Hono + TypeScript │ │ Python + PyTorch │
│ (Cloudflare Workers) │ │ (RunPod Serverless) │
└──────────────────────────┘ └──────────────────────────┘
│
┌───────────┼───────────┐
▼ ▼ ▼
┌────────┐ ┌─────────┐ ┌────────┐
│ D1 │ │ R2 │ │ Stripe │
│(SQLite)│ │(Storage)│ │ (決済) │
└────────┘ └─────────┘ └────────┘
ポイント: AIの重い処理とビジネスロジックの軽い処理を分離しました。
技術選定の理由
なぜCloudflare Workersを選んだのか
1. 無料枠が大きい
| サービス | 無料枠 |
|---|---|
| Cloudflare Workers | 10万リクエスト/日 |
| AWS Lambda | 100万リクエスト/月 |
| Vercel Functions | 15万実行/月 |
一見AWSの方が多く見えますが、Cloudflareは「日」単位なので、月換算だと約300万リクエスト相当です。
2. エグレス（データ転送）が無料
これが決め手でした。画像を扱うサービスなので、ダウンロード時の転送料金が無料なのは大きいです。
AWS S3だと、ユーザーが画像をダウンロードするたびに課金されます。Cloudflare R2は完全無料。
3. HonoフレームワークとWranglerの存在
Cloudflare Workersの独自ランタイムは、Node.jsとは微妙に違います。でもHonoを使えば、Express.jsに近い書き心地で開発できます。Wranglerと組み合わせれば、デプロイも簡単です。
import { Hono } from 'hono';
import { cors } from 'hono/cors';
const app = new Hono();
app.use('*', cors());
app.get('/health', (c) => {
return c.json({ status: 'ok' });
});
app.post('/api/process', async (c) => {
const body = await c.req.json();
// 処理
return c.json({ result: 'success' });
});
export default app;
実は、Honoは日本人開発者のyusukebeさんが作ったフレームワークで、ドキュメントも充実しています。
4. $5/月の有料プランがコスパ最強
無料枠でも十分ですが、$5/月の有料プランに上げると世界が変わります。
| プラン | CPU時間 | リクエスト数 |
|---|---|---|
| Free | 10ms/リクエスト | 10万/日 |
| Paid ($5/月) | 3,000万ms/月 | 1,000万/月 |
無料枠では1リクエストあたり10msのCPU時間しか使えず、本当に軽いAPIしか動かせません。しかし有料プランでは、月3,000万CPU msを上限として自由に使えます。1リクエストあたり最大30秒（設定で5分まで延長可能）の実行時間が許容されるので、画像のリサイズ、印刷テンプレート生成、PDFの作成など、ちゃんとしたアルゴリズム処理が余裕で動きます。
しかもこの5ドル/月はアカウント単位の料金なので、複数のプロジェクトで共有できます。本番環境とステージング環境を分けても、別サービスを立ち上げても、追加料金なし。月額$5で1,000万リクエスト、エグレス無料、エッジで爆速。個人開発でこれ以上のコスパは見つかりませんでした。
なぜRunPod Serverlessを選んだのか
1. GPUのServerlessが簡単に使える
Dockerイメージを用意してDocker Hubを通して管理（GitHubみたいにPull/Pushでバージョン管理）し、RunPodとの連携はハンドラー関数を書くだけ。
import runpod
def handler(job):
input_data = job["input"]
# GPU処理
return {"result": "processed"}
runpod.serverless.start({"handler": handler})
2. 秒単位課金
| GPU | 料金 |
|---|---|
| 16GB GPU | $0.00016/s |
| 24GB GPU | $0.00019/s |
| 48GB GPU | $0.00034/s |
1リクエストの処理が10秒なら(Warmupの間は無料)、16GB GPUで、約$0.0016。1000リクエストでも1.6ドル程度です。
3. Flex Workerでアイドル時は課金なし
使わない時間は完全に0円。個人開発の「誰も使わないかもしれない」という不安に対する最適解でした。
なぜNext.js + Vercelを選んだのか
正直、CI/CDが充実していて楽です。
- Next.jsはReactのフルスタックフレームワークとして成熟している
- VercelはNext.jsの開発元なので相性抜群
- デプロイが
git pushだけで完了
個人開発ではインフラに時間をかけたくないので、「考えることが少ない」のは正義です。
ステージング環境が簡単に作れる
VercelもCloudflare Workersも、ステージング環境の構築が非常に簡単です。
Vercel:
- ブランチごとに自動でプレビューURLが生成される
-
mainブランチ → 本番、developブランチ → ステージング、といった運用が楽 - 環境変数もブランチごとに設定可能
Cloudflare Workers:
-
wrangler.tomlで環境を定義するだけ -
wrangler deploy --env stagingでステージング環境にデプロイ - D1やR2も環境ごとに分離できる
本番環境を壊す心配なく、安心して新機能をテストできます。個人開発でも、この安心感は大きいです。
各サービスの無料枠まとめ
全然使い切れないほど充実しています。
Vercel（フロントエンド）
| リソース | 無料枠 |
|---|---|
| 帯域幅 | 100 GB/月 |
| Serverless Function | 15万実行/月 |
| ビルド時間 | 6,000分/月 |
Cloudflare Workers（バックエンド）
| リソース | 無料枠 |
|---|---|
| リクエスト数 | 10万回/日 |
| CPU時間 | 10ms/リクエスト |
Cloudflare D1（データベース）
| リソース | 無料枠 |
|---|---|
| ストレージ | 5 GB |
| 読み取り | 500万行/日 |
| 書き込み | 10万行/日 |
Cloudflare R2（ストレージ）
| リソース | 無料枠 |
|---|---|
| ストレージ | 10 GB |
| Class A操作 | 100万回/月 |
| Class B操作 | 1,000万回/月 |
| エグレス | 無制限で無料 |
RunPod Serverless（AI推論）
| GPU | Flex Worker料金 |
|---|---|
| 16GB GPU | $0.00016/s |
| 24GB GPU | $0.00019/s |
| 48GB GPU | $0.00034/s |
※無料枠はありませんが、使った分だけの課金です。
開発中にハマったポイント
1. Cloudflare Workersの制限
問題: Workers内で大きなAI処理しようとしたら、メモリ制限（128MB）に引っかかった。
解決: AI処理はRunPod側に任せ、Workersはビジネスロジックと軽い画像処理のみに専念。処理の分離が重要でした。
2. RunPodのコールドスタート
問題: Flex Workerは初回リクエスト時にコンテナを起動するため、10-30秒の遅延が発生。
対処:
- ユーザーには「処理中」のUIを見せて待ってもらう
- どうしても遅延が許容できない場合はActive Workerを検討（高い！）
- 実際には、証明写真という用途では30秒待つのは許容範囲内でした
学んだこと
1. 処理の重さで分離する
AI推論（重い）とビジネスロジック（軽い）を同じサーバーに置くと、コスト最適化ができません。
- 重い処理 → GPU Serverless（使った分だけ課金）
- 軽い処理 → エッジServerless（無料枠で十分）
2. 固定費を避ける
個人開発では「誰も使わないかもしれない」というリスクがあります。Serverlessなら、使われなければ課金されない。これは精神面でとても大事です。
3. エコシステムを活用する
Cloudflareを選んだら、D1・R2・Workersを組み合わせる。同一エコシステム内での連携は楽です。
4. CI/CDは大事
VercelとCloudflare WorkersはどちらもGitHubと連携でき、スムーズに新しいコードをデプロイできて楽です。
まとめ
個人開発でフルスタックアプリを作るなら、Serverless構成を強くおすすめします。
| レイヤー | おすすめ構成 |
|---|---|
| フロントエンド | Next.js + Vercel |
| バックエンド | Hono + Cloudflare Workers |
| データベース | Cloudflare D1 |
| ストレージ | Cloudflare R2 |
| AI推論 | RunPod Serverless |
この構成なら：
- 初期費用ほぼ0円でスタートできる
- 使った分だけの課金で安心
- トラフィック増加時も自動スケール
- サーバー管理の手間がない
「作ったサービスが流行るかわからない」という個人開発の不確実性に対して、Serverlessアーキテクチャは最適解だと思います。
質問があれば、コメントで気軽にどうぞ！