Vercel は何をしてくれる?
Vercel は、人気フレームワーク Next.js の開発元が運営する、Web フロントの開発・確認・公開をひとつながりに扱うプラットフォームです。合言葉は『Git に置けば公開』。その push の瞬間から、裏側で何が起きているのかをたどりましょう。
各ブロックや矢印をクリックすると、その仕組みの説明がここに表示されます。
人の作業は push まで — 確認も公開も自動で流れる
この図をテキストで読む
構成図「Vercel の流れ（push すれば公開）」。ブロック5個、つながり4本。 枠: Vercel プラットフォーム（ブロック3個）。 【ブロック】 - git push: コードを置く - ビルド & プレビュー: 変更ごとに自動 - CDN ＋ Firewall: 自動HTTPS・WAF/DDoS - Vercel Functions: サーバレス (Fluid Compute) - データ: 外部DB / Blob・Edge Config 【図の符号】青の枠=人・利用者 / 緑の枠=関門・経由点 / 赤紫の枠=データの置き場 / 青の囲み枠=境界の囲み 【流れ】 - push から公開まで: git push → ビルド & プレビュー → CDN ＋ Firewall → Vercel Functions → データ
Blob / Edge Config / 外部DB（Marketplace）を見くらべる
各セルをクリックすると、その意味や詳しい説明がここに表示されます。
この図をテキストで読む
比較表。3列 × 3行。 【列】 1. Vercel Blob（ファイル） 2. Edge Config（設定値） 3. Marketplace（外部DB） 【比較】（観点ごとに） ■ 何を置くか - Vercel Blob: 大きなファイル / 画像・動画・PDF - Edge Config: よく読む設定値 / 機能フラグ・リダイレクト先 - Marketplace: 本格DB / PostgreSQL / Redis 等 ■ 提供 - Vercel Blob: 自社 - Edge Config: 自社 - Marketplace: 外部を画面から払い出し / Neon / Supabase / Upstash 等 ■ 特徴 - Vercel Blob: 大容量ファイル向け - Edge Config: 世界中で超低遅延の読み取り - Marketplace: 接続情報を環境変数に自動注入 【観点】 - Blob で見る: Vercel Blob - Edge Config で見る: Edge Config - Marketplace で見る: Marketplace
プレビューURLは既定で公開
変更ごとに作られるプレビュー配備は、既定では URL を知っていれば誰でも見られます。公開前の内容が URL の流出で見えてしまわないよう、Deployment Protection での保護を確認しておきましょう。
押さえておきたい用語
- プレビュー配備
- Vercel Functions
- Fluid Compute
- Active CPU 課金
- Hobby / Pro / Enterprise
- Marketplace
- Deployment Protection
- v0 / AI SDK
『クラウド のまとめ読み』を読み終えました。
クラウド の記事 7 本を、行き来せずひととおり読み終えられます。