【Vercel構成】
GitHub push → Vercel(自動ビルド)
├─ Next.js(フロント)
├─ API Routes / Hono
└─ Edge Functions
↓
Supabase(DB・Auth・Storage)
【AWS構成】
GitHub push → ECR(イメージ保存)
↓
ECS(コンテナ実行)
↓
ALB(ロードバランサー)
↓
RDS(PostgreSQL)
💡 ポイント: Vercelが自動でやってくれること(SSL・CDN・スケーリング)をAWSでは全部自分で設定する
# 環境変数の管理
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=xxx # フロントから使う
SUPABASE_SERVICE_ROLE_KEY=xxx # NEXT_PUBLIC_ 絶対につけない
ブランチ戦略
main → 本番(production)
feature/xxx → プレビューURL自動生成(制限なし)
staging(固定) → ステージング環境として運用
💡 ポイント: プレビューURLはブランチ数の制限なし。ただしデフォルトは公開状態なので注意
# GitHub Actions(CI/CD例)
- name: Build Docker image
run: docker build -t my-app .
- name: Push to ECR
run: docker push $ECR_URI/my-app:latest
- name: Update ECS service
run: aws ecs update-service --cluster my-cluster --service my-app
VPC設計
├─ パブリックサブネット → ALB(外部からアクセス可)
└─ プライベートサブネット
├─ ECS(外部から直接アクセス不可)
└─ RDS(外部から直接アクセス不可)
💡 ポイント: タスク定義の更新だけでは反映されない。
update-serviceで再デプロイが必要
| 規模 | Vercel | AWS ECS | AWS Lambda |
|---|---|---|---|
| 小規模 | ◎ 安い | △ 固定費高 | ○ Vercelに近い |
| 中規模 | ○ | ○ | ○ |
| 大規模 | △ 高額 | ◎ 最適化可 | ◎ 最適化可 |
現実的なロードマップ
フェーズ1: Vercel Hobby + Supabase Free(ほぼ無料)
フェーズ2: Vercel Pro + Supabase Pro($45/月〜)
フェーズ3: AWS Lambda + RDS(大規模・要件複雑化したら)
💡 ポイント: AWSもLambdaを選べばサーバーレスになりコスト構造はVercelに近づく
Vercel(自動)
リクエスト急増 → Serverless Functionsが自動で増える
リクエスト減少 → 自動で減る(開発者は何もしない)
AWS ECS(手動設定)
{
"minCapacity": 2,
"maxCapacity": 10,
"targetValue": 70.0, // CPU使用率70%でスケールアウト
"predefinedMetricType": "ECSServiceAverageCPUUtilization"
}
コールドスタートが起きやすい状況
└─ 深夜・早朝など閑散時間帯の後
└─ アクセスが少ないエンドポイント
└─ 初回デプロイ直後
💡 ポイント: ECS常時起動はコールドスタートなしだが固定費あり。Lambdaはコールドスタートありだが安い
判断フロー
Next.jsを使う?
└─ YES → Vercelを検討
Edge / Middlewareを使う?
└─ YES → Vercel一択に近い
大規模 or コンプライアンス要件?
└─ YES → AWS
└─ NO → Vercel Pro + Supabaseで十分
| ユースケース | 推奨 |
|---|---|
| 個人ポートフォリオ | Vercel Hobby(無料) |
| スタートアップMVP | Vercel Pro + Supabase |
| SaaS(小〜中規模) | Vercel Pro + Supabase |
| 大規模toCサービス | AWS ECS or Lambda |
| 金融・医療系 | AWS |
| 既存AWSインフラへの追加 | AWSに統一 |
💡 ポイント: 最初からAWSで過剰設計するより、Vercelで速く作って必要になったら移行する
| ミス | 改善策 |
|---|---|
| 最初からAWSでフル構成を組む | Vercelで速くMVPを作り必要になったら移行 |
| ECSのタスク定義更新だけで満足する | update-serviceで再デプロイまで行う |
| プレビューURLを公開したままにする | センシティブなデータがある場合はアクセス制限をかける |
| コールドスタートを考慮しない | 閑散時間帯後の初回レスポンスが遅い原因と把握しておく |
| service_role_keyにNEXT_PUBLIC_をつける | サーバーサイド専用の環境変数はPUBLICにしない |
- VercelはLambda的な仕組みが最初から最適化済みで入っているイメージ
- AWSのECS経験があるなら、Lambdaのほうがコンテナ管理不要で運用が楽
- stagingブランチを固定で1本持つほうがブランチを消さずに残すより管理しやすい