いくつかの例外を除いて、Web アプリとモバイルアプリの構築、デプロイ、スケーリングは難しく、時間がかかります。 AWS AmplifyとVercelは、ワンクリックまたは数回のクリックでビルド、デプロイ、スケールのサイクルを提供するプラットフォームと見なします。 どちらのプラットフォームも、妥当なコストで時間を節約し、エラーを減らします。
ローコード・ノーコード SaaS (Software-as-a-Service) の進歩により、高速で使いやすい開発環境が提供されます。 これらのサービスを起動するには、接続された git リポジトリにプッシュするだけです。 次に、グローバルコンテンツ配信ネットワーク (CDN) を構築してデプロイします。
今回はAWS AmplifyとVercelの特徴、長所と短所、そして50の機能比較を説明していきます。
AWS Amplifyとは？設定流れと注意点
AWSのAmplify は、AWS インフラストラクチャプラットフォーム全体をローコードで自動制御します。 フロントエンドを視覚的に構築するオプションを使用し、バックエンドを視覚的に構築することで、アプリとその環境を完全に制御できます。
AWS Amplify は、フルスタックのウェブおよびモバイルアプリ、静的ウェブサイト、および静的ウェブアプリの作成を支援します。
簡単にするために、AWS Amplify を構成してサーバーレスにし、DevOps の知識が分からなくても利用できます。また、フロントエンドを処理し、git にプッシュするだけで、あとは Amplify が行います。
AWS Amplify はワンクリックデプロイという実装がありませんが、AWS Amplify コンソールは、視覚的でシンプルな5ステップの設定を提供します。
1. リポジトリを接続します。
2. フロントエンドのビルド設定を確認します。
3. バックエンドのビルド設定を確認します。
4. 環境変数を追加します (オプション)
5. 保存して展開します。
これで設定終了！Google Firebaseなどが使っているオプションのコマンドライン インターフェイス (CLI) も同様のプロセスに従います。
参考：Google FirebaseとAWS Amplifyの比較
AWS Amplifyサービスのデメリット
ビルド・デプロイとホスティングの両方が、AWS Amplify を通じて利用できます。 それらは従量課金制で個別に請求されます。
そこで、使用しない限りお金はかかりませんが、意図せずに多額の請求が発生したり、Web トラフィックが急増したりする可能性があるので注意が必要です。
※ 構成エラーを犯したり、未使用のプロセスを終了しないままにすると、AWS はすぐに高価になる可能性があります。注意しましょう！
Vercelとは？
Vercelは、Reactフロントエンド開発者向けのサービスとしてのプラットフォーム (PaaS) です。 バックエンドを抽象化することで、静的サイトとフロントエンド フレームワークを展開し、すべての git プッシュで自動的にスケーリングできます。
Vercel は、ヘッドレス CMS、データベース、またはEコマースアプリと統合します。 このように高性能であることから、 eBay、Washington Post、Uber、McDonalds、Facebook などの大企業サイトでは、Vercel が使用されています。
Vercel は、高速でスケーラブルな Web アプリの React フレームワークである Next.js の開発でも有名です。 Next.js は、Starbucks、Twitch、Netflix など、多くの大規模な Web サイトで使用されています。
組み込みの CI/CD を使用して、ワークフローを簡単に自動化します。 次に、Vercel がビルド プレビューを表示します。 ワンクリックでアプリを即座に Vercel Edge Network CDN にデプロイします。 このCDN は、サーバーレス AWS Lambda を基盤として使用して、世界中のリージョンにスケーリングします。
Vercelサービスのデメリット
Vercelを活用するため、エンジニアは特定のスキルセットを持つ必要があります。
JavaScript Everywhere をモットーとするVercel は、強力ですが柔軟性に欠けるプラットフォームです。
Vercel は主に Next.js の開発に注力しています。
ヘッドレス CMS またはデータベースを使用しない場合は、ストレージプロバイダーが必要になりますので、注意をしましょう。
AWS Amplify と Vercel: 50 の機能の比較
| 比較項目 | AWS Amplify | Vercel |
| サービスの説明 | SaaS, Scalable, Full-stack Apps | SaaS, Global Static Websites |
| 開発環境 | Amplify Studio | Vercel |
| サポートフレームワーク | SPA Frameworks, Static site generators SSR | Jamstack, React, Next.js, JavaScript, Gatsby |
| Web プロジェクトの自動化 | 有 | 有 |
| 自動ビルド | GitHub, Bitbucket, GitLab, AWS CodeCommit | GitHub, GitLab, Bitbucket |
| モノレポのサポート | 有 | 有 |
| 自動スケーリング | 有 | 有 |
| ビルド バージョンのロールバック | 有 | 有 |
| デプロイ プレビュー | 有 | 有 |
| インフラストラクチャー | AWS | Multi-cloud |
| CDN | 有 | 有 |
| キャッシュの無効化 | 有 | 有 |
| エッジ ハンドラー | AWS Cloudfront | Edge Functions |
| ファイルの最適化 | CDN | CDN |
| 対象ユーザー | Web & Mobile App Devs, Frontend Devs | Front End Devs |
| DevOpsが必要? | 無 | 無 |
| 静的 Web アプリ | 有 | 有 |
| モバイルアプリ | 有 | 無 |
| JAMスタック | 無 | 有 |
| LAMBDA 関数 | 有 | 有 |
| マイクロサービス | 有 | 有 |
| サーバーレス | 有 | 有 |
| バックエンド | サーバーレス | サーバーレス |
| ヘッドレス CMS | サードパーティー | サードパーティー |
| CLI | 有 | 有 |
| CI/CD | 有 | 有 |
| データベース | Amazon Aurora MySQL | サードパーティー |
| 認証 | Amplify Auth | サードパーティー |
| HTTPS SSL化 | AWS Certificate Manager | Free Let’s Encrypt certificate |
| グローバルな可用性 | 有 | 有 |
| ホスティング | 有 | 有 |
| APIs | graphQL, REST | graphQL, REST |
| 自動デプロイ | 有 | 有 |
| グローバル ビルド、テスト、デプロイ | 有 | 有 |
| 高性能ビルド | 有 | 有 |
| Git デプロイへのプッシュ | 有 | 有 |
| バージョンのロールバック | 有 | 有 |
| ストレージ | S3 | 10 GB Free |
| 依存キャッシュ | 有 | 有 |
| テスティング | Site Previews | Site Previews |
| 固定IPアドレス | 無 | 無 |
| フォーム管理 | 無 | サードパーティー |
| パスワード保護 | 有 | 有 |
| 分割テスト | サードパーティー | 有 |
| アドオン | 有 | 有 |
| チームの権限 | 有 | 有 |
| 無料トライアル | Free Tier | Hobby Plan, 14-day Free Trial for Pro |
| 価格 | Free Tier, Pay-as-you-go | Free, $20/m |
Vercel と AWS Amplify のどちらを選択するか
どちらのプラットフォームもエンタープライズ対応ですが、小規模なサイトに適しています (スキルが十分であれば)。
どちらのプラットフォームも、git からの自動ビルドとデプロイに対応できます。
またそれらを最大限に活用するには優秀で経験があるエンジニアが必要です。
例えば、
・JavaScript、React、または Jamstack のスペシャリストである
・バックエンドを完全に抽象化したい
・JavaScript Everywhere 用に構築されたプラットフォームが必要
等と考えているなら、Vercelを選ぶべきです。
しかし、もし
・自分でバックエンドを構成したい
・AWS フルスタックインフラストラクチャのパワーが必要
・ファイルをアップロードし、保存したい
ならAWS Amplifyを選ぶべきです。
最後に、Miichisoftはクラウドコンピューティングに注力して開発しています。2022年 AWSコンサルティングパートナーとして認証されています。
Webアプリケーション、モバイルアプリ、業務システム開発をクラウド上で検討している方には是非ともご相談ください。
要件定義、基本設計、詳細設計の上流段階から、開発・テスト、CICD導入などのワンストップで対応しています。
ご連絡お待ちしています。
よろしくお願いいたします。
ソース：Digger (AWS Amplify vs. Vercel: 50-feature Comparison)
