アプリを爆速で開発 ! AWS Amplify Studio で出来ること。

例えば、地図や位置情報の機能を Web アプリに組み込みたいとします。すると、「AWS 地図 Web アプリ」のように検索される方も多いかと思います。調べてみると、「Amazon Location Service を使えば出来るのは分かった。ただ、一から勉強しなければ ・・・」と思ったように開発が進まなくなってしまいます。

そのような課題を解決するのが Amplify Libraries と CLI です。Amplify Libraries では、以下のような様々なユースケースに対応した機能群 (カテゴリ) を提供しています。先程の例では、Geo カテゴリを用いることで、簡単に Location Service を使用することが出来るようになり、結果として Web / モバイルアプリへ地図や位置情報を活用した機能が追加できます。バックエンドとなる Location Service は Amazon CLI を使用して、CLI 上で数回の質問に答えることでセットアップできます。Geo カテゴリを触ってみたい方は、「Amplify Geo で React アプリに地図を表示してみよう」を参照してみてください。

他にも、Authentication カテゴリでは認証機能を追加することができ、Notification カテゴリではプッシュ通知を追加できます。それぞれのカテゴリについては、「Amplify Docs - Amplify Libraries」を参照してみてください。

また、Amplify Libraries に組み込まれたのユースケース以外にリソースを追加したい場合は、AWS Cloud Development Kit (CDK) または AWS CloudFormation を使用することで、Amplify が作成したバックエンドに様々な AWS サービスを追加できます。詳細は「AWS CDK または CloudFormation を使用し、カスタム AWS リソースで Amplify バックエンドを拡張する新機能「カスタム」のご紹介」を参照してみてください。

Amplify Libraries や CLI を用いて、アプリへ様々な機能追加や、アプリから操作するバックエンドのセットアップが爆速かつ簡単に出来ることは、ご理解いただけたかと思います。しかし、従来の Amplify ではフロントエンド UI 開発に関しては数百・数千行のコーディングが必要であり、フロントエンド開発者の負担はまだまだありました。

そこで、登場したのが Amplify Studio です。昨年末の AWS re:Invent 2021 で発表された Amplify Studio はバックエンドとの統合・管理機能を持ち、最小限のコーディングで UI 開発を加速する GUI 開発環境です。

バックエンドとの統合・管理機能にはデータモデルや認証、認可などがあり簡単にセットアップ可能です。(これまでの Amplify Admin UI の機能です。) また、Amplify Studio で作成されたすべてのバックエンドリソースは Amplify CLI からも使用可能です。

更に、Amplify Studio には、検索ボックスやユーザー登録など開発者が選択可能な数十種類の組み込み済み UI コンポーネントが用意されています。

開発者は、用意されたコンポーネントをカスタマイズしたり、Figma で作成した UI コンポーネントをインポートして使用することもできます。

さらに、Amplify Studioで UI コンポーネントをデータに簡単に接続することもできます。接続先として、既存のデータソース、サードパーティの REST API、または任意の HTTP エンドポイントを使用するようにデータモデルが設定できます。

バックエンドのみならず、フロントエンド UI 開発もサポートしてしまうとは、Amplify Studio 恐るべしですね !

実際に触ってみたい ! という方は、「AWS Amplify Studio – 最小限のプログラミングでFigmaからフルスタックの React アプリを実現」で実際に Amplify Studio を使ってアプリの構築していますので、是非参考にしてみて下さい。

アプリのビルドやテストが終わったら、いざステージング、プロダクション環境にデプロイ！としたいところですが、AWS 上で Web サイトをホスティングするためには、S3 バケットや Amazon CloudFront ディストリビューションを作ったりと、これまた設定が手間です。Amplify Hosting では数クリックで CloudFront を使った Web サイトのホスティングできます。

また、アプリには、新たな機能追加などによるコードの変更はつきものです。しかし、その都度テストやデプロイを手作業で行っていてはアジリティは下がってしまいます。

Amplify Hosting では、アプリのレポジトリと連携するだけで、$ git push するたびに最新のアプリケーションに更新してくれる CI/CD パイプラインも導入することができます。詳細は、「Welcome to AWS Amplify」を参照してみてください。他には、Amazon Route 53 で管理されるカスタムドメインをワンクリックで設定などもできます。

これまで紹介してきた機能などを使うことで爆速でアプリ開発が出来ることがイメージできたかと思います。しかし、サクッとアプリが作れたのはいいものの、「しっかりとスケールするのか ?」や「コストがかかりすぎるんじゃ ?」といった疑問を抱かれるかたもいらっしゃると思います。では、スケーラビリティとコストの観点からも Amplify を見てみましょう !

スケーラビリティ

AWS Amplify がプロビジョニングするリソースのほとんどが、Amazon API Gateway、AWS AppSync、AWS Lambda といったサーバーレスなサービスです。サーバーレスなサービスを利用することで、余分なリソースをあらかじめ準備する必要もなく、負荷に応じた柔軟なスケーリングを自動で行ってくれます。そのため、最初にスモールスタートした時と同じ構成でプロダクトが成長した後もアクセスを捌くように設定することができます。

コスト

同じくサーバーレスな構成の恩恵として、コスト最適化が挙げられます。サーバーレスなサービスは従量課金式のサービスがほとんどで、 リクエスト数や負荷の増減に合わせてコストも増減します。従来の Amazon EC2 インスタンスを用いたアプリケーションでは、トラフィックが少ない場合でも定常的にコストがかかってしまいます。

サーバーレスな環境ではトラフィックの少ない立ち上げ時のコストが抑えられるだけでなく、サービスが成長した後もトラフィックに応じた課金となり、コストの最適化を行うことができます。