Vercelでできること総まとめ(2023)

Vercel は Web フロントエンドアプリのホスティングサービスとして有名ですが、他にもたくさんの便利な機能・サービスがあります。

この記事を読んで、Vercel でできることをまるっと把握しましょう！

2023/12/3 時点の Vercel の公式ドキュメント を元に作成しています。

個人的に知らなかったり、いいなと思った機能には をつけています。

基本的な機能

フレームワーク

Vercel は Next.js のメンテナではありますが、幅広いフロントエンドフレームワークに対応しています。現在、38種のフレームワークに対応しているようです。

• Angular
• Astro
• Brunch
• React
• Docusaurus
• Dojo
• Eleventy
• Ember.js
• Gatsby.js
• Gridsome
• Hexo
• Hugo
• Hydrogen
• Ionic Angular
• Ionic React
• Jekyll
• Middleman
• Next.js
• Nuxt.js
• Parcel
• Polymer
• Preact
• RedwoodJS
• Remix
• Saber
• Sanity
• Sapper
• Scully
• SolidStart
• Stencil
• Storybook
• SvelteKit
• UmiJS
• Vite
• VitePress
• Vue.js
• VuePress
• Zola

プロジェクト

Vercel ではプロジェクトという単位で管理されています。プロジェクトは GitHub、GitLab、Bitbucket、Vercel CLI のいずれかでアップロードできます。

次の機能があります。

• プレビューデプロイにコメントをつけられる（コラボレーションの項でも登場します）
• 環境変数
• カスタムドメイン
• Git リポジトリとの接続
• Git Large File Storage (LFS)
• ビルドを行うGitコミットの指定
• デプロイフック
• デプロイプロテクション（Vercelの認証もしくはパスワード認証）
• セキュリティ
  • ログ、ソースコードの保護
  • Git Fork の保護
• プロジェクトの一時凍結と再開、削除
• Vercel間でのプロジェクト移行
• Vercel で購入したドメインの移管
• モノレポ

vercel.json

Vercel の設定は、vercel.json で上書きすることができます。次の設定が含まれます。

• buildCommand : ビルドコマンドの設定
• cleanUrls : URL に拡張子を含むか
• crons : 特定のパスを定期的に実行する
• devCommand : ローカルで vercel dev したときのコマンド
• framework : フレームワーク
• functions : 関数のランタイム、メモリ、実行時間、実行ファイルなど
• headers : レスポンスヘッダー
• ignoreCommand : ビルドするか判定するためのコマンド
• images : Vercel組み込みの画像最適化API の設定
• installCommand : インストールコマンド
• outputDirectory : 出力先ディレクトリ
• public : ソースコードとログをパブリックにするか
• redirects : リダイレクト
• regions : リージョン
• functionFailoverRegion : デフォルトのリージョンが利用できないとき使用されるリージョン
• rewrites : URL の rewrite 設定
• trailingSlash : トレイリングスラッシュの設定
• git.deploymentEnabled : どのブランチへのコミットを自動デプロイするか
• github.autoAlias : マージ時にエイリアスを適用するかどうか（よくわからない）
• github.autoJobCancelation : プッシュ時に進行中のビルドをキャンセルするかどうか

グローバルな設定

verce.cli をローカルの指定の場所に配置することで、システムユーザに対して Vercel CLI の設定を行うことができます。

• Linux: ~/.local/share/com.vercel.cli
• macOS: ~/Library/Application Support/com.vercel.cli
• Windows: %APPDATA%\Roaming\xdg.data\com.vercel.cli

インフラストラクチャ

Edge Network

エッジネットワークでは、エンドユーザやデータに近い場所でコンピューティングを実行できるため、遅延を小さくし、エンドユーザの体験を向上させることができます。

エッジとは、CDN であると同時に、エッジでコンピューティングを実行するためのグローバル分散プラットフォームでもあります。

リダイレクトや rewrite の設定が可能です。

Serverless Functions

Serverless Functions を使用すると、インフラのことを気にせずに、コードを実行することができます。いわゆる FaaS です。

Serverless Functions は、JavaScript のほかに Go、Python、Ruby などでも記述できます。

Edge Function

Vercel の Edge Function では、軽量な Edge Runtime で動的なコンテンツを配信することができます。

Edge Function は、Chrome ブラウザで使用されているのと同じ V8 JavaScript と WebAssembly エンジンで実行されます。

Serverless Functions と比べ、小さい遅延かつ低コストを実現できます。

WebAssembly が動くので、WebAssembly を出力できるなら C でも Rust でも書くことができます。

Edge Middleware

Edge Middleware は、Serverless Functions や Edge Functions と違い、ネットワークキャッシュの外側で実行されます。

リクエストに応じて、レスポンスヘッダを書き換えたり、リダイレクトさせたりできるので、A/B テストなどに活用できます。

画像の最適化

Vercel には、画像を最適化して配信する機能が搭載されています。

この機能は、Next.js と Nuxt.js を使う場合には特に設定なく使うことができます。その他のフレームワークを使用する場合は、 Build Output API を設定することで利用できます。

Incremental Static Regeneration (ISR)

Vercel といえば、これですね。

コンテンツがリクエストされたときに、そのコンテンツを生成する必要があれば、そのコンテンツだけを生成して返すことができます。

Cron ジョブ

通常の cron と同じ構文を利用して、定期的に HTTP の GET リクエストを投げるようにスケジューリングすることができます。

コラボレーション

Vercel には、効率的にコミュニケーションを図るための機能が用意されています。

ツールバー

ツールバーは、プレビューでデプロイされたページに表示されます。ツールバーからは、コメントを追加したり、デプロイを共有したりできます。

