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

2022-03-02
デベロッパーのためのクラウド活用方法

稲田 大陸

みなさんこんにちは!Solutions Architect の稲田 (@inariku) です。

アプリケーション開発を爆速で行うことができる新たなサービスとして、昨年末の AWS re:Invent 2021 で「AWS Amplify Studio」が発表されました。早速気になって試された方や、「Amplify Studio・・・? 色々ややこしくなってきたな・・・」と思われた方もいらっしゃるかと思います。

そこで、今回は改めて AWS Amplify の要点を整理しつつ、新しく登場した AWS Amplify Studio をご紹介します。これから Amplify を触ってみたいと思う方にも分かりやすくまとめていますので、ご安心ください !


AWS Amplify とは ?

AWS Amplify は、Web / モバイルアプリ開発者が、機能豊富なアプリを AWS 上で爆速で構築することを目的としたツールと機能のセットであり、幅広い AWS サービスと連携できる柔軟性を備えています。従来、AWS 上で Web / モバイルアプリを構築するためには、様々な AWS サービスの知識や経験が必要でした。しかし、Amplify を使用することで、様々な AWS サービスの知識や経験が無くても爆速かつ簡単にアプリのバックエンドを構築し、Web フロントエンド に接続することができます。

AWS Amplify は以下の 4 つから構成されています。ここで、もしかしたら Amplify に詳しい方は「Amplify Admin UI がなくなった ?」と思われた方もいらっしゃるかもしれませんが、従来の Amplify Admin UI の機能は 新しく出た Amplify Studio の一部として提供されています。

Amplify LIbraries

Web / モバイルアプリと AWS を統合するための OSS ライブラリ

Amplify CLI

Web / モバイルアプリのバックエンドをインタラクティブに作成・管理するための OSS ツールチェーン

Amplify Console

フルスタックサーバーレス Web アプリをビルド、テスト、デプロイ、ホスティングするための AWS サービス

New! Amplify Studio (Public Preview)

バックエンドとの統合・管理機能を持ち、最小限のコーディングで UI 開発を加速するフロントエンド開発者に提供する GUI 開発環境

ここからは、具体的にみなさんが Web / モバイルアプリ開発の際に Amplify を使いたくなるポイントを 4 つご紹介します。


Amplify を使いたくなる 4 つのポイント

Point 1. 様々な機能を簡単にアプリに追加できる

例えば、地図や位置情報の機能を 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」を参照してみてください。

img_amplify-studio-flash-development_01

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

Point 2. フロントエンドとバックエンドを、ビジュアルに構築できる

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

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

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

img_amplify-studio-flash-development_02

クリックすると拡大します

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

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

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

img_amplify-studio-flash-development_03

クリックすると拡大します

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

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

Point 3. 数回クリックで Git ベースの静的 Web サイトがデプロイできる

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

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

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

img_amplify-studio-flash-development_04

クリックすると拡大します

Point 4. AWS のベストプラクティスに則った構成を構築できる

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

スケーラビリティ

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

コスト

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

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


まとめ

今回、改めて AWS Amplify の要点を整理しつつ、新しく登場した AWS Amplify Studio をご紹介しました。Amplify CLI や Libraries を用いることで簡単に Web / モバイルアプリに機能を追加することができたり、Amplify Console を用いて Git ベースの静的 Web サイトホスティングができたりと開発スピードを上げるための機能が豊富に備わっていることが分かりました。また、新しく登場した Amplify Studio は、バックエンドとの統合・管理や Figma と連携したフロントエンド UI 開発ができたりと Amplify はどんどん進化していますね !

Amplify については GitHub リポジトリ「Amplify 学習リソース集」に日本語で書かれている AWS Amplify のツール、チュートリアル、記事などがリンク集としてまとまっています。また、それらを管理運用している「Amplify 日本ユーザーグループ」での交流を通して、いろんな情報をキャッチアップすることもできます !

ぜひ Amplify を使って開発スピードを爆速にしましょう !


builders.flash メールメンバーへ登録することで
AWS のベストプラクティスを毎月無料でお試しいただけます

プロフィール

photo_inariku

稲田 大陸 (Riku Inada @inariku)
アマゾン ウェブ サービス ジャパン合同会社 ソリューションアーキテクト

2021 年 4 月に AWS Japan に入社し、筋トレが趣味なソリューションアーキテクトです。好きな AWS のサービスは AWS AmplifyAmazon CDK 。最近はビートボックスを聴くのにハマっています。

AWS のベストプラクティスを毎月無料でお試しいただけます

さらに最新記事・デベロッパー向けイベントを検索

下記の項目で絞り込む
絞り込みを解除 ≫
1

AWS を無料でお試しいただけます

AWS 無料利用枠の詳細はこちら ≫
5 ステップでアカウント作成できます
無料サインアップ ≫
ご不明な点がおありですか?
日本担当チームへ相談する