【ばーせる】

Vercel とは?

💡 git pushだけでWebサイトが世界に届く魔法のプラットフォーム
📌 このページのポイント
Vercelのデプロイフロー Git Push GitHub / GitLab 自動ビルド Next.js / Astro など エッジ配信 世界中の CDNへ展開 ユーザー 高速表示 プレビュー機能 PRごとにプレビューURLを自動生成 → チームでレビュー可能
Vercelのデプロイフロー:git pushから世界配信まで自動化
ひよこ ひよこ

Vercelって何ができるサービスなの?

ペンギン先生 ペンギン先生

Webサイトやアプリのフロントエンドを、びっくりするほど簡単にデプロイ(公開)できるクラウドサービスだよ。GitHubにコードをpushするだけで、自動的にビルドされて世界中からアクセスできるようになるんだ。

ひよこ ひよこ

AWSとかと何が違うの?

ペンギン先生 ペンギン先生

AWSは汎用的なクラウドで何でもできるけど設定が複雑。Vercelはフロントエンドに特化していて、面倒な設定がほとんどいらないんだ。例えるなら、AWSは自分で全部組み立てる工具セット、Vercelは「ボタンを押せば完成する自動組み立て機」みたいなものだよ。

ひよこ ひよこ

Next.jsじゃないとダメなの?

ペンギン先生 ペンギン先生

Next.jsが最も相性がいいけど、AstroNuxt、SvelteKit、普通のReactアプリなど、ほとんどのフロントエンドフレームワークに対応しているよ。ただ、Next.jsの開発元が運営しているだけあって、Next.jsの最新機能がいち早くサポートされるのは強みだね。

ひよこ ひよこ

プレビュー機能って便利そう!

ペンギン先生 ペンギン先生

そう、プルリクエストを出すと自動でプレビューURLが生成されるから、「この変更でサイトがどう変わるか」をデプロイ前に確認できるんだ。デザイナーやPMにURL を共有してフィードバックをもらうのにめちゃくちゃ便利だよ。

ひよこ ひよこ

無料で使えるの?

ペンギン先生 ペンギン先生

個人プロジェクトなら無料のHobbyプランで十分使えるよ。ただし商用利用にはProプラン(月20ドル〜)が必要で、帯域やビルド時間に制限があるんだ。あと、VercelのエッジネットワークはCloudflareと競合する領域で、最近はAI推論のエッジ実行など機能が急拡大しているよ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Vercel」って出てきたら「フロントエンドを超簡単にデプロイできるクラウド」と思えればだいたいOK!
📖 おまけ:英語の意味
「Vercel」 = 加速する(accelerateの変形)
💬 元々は「ZEIT(ドイツ語で時間)」という社名だったけど、2020年にVercelに改名したよ。「加速」のニュアンスが込められた造語だよ
← 用語集にもどる