コメント

Figma のように、Web ページ上に直接コメントすることができます。

コメントは、Slack にリンクさせることも可能です。

ビジュアルエディタ

この機能は、Pro または Enterprise プランで Beta 版として提供されています。

この機能は、CMSとコンテンツを同期させるだけでなく、そのコンテンツをページのUI上から編集できる機能です。

対応している CMS は、次の通りです。

• Sanity
• Builder
• TinaCMS
• DatoCMS
• Payload
• Uniform

ドラフトモード

この機能を使うと、ISR で ヘッドレス CMS からまだ公開されていないコンテンツを取得して、サイトにプレビュー表示できるようです。

Vercel Spaces

この機能は、Enterprise プランで Private Beta 版として提供されています。

コラボレーション、生産性、そしてソフトウェアの品質を向上させることができるプロダクトスイートです。次の機能が含まれているみたいです。

• Code Owners
• Conformance
• Runs

ストレージ

Vercel には、key-value データ、トランザクションデータ、大容量ファイルなどを保存するためのストレージサービスが存在します。

Vercel KV

この機能は、Hobby もしくは Pro プランで提供されています。

Vercel KV は、JSON データを保存するための Redis データベースです。

デフォルトでは単一の リージョン に保存されますが、複数リージョンに分散させることもできます。

Vercel Postgres

この機能は、Hobby もしくは Pro プランで提供されています。

Vercel Postgres は、Vercel Functions と フロントエンドフレームワークと統合するためにデザインされたサーバレスな SQL データベースです。スケーラブルでセキュアな PostgreSQL データベースを作成できます。

データベースは単一のリージョンにデプロイされ、Serverless Function と Edge Functions と互換性があります。

下記 ORM 用のテンプレートが用意されています。

• Kysely
• Prisma
• Drizzle

コールドスタート

Vercel Postgres には、コールドスタートがあります。5 分間アクセスがないとデータベースは一時停止され、次にアクセスされたときに最大 1 分の起動時間が発生します。

Vercel Blob

この機能は、Hobby もしくは Pro プランで提供されています。

Vercel Blob を使うと、ファイルをアップロードして、ユニークで予測されないURLで配信することができます。

次のようなユースケースで有効です。

• サイト上に表示するためにビルド時に生成されたアバターなどの画像や動画を保存、配信する
• ビデオや音声をグローバルネットワークを介して配信する
• Vercel で管理しているプロジェクトからアクセスする場合、Amazon S3 に保存するようなファイルを Amazon Blob に置いておくと簡単にアクセスできる

Vercel Edge Config

Edge Config を使用すると、A/Bテストや緊急時のリダイレクト、IP制限などを行えます。

オブザーバビリティ

Web Analytics

Webサイトにアクセスした人の参照元、位置情報、OS、ブラウザ情報などの統計をとれます。

Speed Insights

Webサイトのパフォーマンスを分析できます。

Monitoring

この機能は、Pro または Enterprise プランで提供されています。

帯域幅、エラー、パフォーマンスなどを視覚的に分析できます。

Runtime Logs

ランタイムのログを表示できます。

Activity Log

Vercel 上で、誰がどのような操作を行ったかが記録されます。

Log Drains

アプリケーションからのログを一元管理することができます。

OpenTelemetry Collector

この機能は、Pro または Enterprise プランで Beta 版として提供されています。

OpenTelemetry (OTEL) のトレースを Serverless Functions から New Relic のような application performance monitoring (APM) ベンターに送ることができます。

Enterprise プランでは、DataDog とも統合できます。

Checks

デプロイ時に実行されるテストを定義できます。

Checks API には次のような種類があります。

• Core: ページが 200 レスポンスを返すかチェックします。
• Performance: コアウェブバイタル を計測します。
• End-to-end: E2E でページが壊れたり画像が欠損していないかテストします。
• Optimization: バンドルサイズをチェックします。

セキュリティ

Vercel では、サイトの安全性を確保するためのさまざまなツールを提供しています。

Vercel Firewall

Vercel Firewall を使用すると、Web サイトを DDoS 攻撃や認証されていないアクセスから保護することができます。IP 制限も可能です。

Access Control

パスワード認証もしくはSSO認証でデプロイを保護することができます。パスワード認証は Pro もしくは Enterprise プランで、SSO 認証は Enterprise プランで利用できます。

SAML Single Sign-On

この機能は、Enterprise プランで提供されています。

チームメンバーを Okta や Auth0 といったサードパーティの IdP を通して管理できます。

HTTPS/SSL

全てのデプロイは、HTTPS で配信されます。ユニークなURLに対する SSL 証明書は、無料で自動的に生成されます。

Vercel Secure Compute

この機能は、Enterprise プランで提供されています。

Serverless Functions とデータベースのインフラストラクチャ間でプライベートな接続を作成できます。

Deployment Protection

Deployment Protection は、プレビューもしくは本番環境の URL を保護する機能です。

次の３つの方法でURLを保護できます。

• Vercel Authentication: Vercel アカウントで認証
• Password Protection: パスワード認証（Enterprise プランもしくは Pro　プランの有料アドオン）
• Trusted IPs: IPアドレスのホワイトリスト（Enterprise プラン）

Audit Logs

この機能は、Enterprise プランで Beta 版として提供されています。

チームメンバーのアクティビティを追跡・分析できます。

さいごに

私は今まで Vercel を「フロントエンドフレームワークをサクッとデプロイできるサービス」としてしか使っていませんでしたが、たくさんの機能があることがわかりました。

特に、cron 機能と Vercel Postgres はとても便利そうなので、ぜひ使っていきたいです！