
目次
はじめに
当ブログはVercelのHobbyプランで運用していましたが、このたびAWS Amplifyに移行しました。
この記事では、Vercel HobbyプランからAWS Amplifyに移行を決めた理由と、実際に移行したあとに分かった両者のプラットフォームの違いについてまとめました。
Vercel→AWS Amplify 移行理由
移行を検討するきっかけになったのは、このブログでAmazonアソシエイトをはじめたかったからです。
VercelのHobbyプランは商用利用不可のため、広告を貼ったりアフィリエイトを行ったりするにはProプランにする必要があります。
Proプランへのアップグレードも考えたのですが、既に使用した経験のあるAWS Amplifyの方が運用コストを抑えることができそうだったので、この機会にプラットフォームごと変えることにしました。
コスト比較
Vercel
VercelにはHobby・Pro・Enterpriseの3つのプランがあります。
Find a plan to power your projects. – Vercel
From early-stage startups to growing enterprises, Vercel has you covered.
https://vercel.com/pricing

3つのプランの違いを簡単にまとめました。
Hobby | Pro | Enterprise | |
---|---|---|---|
用途 | 非商用の個人利用向け | 商用またはチーム向け | さらなるセキュリティ、サポート、パフォーマンスが必要なチーム向け |
金額 | 無料 | 1ユーザあたり$20/月 ※ただし制限を超えた分は従量課金 | Custom |
商用利用 | ❌ | ⭕ | ⭕ |
チーム利用 | ❌ | ⭕ | ⭕ |
HobbyからProプランに変更する場合は、最低でも$20/月のコストがかかります。
Proプランにもデータ転送量やビルドの実行時間の制限があり制限を超えた分は従量課金になりますが、かなり余裕を持った制限となっています。
AWS Amplify
AWS Amplifyは従量課金となります。
AWS Amplify の料金 | ウェブとモバイルのフロントエンド | Amazon Web Services
AWS Amplify では使用した分に対してのみ支払いが発生し、最低料金やサービス使用義務はありません。AWS 無料利用枠を使って無料でお試しください。
https://aws.amazon.com/jp/amplify/pricing/

ただし、最初の1年間は制限内の利用であれば無料となっています。
従量課金の詳細は公式ドキュメントに記載されていますが、長くなるのでここでは割愛します。
料金の例として、以下のような記載があります。
- 300人のアクティブユーザー/日、600ビルド/月 →8.08USD/月
- 10,000人のアクティブユーザー/日、6ビルド/月 →65.98 USD/月
(詳細な計算式はドキュメントで確認できます。)
ちなみにこのブログの場合は以下の通りです。
- 100人のアクティブユーザ/日、ビルド10回/月 →約3.00 USD/月
主に、ビルドとデプロイの時間とデータ転送(OUT)にお金がかかるため、月のビルド回数とアクティブユーザー数が分かれば概算を計算できます。
以上から分かるように、アクセス数がそこまで多くないWebサイトでは従量課金であるAWS Amplifyの方がコストを抑えることができます。
VercelとAWS Amplifyの違い
当ブログはNuxt.jsで運用していて、単純にサイトを公開するだけであればVercelでもAmplifyでも問題なく可能です。
実際に移行をしてみて、使い勝手に関わる部分で機能の違いがあったのでまとめます。 また、簡易的なアプリケーションを想定しているため、Serverless Functionsやキャッシュ等には触れません。
Vercel
Vercel Toolbar
Vercelの便利な機能としてVercel Toolbarがあります。
Vercel Toolbar
Learn how to use the Vercel Toolbar to leave feedback, navigate through important dashboard pages, share deployments, use Draft Mode for previewing unpublished content, and Edit Mode for editing content in real-time.
https://vercel.com/docs/vercel-toolbar
Vercel Toolbarは、デプロイ環境に表示される開発支援ツールです。 コメントやブランチ切り替えといった機能を、画面下部のツールから簡単に行うことができます。

Vercel Toolbarから打ち込んだコメント
PRへの表示
VercelはGitHubと連携する設定をするだけでGitHubのリポジトリにVercel botが設定されます。 GitHubにプッシュするとPRのコメントでVercel botが表示されます。

Vercel bot
ここではビルドの進捗やPrevier環境のURL等が表示されるようになっており、マージ後の作業にすぐに取り掛かることができます。
ログイン認証が付いている
Vercelのプレビュー環境はデフォルトでログイン認証がかかっています。
プレビュー環境はVercelのチーム内の人しか見ることはできず、逆にVercelにログイン済みであればパスワード不要でプレビュー環境を表示することができます。 (チーム外の人でも共有リンクによるアクセスの方法はあります。)
一方で、パスワードによる認証はProプラン以上、IPアドレスによる認証はEnterpriseプラン以上のみが使用可能です。
AWS Amplify
コストが低い
AWS Amplifyの利点小規模なサイトでは運用コストが低いことです。 上にも書きましたが、VercelのProプランの$20の代わりに、Amplifyでは従量課金の金額$3ほどなので大幅にコストカットできています。
Basic認証を設定できる
Amplifyのアクセスコントロールメニュー
では、ブランチごとにBasic認証をかけることができます。
AWSのユーザがなくてもアクセスできるため、融通が効きました。
Vercelにも「パスワード保護」という機能がありますが、利用には月額150ドル追加費用がかかります。 (※詳細な認証方法は不明ですが、Basic認証とは違ってVercelのメンバーでないとログインできない仕様かもしれません。)
まとめ
この記事では、Vercel(Hobbyプラン) からAWS Amplifyに移行したときのコストや機能の違いを解説しました。
小規模なサイトであれば、Amplifyの方がコストを抑えられる一方で、Vercelの方がVercel botやVercel botといった便利な機能があることが分かりました。
必要に応じて使い分けるのが良さそうです。 Node環境をデプロイする際の、プラットフォーム選択の参考になれば幸いです。
関連記事

AWS IAMでPasskeyが利用可能に Windows PCで指紋認証を設定してみました

React公式チュートリアルをVueでも書いて比較してみた

Vueのスコープ付きCSSで子コンポーネントにCSSを適用する【Vue3】

手軽に使えるVueプレイグラウンド環境。Vue SFC Playground解説

Vite、TailwindCSS v4環境を構築【Tailwind CSS v4-alpha】

「vite-plugin-react can't detect preamble.」エラー対応【PHP、React】
オススメ記事

React公式チュートリアルをVueでも書いて比較してみた

フロントエンド開発体験を向上させる10のnpmライブラリ【2024年版】

VueのdefineModelを活用した入力コンポーネントの作成方法【Vue3.4】

Nuxt3にStorybookを導入する方法

NuxtJSを使ってブログを作ってみた【Nuxt Content/TailwindCSS/daisyUI】
