Vercel Blobが『S3の複雑さ』を消す
Vercel BlobはVercel/Next.js環境向けに設計されたオブジェクトストレージで、S3の代替として位置付けられます。SDKでアップロード・CDN配信を3行から書け、IAM・CORS・バケットポリシー等のS3で詰まりやすい設定が不要。Next.js App Router・Server Actions連携が完全で、SaaSスタートアップの画像・動画・ファイルストレージ用途で本番採用例が広がっています。
採用すべき5つのシグナル
- S3の設定(IAM・CORS・署名URL)に時間を取られている
- Next.jsアプリでファイルアップロード機能が必要
- CDN配信を別途設定したくない
- 運用負荷を最小化したい
- マルチクラウド要件がない(Vercelで完結)
S3/Cloudflare R2/Vercel Blob比較
S3: 機能完備・大規模実績・設定複雑・運用負荷あり。
Cloudflare R2: S3互換・エグレス無料・コスト圧倒的に安い・Workers統合。
Vercel Blob: Next.js統合特化・SDKシンプル・料金中位。
使い分け: 大規模・マルチクラウドはS3、コスト重視はR2、Next.js統合重視はVercel Blob。
実装の基本パターン
(1) アップロード: const { url } = await put('file.txt', body, { access: 'public' })
(2) クライアントアップロード: uploadでブラウザから直接アップロード(Vercel経由しない)
(3) 削除: await del(url)
(4) リスト: const { blobs } = await list({ prefix })
(5) 一覧UIから配信URL生成・Next.js Image統合
料金感(実務目安)
- Hobby (Free): 1GB Storage・1GB Data Transfer/月
- Pro: 100GB Storage + 100GB Transfer/月、追加$0.15/GB
- Enterprise: 個別契約
- S3との比較: 中規模利用ではS3の方が安い、開発生産性込みで判断
S3が向く・Blobが向くケース
- S3が向く: 大規模・マルチクラウド・複雑な権限・ライフサイクル管理
- Blobが向く: Next.js統合・最短実装・スタートアップ・MVP開発
- R2が向く: コスト重視・エッジ統合・Cloudflareエコシステム
実装で詰まる3つの落とし穴
- クライアントアップロードの設計: 大きなファイルはVercel経由せず直接Blobへ。サーバAPIで署名トークン発行
- アクセス制御: publicまたはランダムURLによる秘匿化。きめ細かい権限は別ロジック必要
- Egress料金: 大量配信時の従量課金。CDNキャッシュヒット率を上げる工夫
30日プラン
- 1週目: Next.js + Vercel Blobでファイルアップロード機能実装
- 2週目: クライアントアップロード・大容量ファイル対応
- 3週目: 画像最適化・Next.js Image連携
- 4週目: 本番運用・料金最適化
関連リンク
S3全般は S3実践、Cloudflare R2は Cloudflare R2深掘り、Next.js統合は Next.js深掘り を参照してください。