【実体験】Vercel/Supabase無料枠で月数百円に抑える構成と落とし穴

Vercel/Supabase無料枠で月数百円に抑える構成と落とし穴 結論 Next.js + Supabase の個人プロジェクトは 設定を誤らなければ月0〜数百円 で運用できる。ただし「無料枠は余裕がある」という油断が帯域・DB接続・Edge Function呼び出し数の三点で課金を引き起こす。以下の構成と制限値を把握して先に手を打っておく。 無料枠の実数値（2024年時点） Vercel Hobby プラン 項目 上限 帯域幅 100 GB/月 Serverless Function 実行時間 100 GB-Hours/月 ビルド時間 6,000 分/月 Edge Function 実行回数 500,000 回/月 Cron Job 1件、1日1回まで Supabase Free プラン 項目 上限 DB ストレージ 500 MB ファイルストレージ 1 GB 帯域幅 5 GB/月 Realtime メッセージ 200 万回/月 Edge Function 実行回数 50 万回/月 アクティブでないプロジェクト 7日で一時停止 最も踏みやすい罠はSupabaseの「7日間非アクティブ停止」と、Vercelの帯域超過による従量課金開始 だ。 落とし穴3選 1. Supabase プロジェクトの自動停止 無料プランは7日間リクエストがないとプロジェクトが停止する。個人ポートフォリオ系のサイトは週1以下のアクセスで止まる。 対策：GitHub Actions で毎日 ping を打つ # .github/workflows/keep-alive.yml name : Supabase Keep Alive on : schedule : - cron : ' 0 9 * * *' # 毎日9時UTC jobs : ping : runs-on : ubuntu-latest steps : - run : | curl -s "${{ secrets.SUPABASE_URL }}/rest/v1/health_check" \ -H "apikey: ${{ secrets.SUPABASE_ANON_KEY }}" > /dev/null 2. Vercel の帯域超過 画像や動的OGPをそのままVercelのServerless Functionで返すと、1リクエスト数百KBがすぐ積み上がる。月100GBは個人サイトなら十分だが、Twitterで拡散されたときに一晩で数GBが飛ぶ。 対策：Next.js の Image Optimization を外部CDNに逃がす // next.config.js module . exports = { images : { loader : ' cloudinary ' , // 無料枠25GB/月 path : ' https://res.cloudinary.com/YOUR_CLOUD_NAME/image/upload/ ' , // または Cloudflare Images (無料100K変換/月) }, } 静的アセットは public/ に置いてVercel経由ではなくCloudflare CDN（無料）を噛ませる構成が最も安全。 3. Supabase DB 接続プールの枯渇 Serverless Function はリクエストごとに新規コネクションを張る。Supabaseの無料枠はPostgresの接続数上限が低く（直接接続で約60）、Next.js APIルートがスパイクすると remaining connection slots are reserved エラーが出て詰む。 対策：Supabase の Transaction Pooler を使う # .env.local # ポート5432（直接）ではなくポート6543（Pooler）を使う DATABASE_URL=postgresql://postgres.[REF]:[PASSWORD]@aws-0-ap-northeast-1.pooler.supabase.com:6543/postgres?pgbouncer=true Prismaの場合は ?pgbouncer=true を必ず付ける。これでコネクション上限を実質的に緩和できる。 推奨構成（月0円を維持するスタック） フロント: Vercel Hobby (Next.js App Router) DB: Supabase Free (PostgreSQL + Pooler) 画像: Cloudflare Images or Cloudinary Free 認証: Supabase Auth (無料枠内) Cron: GitHub Actions (無料2,000分/月) 監視: UptimeRobot Free (5分間隔、keep-alive兼用) UptimeRobotを使えば上述の「Supabase 7日停止」対策とダウン検知を1石2鳥で解決できる。監視URLにSupabaseのREST endpointを追加するだけでよい。 コスト超過を検知する設定 Vercelはダッシュボードから Spend Management を有効化し、月の上限額を設定できる（$0に設定すると超過時に自動デプロイ停止）。 # Vercel CLI で現在の使用量を確認 npx vercel usage Supabase側は Project Settings > Billing > Usage でリアルタイム確認可能。DBサイズが450MBを超えたらアラートを飛ばす設定をしておくと安心だ。 まとめ Supabase の7日停止 → GitHub Actions か UptimeRobot で daily ping Vercel 帯域 → 画像は外部CDNへ、OGPはキャッシュを必ずセット DB接続枯渇 → Transaction Pooler（ポート6543）を使う 課金検知 → Vercel Spend Management を $0 上限で設定 この3点を最初に仕込むだけで、個人プロダクトを 永続的に月0〜数百円 で走らせ続けられる。 関連リンク AI開発・自動化の実践キット / プロンプト集（Gumroad） ※自社商品（プロモーションを含みます）。