Cloudflare Workers + D1で無料のAI背景除去を作ってみた
週末を使って、フロントエンドとバックエンドの両方をCloudflare上にデプロイし、ほとんどコストゼロで動くAI背景除去サイトを作りました。開発の道のりと、学んだことをいくつか紹介します。
プロジェクトURL
技術スタック
- フロントエンド: 静的HTML + JavaScript（Cloudflare Pages）
- バックエンド: Cloudflare Workers
- データベース: Cloudflare D1
- AI背景除去: Remove.bg API
- 支払い: PayPal
機能
- 無料で使える: 1日3回分の無料利用、ログイン不要
- Googleログイン: ログイン後、端末間で同期
- クレジットパック: PayPalでクレジットを購入
- メンバーシップ: 月額/年額の無制限プラン
重要ポイント
1. D1データベースの利点
以前はlocalStorageを使っていたので、ユーザーが端末を切り替えるとデータが失われていました。D1に切り替えた後は、ユーザーがログインすれば、クレジットとメンバーシップがすべての端末間で同期されます。
-- ユーザーテーブルの構造
CREATE TABLE users (
id INTEGER PRIMARY KEY,
google_id TEXT UNIQUE,
email TEXT,
credits INTEGER DEFAULT 0,
membership TEXT,
membership_expire TEXT,
total_used INTEGER DEFAULT 0
);
2. Workersの面白い使い方
WorkersはAPIのためだけではありません。HTMLページを直接配信することもできます。1つのWorkerで全ルートを処理します:
// ホームページ
if (path === '/') {
return new Response(HOME_PAGE, {
headers: {'Content-Type': 'text/html'}
})
}
// プライシングページ
if (path === '/pro') {
return new Response(PRO_PAGE, {...})
}
// APIエンドポイント
if (path === '/purchase' && method === 'POST') {
return handlePurchase(request, env)
}
3. PayPal連携で学んだこと
サンドボックスと本番ではAPIのアドレスが異なり、サンドボックスでのテストではときどき変なCORSの問題が発生します。最終的な解決策は、ユーザーが支払い後に自動フローが失敗した場合に備えて、フォールバックとして手動での支払い確認を提供することでした。
コスト見積もり
| サービス | 無料枠 | 従量課金 |
|---|---|---|
| Workers | 100,000 req/日 | $0.50/100万 |
| D1 | 5GBストレージ | $1/GB/月 |
| Pages | 500MB | 無料 |
| Remove.bg | - | $0.07/画像 |
現在は1日に数百回のアクセスなので、すべて無料枠の範囲内です。
今後の予定
- [ ] さらにAI機能を追加（背景の置き換え、リサイズ）
- [ ] バッチ処理のサポート
- [ ] 開発者向けのオープンAPI
振り返り
このプロジェクトによって、Cloudflareのプロダクトの可能性を改めて考え直すきっかけになりました。Workers + D1 + Pages の組み合わせは、小〜中規模のWebアプリにとって素晴らしいです。簡単なデプロイ、グローバルCDN、そして非常に低コストです。
同じようなアイデアがあるなら、この構成を試してみてください！コメント欄で質問もお気軽にどうぞ！
https://zmjjkk.xyz をぜひ試してみて、コメント欄にフィードバックを残してください！
