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

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

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

:::note

`2023/12/3` 時点の [Vercel の公式ドキュメント](https://vercel.com/docs) を元に作成しています。

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

## [基本的な機能](https://vercel.com/docs/fundamentals)

### [フレームワーク](https://vercel.com/docs/frameworks)

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

- [Angular](https://angular.io/)
- [Astro](https://astro.build/)
- [Brunch](https://brunch.io/)
- [React](https://create-react-app.dev/)
- [Docusaurus](https://v2.docusaurus.io/)
- [Dojo](https://dojo.io/)
- [Eleventy](https://www.11ty.dev/)
- [Ember.js](https://emberjs.com/)
- [Gatsby.js](https://gatsbyjs.org/)
- [Gridsome](https://gridsome.org/)
- [Hexo](https://hexo.io/)
- [Hugo](https://gohugo.io/)
- [Hydrogen](https://hydrogen.shopify.dev/)
- [Ionic Angular](https://ionicframework.com/)
- [Ionic React](https://ionicframework.com/)
- [Jekyll](https://jekyllrb.com/)
- [Middleman](https://middlemanapp.com/)
- [Next.js](https://nextjs.org/)
- [Nuxt.js](https://nuxtjs.org/)
- [Parcel](https://parceljs.org/)
- [Polymer](https://www.polymer-project.org/)
- [Preact](https://preactjs.com/)
- [RedwoodJS](https://redwoodjs.com/)
- [Remix](https://remix.run/)
- [Saber](https://saber.egoist.dev/)
- [Sanity](https://www.sanity.io/)
- [Sapper](https://sapper.svelte.dev/)
- [Scully](https://github.com/scullyio/scully)
- [SolidStart](https://solidjs.com/)
- [Stencil](https://stenciljs.com/)
- [Storybook](https://storybook.js.org/)
- [SvelteKit](https://kit.svelte.dev/)
- [UmiJS](https://umijs.org/)
- [Vite](https://vitejs.dev/)
- [VitePress](https://vitepress.vuejs.org/)
- [Vue.js](https://vuejs.org/)
- [VuePress](https://vuepress.vuejs.org/)
- [Zola](https://www.getzola.org/)



### [プロジェクト](https://vercel.com/docs/projects/overview)

Vercel ではプロジェクトという単位で管理されています。プロジェクトは [GitHub](https://vercel.com/docs/deployments/git/vercel-for-github)、[GitLab](https://vercel.com/docs/deployments/git/vercel-for-gitlab)、[Bitbucket](https://vercel.com/docs/deployments/git/vercel-for-bitbucket)、[Vercel CLI](https://vercel.com/docs/cli) のいずれかでアップロードできます。

次の機能があります。

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



### [vercel.json](https://vercel.com/docs/projects/project-configuration#)

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

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

#### グローバルな設定

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

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



## [インフラストラクチャ](https://vercel.com/docs/infrastructure)



### [Edge Network](https://vercel.com/docs/edge-network/overview)

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

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

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



### [Serverless Functions](https://vercel.com/docs/functions/serverless-functions)

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

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

https://qiita.com/Michinosuke/items/47075de019bfd55c047e



### :star: [Edge Function](https://vercel.com/docs/functions/edge-functions)

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

Edge Function は、Chrome ブラウザで使用されているのと同じ [V8 JavaScript](https://developers.google.com/apps-script/guides/v8-runtime?hl=en) と WebAssembly エンジンで実行されます。

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

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



### [Edge Middleware](https://vercel.com/docs/functions/edge-middleware)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/5872fdee-c723-c801-22af-e767e4147ad5.png)

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



### [画像の最適化](https://vercel.com/docs/image-optimization)

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

この機能は、Next.js と Nuxt.js を使う場合には特に設定なく使うことができます。その他のフレームワークを使用する場合は、 [Build Output API](https://vercel.com/docs/build-output-api/v3/configuration#images) を設定することで利用できます。



### :star: [Incremental Static Regeneration (ISR)](https://vercel.com/docs/incremental-static-regeneration)

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

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



### :star: [Cron ジョブ](https://vercel.com/docs/cron-jobs#)

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



## [コラボレーション](https://vercel.com/docs/workflow-collaboration)

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



### [ツールバー](https://vercel.com/docs/workflow-collaboration/vercel-toolbar)

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



### :star: [コメント](https://vercel.com/docs/workflow-collaboration/comments)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/05c6f188-7ff2-0d69-a0fd-f322bcd9c502.png)


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



### :star: [ビジュアルエディタ](https://vercel.com/docs/workflow-collaboration/visual-editing)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/6c9f83c9-dfd6-1680-84b4-572c048e73a3.png)


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

- [Sanity](https://www.sanity.io/docs/vercel-visual-editing)
- [Builder](https://www.builder.io/c/docs/vercel-visual-editing)
- [TinaCMS](https://tina.io/docs/contextual-editing/overview/)
- [DatoCMS](https://www.datocms.com/docs/visual-editing/how-to-use-visual-editing)
- [Payload](https://payloadcms.com/docs/integrations/vercel-visual-editing)
- [Uniform](https://www.uniform.dev/blogs/visual-editing-with-vercel-uniform)



### [ドラフトモード](https://vercel.com/docs/workflow-collaboration/draft-mode#)

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



### [Vercel Spaces](https://vercel.com/docs/workflow-collaboration/vercel-spaces#)

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

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

- [Code Owners](https://vercel.com/docs/workflow-collaboration/vercel-spaces#code-owners)
- [Conformance](https://vercel.com/docs/workflow-collaboration/vercel-spaces#conformance)
- [Runs](https://vercel.com/docs/workflow-collaboration/vercel-spaces#runs)



## [ストレージ](https://vercel.com/docs/storage)

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

### [Vercel KV](https://vercel.com/docs/storage/vercel-kv#)

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

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

デフォルトでは単一の [リージョン](https://vercel.com/docs/storage/vercel-kv/limits#vercel-kv-region-list) に保存されますが、複数リージョンに分散させることもできます。



### :star: [Vercel Postgres](https://vercel.com/docs/storage/vercel-postgres#)

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

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

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

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

- [Kysely](https://vercel.com/docs/storage/vercel-postgres/using-an-orm#kysely)
- [Prisma](https://vercel.com/docs/storage/vercel-postgres/using-an-orm#prisma)
- [Drizzle](https://vercel.com/docs/storage/vercel-postgres/using-an-orm#drizzle)



#### コールドスタート

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



### [Vercel Blob](https://vercel.com/docs/storage/vercel-blob)

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

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

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

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



### [Vercel Edge Config](https://vercel.com/docs/storage/edge-config#)

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



## [オブザーバビリティ](https://vercel.com/docs/observability)



### [Web Analytics](https://vercel.com/docs/analytics#)

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

### [Speed Insights](https://vercel.com/docs/speed-insights#)

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

### [Monitoring](https://vercel.com/docs/observability/monitoring#)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/a21a8fc9-39bb-1e3f-9989-a46ee558cff3.png)


### [Runtime Logs](https://vercel.com/docs/observability/runtime-logs#)

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

### [Activity Log](https://vercel.com/docs/observability/activity-log#)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/1160b0f3-aa58-1bb9-cce2-fdb97e2519c2.png)

### [Log Drains](https://vercel.com/docs/observability/log-drains-overview/log-drains#)

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


### :star: [OpenTelemetry Collector](https://vercel.com/docs/observability/otel-overview/quickstart#)

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

OpenTelemetry (OTEL) のトレースを Serverless Functions から [New Relic](https://vercel.com/integrations/newrelic) のような application performance monitoring (APM) ベンターに送ることができます。

Enterprise プランでは、[DataDog](https://vercel.com/integrations/datadog) とも統合できます。



### [Checks](https://vercel.com/docs/observability/checks-overview#)

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

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

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



## [セキュリティ](https://vercel.com/docs/security/overview)

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



### [Vercel Firewall](https://vercel.com/docs/security/vercel-firewall#)

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



### [Access Control](https://vercel.com/docs/security/access-control#)

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



### [SAML Single Sign-On](https://vercel.com/docs/security/saml#)

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

チームメンバーを [Okta](https://www.okta.com/) や [Auth0](https://auth0.com/) といったサードパーティの IdP を通して管理できます。



### [HTTPS/SSL](https://vercel.com/docs/security/encryption#)

全てのデプロイは、HTTPS で配信されます。ユニークなURLに対する [SSL](https://en.wikipedia.org/wiki/Transport_Layer_Security) 証明書は、無料で自動的に生成されます。



### [Vercel Secure Compute](https://vercel.com/docs/security/secure-compute#)

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

[Serverless Functions](https://vercel.com/docs/functions/serverless-functions) とデータベースのインフラストラクチャ間でプライベートな接続を作成できます。



### [Deployment Protection](https://vercel.com/docs/security/deployment-protection#)

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

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

- [Vercel Authentication](https://vercel.com/docs/security/deployment-protection/methods-to-protect-deployments/vercel-authentication): Vercel アカウントで認証
- [Password Protection](https://vercel.com/docs/security/deployment-protection/methods-to-protect-deployments/password-protection): パスワード認証（Enterprise プランもしくは Pro　プランの有料アドオン）
- [Trusted IPs](https://vercel.com/docs/security/deployment-protection/methods-to-protect-deployments/trusted-ips): IPアドレスのホワイトリスト（Enterprise プラン）



### [Audit Logs](https://vercel.com/docs/observability/audit-log#)

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

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



## さいごに

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

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