この記事を読んだ後に理解できること

• Vecelの概要
• Vercelの料金、無料プランについて

Vecelとは

概要

Vercelとは、フロントエンド開発のプラットフォームになります。

VercelはAWS上に構築されているインフラプラットフォームです。


（引用：https://vercel.com/blog/behind-the-scenes-of-vercels-infrastructure）

通常、Next.jsの機能をフルに活用する場合は、インフラ設定も大きく関わってきますが、これをAWS上で自前実装するとなると大変な作業になります。

Vercelを使うことでこの手間を一切かけずにNext.jsの機能をフルに発揮することができるようになります。

特徴として以下が挙げられます。

• フロントエンドアプリケーションのデプロイ
  • gitリポジトリをインポートすればVecelがフレームワークを読み取り、設定なしでデプロイが可能

• CI/CD環境の構築不要
  • mainブランチ以外のブランチをpushすれば、プレビューモードと呼ばれるデプロイを行ってくれる。複数人で開発している場合は、そのプレビューモードで実際の挙動を確認できる

• カスタムドメインの設定
  • Vercelはデフォルトでドメインを設定した状態でデプロイをしてくれるが、独自ドメインに設定も可能

• プロジェクトのモニタリングが可能
  • デプロイしたプロジェクトのビルドログや解析が可能

これらの機能は商用利用目的でなければ、無料で使うことができます。

Vercelはモダンなフロントエンドフレームワークをほとんどサポートしています。

代表的なものとしては以下となります。

• Next.js
• Nuxt
• Vue.js
• React
• Gatsby
• Solid
• Angular

利用方法

まずはVercelに新規登録をします。

Githubアカウント、GitLabアカウント、Bitbucketアカウントでの登録、もしくはemailでの登録が可能です。


新規登録が終わったら、Gitプロバイダーを選択します。



リポジトリのインポートを行います。



あとは環境変数の設定等を行って、デプロイボタンを押すだけです。

これだけでデプロイが完了します。

料金体制

• Hobbyプラン
  • 0$
• Proプラン
  • 20$
  • なお現在（2023/3/28時点）は、2週間の無料トライアルがあります
• Enterprise
  • 内容による

プランごとにできることは細かいところも含めれば、結構あります。
なので割愛します。
以下の公式ドキュメントを参考にしてください。

無料で使えるHobbyプランですが、こちらには制約があります。

• 商用利用ができない

具体的に以下のようなサイト運用はHobbyプランでは制限されています。

• プロジェクトに関わった人物に給与等を分け与えることを目的としたデプロイメント

• サイトの訪問者に支払いを要求したり処理したりするあらゆる方法

• 製品またはサービスの販売を宣伝すること

• サイトの作成、更新、ホスティングのために支払いを受けること

• アフィリエイトリンクが主目的なサイト

• GoogleAdsenseのような広告を含めること

アフィリエイトはもちろん、サイトの構築に関わった人へ給与を渡す前提でのデプロイ、サイト作成の見返りに報酬を受け取ることも禁止されています。

ちなみにHobbyプランでも個人レベルのサイト運用に必要な機能はほとんど使用可能です。


利益目的であれば、Proプランへの切り替えが必要になります。

円安の影響もあって、個人利用であればProプランは割高な気がします。

さいごに

今回はVercelの概要や料金体制、無料プランでの制限について解説しました。

Next.jsはその多彩な機能により、注目されていますが、その機能を使いこなすためにはVercelを使う必要があるところが難点かと思います。


というのもNext.jsのISRやOndemand ISRの機能はAWS等のクラウドインフラでの再現が難しいです。

個人的にProは割高、かといってAWSで環境構築してもISRやOndemand ISRが使えないというのは中々モヤモヤするところです。

次回は、Vercelの仕組みを深掘りたいと思います。