はじめに
フロントエンドを中心に開発していると、デプロイ先として Vercel と AWS（主に Amplify や Elastic Beanstalk）を比較する機会が増えます。どちらも実績があり、無料枠も用意されていますが、「どちらが自分に合っているか」 を判断する基準は「用途」「料金」「運用」の３軸が分かりやすいです。本記事ではプログラミング初心者でもイメージしやすいように整理します。
1. 用途別の適性
| 項目 | Vercel | AWS |
|---|---|---|
| 静的サイト / Jamstack | ✅ 高速 CDN と自動ビルドがデフォルト | ✅ CloudFront＋S3 で構築可能だが手動設定が必要 |
| SSR (Next.js) | ✅ next build → next start が自動化 |
✅ Amplify の SSR もサポート、設定がやや複雑 |
| バックエンド API | ❌ 基本的にフロント専用 | ✅ Lambda、API Gateway、DynamoDB などフルスタックが揃う |
| 大規模トラフィック | ✅ 無料枠は小規模向け、プランでスケール | ✅ Auto Scaling により無制限にスケール可能 |
結論
- Vercel は「フロント中心」「Next.js の SSR」や「プレビュー環境が欲しい」ケースに最適。
- AWS は「フロント＋バックエンドを一括管理」「高トラフィックやカスタムインフラが必要」な場合に向いています。
2. 料金のイメージ
| 項目 | Vercel（無料プラン） | AWS（無料利用枠） |
|---|---|---|
| ビルド実行回数 | 月 100 回まで無料 | Lambda 100 万回/月、API GW 100 万回/月が無料 |
| データ転送 | 100 GB/月まで無料 | CloudFront 1 TB/月まで無料 |
| ストレージ | 100 GB の静的ファイル | S3 5 GB + 20,000 GET/月 が無料 |
| 超過時の課金 | ビルド時間・帯域に応じて従量課金 | 使用量に応じた従量課金（価格はサービス別） |
Vercel は ビルド回数と帯域 が課金の主軸です。一方 AWS は 利用サービスが増えるほど 複数項目で課金が分散します。初心者が小規模プロジェクトで始めるなら、Vercel のシンプルな従量課金 が見通しやすいでしょう。
3. 運用・メンテナンスの観点
Vercel のメリット
- Git リポジトリを連携すれば プッシュ → 自動デプロイ が即完了。
- プレビュー環境が PR 毎に自動生成され、チームでのレビューが楽になる。
- ダッシュボードがシンプルで、ログやエラーレポートも可視化済み。
AWS のメリット
- IAM ロールで細かい権限管理が可能。
- CloudWatch や X-Ray で 詳細なモニタリング が取れる。
- 複数リージョンへのデプロイや マルチアカウント運用 が標準機能。
デメリット比較
| 項目 | Vercel | AWS |
|---|---|---|
| 学習コスト | 低い（UI が直感的） | 高い（サービスが多岐にわたる） |
| カスタマイズ性 | 限定的（独自サーバーは不可） | 高い（ほぼ無制限） |
| トラブルシュート | ログが限定的 | 豊富なログとメトリクスが利用可 |
4. まとめと選び方チェックリスト
| 判定ポイント | Vercel が向いている | AWS が向いている |
|---|---|---|
| フロント中心か？ | ✅ | ❌ |
| SSR が必須か？ | ✅ | ✅（設定が必要） |
| バックエンドを自前で持ちたいか？ | ❌ | ✅ |
| 予算はシンプルに抑えたいか？ | ✅ | ❌（サービスごとに見積必要） |
| 大規模スケールが見込めるか？ | ✅（プラン次第） | ✅（Auto Scaling） |
ポイント
- 小規模・中規模のフロントアプリは Vercel で速く始めるのがベスト。
- 大規模システムや独自バックエンドが必要な場合は AWS を選択し、インフラを段階的に拡張しましょう。
5. 実際に使ってみるサンプル（Vercel 用 GitHub Actions）
name: Deploy to Vercel
on:
push:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Deploy
uses: amondnet/vercel-action@v20
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
working-directory: .
このワークフローは GitHub Actions と Vercel をシームレスに結びつけ、プッシュ時に自動デプロイを実現します。AWS で同等の自動化を行う場合は、CodePipeline と Amplify の組み合わせが一般的です。