いくつかの例外を除いて、Web アプリとモバイルアプリの構築、デプロイ、スケーリングは難しく、時間がかかります。 AWS AmplifyとVercelは、ワンクリックまたは数回のクリックでビルド、デプロイ、スケールのサイクルを提供するプラットフォームと見なされます。 どちらのプラットフォームも、妥当なコストで時間を節約し、エラーを減らします。
ローコード・ノーコード SaaS (Software-as-a-Service) の進歩により、高速で使いやすい開発環境が提供されます。 これらのサービスを起動するには、接続された git リポジトリにプッシュするだけです。 次に、グローバルコンテンツ配信ネットワーク (CDN) を構築してデプロイします。
今回はAWS AmplifyとVercelの特徴、長所と短所、そして48の機能比較を説明していきます。
1. 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) も同様のプロセスに従います。
AWS Amplifyサービスのデメリット
ビルド・デプロイとホスティングの両方が、AWS Amplify を通じて利用できます。 それらは従量課金制で個別に請求されます。
この取り決めには 2つの側面があります。
1. 使わなければ費用がかかりません。
2. 注意を怠ると、意図せずに多額の請求が発生したり、Web トラフィックが急増したりする可能性があります。
※ 構成エラーを犯したり、未使用のプロセスを終了しないままにすると、AWS はすぐ高額になる可能性があります。注意しましょう！
2. 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 またはデータベースを使用しない場合は、ストレージプロバイダーが必要になりますので、注意をしましょう。
3. AWS Amplify と Vercel: 48の機能の比較
| 比較項目 | 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 |
4. Vercel と AWS Amplify のどちらを選択するか
どちらのプラットフォームもエンタープライズ対応ですが、小規模なサイトに適しています (スキルが十分であれば)。
どちらのプラットフォームも、git からの自動ビルドとデプロイに対応できます。
しかしながら、それらを最大限に活用するには優秀で経験があるエンジニアが必要です。
例えば、
・JavaScript、React、または Jamstack のスペシャリストである
・バックエンドを完全に抽象化したい
・JavaScript Everywhere 用に構築されたプラットフォームが必要
などと考えているなら、Vercelを選ぶべきです。
しかし、もし
・自分でバックエンドを構成したい
・AWS フルスタックインフラストラクチャのパワーが必要
・ファイルをアップロードし、保存したい
ならAWS Amplifyを選ぶべきです。
最後に、Miichisoftはクラウドコンピューティングに注力して開発しています。2022年 AWSコンサルティングパートナーとして認証されています。
Webアプリケーション、モバイルアプリ、業務システム開発をクラウド上で検討している方は是非ともご相談ください。
要件定義、基本設計、詳細設計の上流段階から、開発・テスト、CICD導入などワンストップで対応しています。
ご連絡をお待ちしています。
よろしくお願いいたします。
