Vercel
コードをGitに置くだけで世界中へ公開できる、Webフロントエンド/アプリ向けのプラットフォーム。プレビュー配備など開発体験(DX)とフロントの最適化に強み
Vercel は、コードを Git に置くだけで確認から公開まで自動で進む、Web フロント向けのプラットフォームです。開発体験（DX）のよさを看板に掲げます。
- 変更ごとに確認用のプレビュー環境が自動でできる
- CDN・防御・HTTPS の前段は配備すれば内蔵で付く
- 本格 DB は外部前提 — 画面から払い出してつなぐ
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
- 1つのインスタンスで複数リクエストを同時に処理し、起動の遅れや待ち時間を抑える Vercel の実行方式。2025年に導入。
- Active CPU 課金
- 実際にコードが計算している時間だけを課金対象にし、DBの応答待ちなどの待ち時間は数えない数え方。
- Hobby / Pro / Enterprise
- 個人・非商用の無料プラン、席（seat）課金＋従量の Pro、個別見積りの Enterprise という 3 段のプラン。転送量など数える項目は多め。
- Marketplace
- 外部のDBなどを Vercel の画面から選んで導入し、接続情報を環境変数に自動で受け取れる連携の仕組み。
- Deployment Protection
- 配備物（プレビューや本番）への外部アクセスを制限する仕組み。アプリ利用者向けのログインとは別もの。
- v0 / AI SDK
- UI を生成AIで組み立てる v0 と、生成AIアプリを作るための開発部品 AI SDK。開発の足場を生成AI側へ広げている。
ここから先へ
この解説とつながりのあるページ