はじめに
Vercelとは
Vercel is a platform for developers that provides the tools, workflows, and infrastructure you need to build and deploy your web apps faster, without the need for additional configuration.
上記は公式ドキュメントより引用です。
Webアプリケーションを高速にビルドしたりデプロイするために必要とされるツールやワークフロー、インフラを提供するプラットフォームであり、設定の必要もあまりないとのことです。
あえてジャンル分けするのであればPaaSが近いですが、インフラのみでなくツールやワークフローの提供にまで言及しているというところが特徴かと思われます。
サービス名がVercelであり、それを提供している会社名もVercelです。
このVercel社は、Next.jsを開発している会社でもあるため、特にNext.jsを採用したWebアプリケーションとの親和性が高いとも考えられます。
Vercelの利用方法
Next.jsを利用しているアプリケーションであれば、Vercelを利用することは簡単です。
Vercelのダッシュボードから、まずはプロジェクトを作成する必要があります。
プロジェクトを作成するためにはVercel上からたとえばNext.jsのテンプレートを利用することもできますし、既存のNext.jsを採用したアプリケーションをGitHubから連携することもできます。
そうして、プロジェクトが作成されると、もうVercelとしてはアプリケーションが動作する状態まで自動的にビルドやデプロイが実行されます。
Vercelのドメインも設定されているため、Webアプリケーションとしてアクセスできる状態にもなっています。
Vercelの仕組み
前項で説明した通り、Vercelはプロジェクトを作成し、コードをVercelに渡すだけでアプリケーションとして動作する状態にしてくれます。
これはどのような仕組みで実現されているのでしょうか。
ビルド&デプロイとアプリケーションへのリクエストという二つの観点で、それぞれの流れについて解説したいと思います。
ビルド&デプロイ
Behind the scenes of Vercel's infrastructure: Achieving optimal scalability and performance – Vercel
下図は、上記ページから引用しています。
- Vercelが提供するCLIツールや、GitHubのWebhookによってビルドがキックされる（上図はCLIツールからビルドがキックされるパターン）
- ビルドがキックされると、Deployments Queueにビルドがインキューする
- Deployments Queueにビルドがインキューすると、Vercelのインフラ内でビルドが始まる
- ビルドはビルド用のコンテナで行われる
- ビルド用のコンテナでビルドが行われた結果、成果物は静的ストレージ（html、jsなど）やServerless Functions（APIなど）などにデプロイされる
アプリケーションへのリクエスト
Behind the scenes of Vercel's infrastructure: Achieving optimal scalability and performance – Vercel
下図は、上記ページから引用
- 前提として、VercelはEdge Locationにアプリケーションを構築している
- Edge Locationの入口部分にはGatewayがいて、アプリケーションへのリクエストはそれを全て通過する
- 静的ファイル（htmlやjs）へのリクエストは、GatewayがStorageに対してアクセスを振り分ける
- APIへのリクエストは、GatewayがServerless Functionに対してアクセスを振りわける
Discussion