AWS Amplify とAWS AppSync のワークショップをやってみた

AWS Amplify とAppSync を試してみるのに非常に良いワークショップがありましたので実際に実施してみました。以下のURL です。

Amplify + AppSync Workshop
Amplify / AppSync / React Workshop

完成すると以下のような機能を持つ一通り動作するアプリケーションを構築できます。最後は開発環境での実行だけではなくS3 にデプロイすることで実際にインターネット上で公開して動作させるところまで構築できます。

  • サインアップ/サインイン などの認証と認可(メールアドレスの到達確認も含む)
  • アルバムの作成・一覧表示
  • アルバムへの画像のアップロード
  • アップロードした画像のサムネイル作成と、サムネイル画像の表示
  • 画像の分析とラベル付けおよび、ラベルによる画像検索機能の追加
  • (Option) サムネイルをクリックして元画像の表示
  • (Option) アルバムのユーザー間での共有

開発には、AWS Amplify を利用し、フロントエンドはReact を使用しています。

所感

わからないところを調べながらゆっくりと実施しましたので、トータルで4 時間ほどかかりましたが、AWS Amplify を利用することでフロントエンドとバックエンドを非常に効率的に開発できることが体験できました。
途中Amplify CLI によりAWS 側のバックエンド処理に必要なリソースは自動生成されますので、フロントエンド開発者の方が、バックエンドも含めてアプリケーションを開発するのに適していると思います。
その反面、Amplify CLI により自動生成されているAWS リソースが何なのかブラックボックス化して分かりづらい点もありますので、Amplify で開発を進めながら徐々に各サービスの知識をつけていくと良いかと思います。
なお、ワークショップで利用する各種サービスはすべてマネージド型サービスで自動的にスケールしますし、可用性も高いです。運用管理がほぼいらずにアプリケーションのバックエンドを運用することが可能です。

AWS Amplify とは

Amplify は、AWS を利用したモバイルやウェブアプリケーションを開発やバックエンドの構成を用意にするフレームワークです。

AWS Amplify(アプリケーションの構築とデプロイ)| AWS
AWS Amplify は、モバイルおよびフロントエンドのウェブデベロッパーが AWS を利用して安全でスケーラブルなフルスタックアプリケーションを構築できるようにするツールとサービスのセットです。

フロントエンドのReact アプリケーションに組み込んでAWS の各種サービスと連携することができるJava Script ライブラリや、バックエンドを自動構成するAmplify CLI などで構成されています。
このワークショップを通じて、Amplify Java Script ライブラリのフロントエンドアプリでの利用方法や、Amplify CLI を利用したバックエンド構築を体験できます。

このワークショップで利用するサービスは以下のようなものです。(以下ワークショップからの引用)

The AWS Amplify CLI, to rapidly provision and configure our cloud services
The AWS Amplify JavaScript library, to connect our front end to cloud resources
Amazon Cognito, to handle user sign up authorization
Amazon Simple Storage Service (S3), to store and serve as many photos as our users care to upload, and to host the static assets for our app
Amazon DynamoDB, to provide millisecond response times to API queries for album and photo data
AWS AppSync, to host a GraphQL API for our front end
AWS Lambda, to create photo thumbnails asynchronously in the cloud
Amazon Rekognition, to detect relevant labels for uploaded photos
Amazon Elasticsearch Service, to index and search our photos by their labels

認証・認可機能

以下のようなサインイン/サインアップ機能を構築できます。バックエンドはAmazon Congito で構成されます。Amazon Congito はユーザプールとIDプールという2つの機能があり、ユーザプールでアカウントを管理し認証 機能を担います。ID プールは認証を受けたID (英語でIdentity) に対して、どの機能を利用できるかをコントロールする 認可 の機能を提供します。なお、Cognito ユーザプールで管理するユーザだけではなく、GoogleやFacebook といったWebアカウントで認証を受けた人に権限を与えることもできます。
このワークショップではユーザプールを利用した方法で構築しています。

Sign In/ Sign Up 機能

アルバムの管理機能

アルバムを作成したり、一覧表示したりできます。またアルバムを作成すると、一覧も自動的に更新されます。バックエンドとのインターフェイスでは、GraphQL API を利用しており、AWS AppSyncで処理されます。実際のデータはDynamoDB に格納されます。

アルバムの作成・一覧機能

このワークショップでは、GraphQL そのものの基礎は扱わないのでこのワークショップが完了したら以下のURL などで学習すると良いでしょう。

GraphQL: A query language for APIs.
GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to ...

画像のアップロード・サムネイル化

画像はS3 に格納されます。S3 のイベント機能とLambda が連携して画像のサムネイル化処理が実行され、サムネイルの一覧が表示されます。オプションで、サムネイルをクリックしたら元画像が大きく表示されるような実装も体験できます(Bonus Content になります)。

画像をアップロードして、S3 に登録
サムネイル化した画像を一覧表示
サムネイルをクリックすることで、本のサイズの画像を表示
こちらはBonus Content

画像の分析とラベル付けおよび、ラベルによる画像検索機能の追加

画像をアップロードしたら、Amazon Rekogniton と連携して画像に何が写っているのかを自動的に解析します(Detect Label 機能)。
ラベルは画像のメタデータとしてDynamoDB とElasticSearch に格納され、アプリケーションからはラベルによる画像の検索が可能になります。

画像をアップロードしたら、Amazon Recognition により画像を解析しタグ付け
ElasticSearch によりタグによる検索が可能に

是非試してみてください。