DEV Community

スシロー
スシロー

Posted on

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

#aws #ai

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
Enter fullscreen mode Exit fullscreen mode

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変換/月)
  },
}
Enter fullscreen mode Exit fullscreen mode

静的アセットは 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
Enter fullscreen mode Exit fullscreen mode

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兼用)
Enter fullscreen mode Exit fullscreen mode

UptimeRobotを使えば上述の「Supabase 7日停止」対策とダウン検知を1石2鳥で解決できる。監視URLにSupabaseのREST endpointを追加するだけでよい。

コスト超過を検知する設定

Vercelはダッシュボードから Spend Management を有効化し、月の上限額を設定できる（$0に設定すると超過時に自動デプロイ停止）。

# Vercel CLI で現在の使用量を確認
npx vercel usage
Enter fullscreen mode Exit fullscreen mode

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〜数百円で走らせ続けられる。

関連リンク

※自社商品（プロモーションを含みます）。

Top comments (0)