AWSのWebアプリケーション構築サービスであるAmplifyのワークショップ、
「Amplify SNS Workshop」をやってみたので紹介です。

AWS Amplifyとは？

サービス紹介ページはこちら→https://aws.amazon.com/jp/amplify/
AWSの公式マンガでも紹介されています→https://aws.amazon.com/jp/campaigns/manga/vol3-1/

AWS AmplifyはWebアプリの構築をサポートするサービス、ツール群です。
ReactやVueなどのモダンフレームワークを使用したフロントエンドに、バックエンドとしてAWSサービスを簡単につなぎこむことができます。

Amplifyコンソールを使用して静的Webアプリケーションのホスティングをしたり、Amplifyフレームワークを使用してサーバレスなバックエンドの構築、フロントエンドとの接続をしたり、Webアプリ開発に必要な機能を包括しているサービスとなります。

本ワークショップにおいては、

• Reactアプリのホスティング
• AppSync, DynamoDBなどバックエンドの構築
• GitHub連携によるCI/CD環境構築

上記のようなWebアプリ開発の諸々のインタフェースとして使用します。

Amplify SNS Workshop

そんなAmplifyの実践入門として公開されているのが、「Amplify SNS Workshop」です。

こんな感じのTwitter風SNSアプリの開発を通して、AWSサービスを利用したバックエンドの構築、Reactアプリの開発、デプロイまで、Amplifyを使用したアプリ開発のワークフローを一通り実践することができます。

構成は以下のようになっています。

一番下の人型がフロントエンドとなり、Reactで開発しています。

ワークショップで使用しているAWSサービス

手順とかをここで説明しても意味がないので、本ワークショップのほうではあまり触れられていない、それぞれのサービスがどういうもので、本ワークショップではどういう役割なのか、について書いていきたいと思います。

AWS AppSync

概要

サービスページ→https://aws.amazon.com/jp/appsync/
これもマンガあった→https://aws.amazon.com/jp/campaigns/manga/vol4-4/

GraphQLベースのWebAPIを作成できるサービスです。
サポートされているデータソースとしてはDynamoDB、Elasticsearch、Lambdaなどですが、直接サポートされていないRDSなどにもLambdaを介してアクセスすることができます。
GraphQLでサブスクリプションの定義をすることで、データソースの更新をリアルタイムにフロントエンドに反映することができるようになります。

本ワークショップでの役割

• 直接DynamoDBからデータをREADするAPI（subscribe含む）
• Lambdaを介して複数のDynamoDBテーブルにデータをUPDATE, CREATEするAPI
• Elasticsearchにアクセスし、DynamoDBから取得したデータを全文検索するAPI

上記を作成、ホスティングするために使用します。
GraphQLのコーディング自体はローカルで行い、Amplifyフレームワークを利用してPUSHすることで、Amplifyを介してAppSyncに自動でリソースが作成されます。

Amazon Cognito

概要

サービスページ→https://aws.amazon.com/jp/cognito/

Webアプリでの認証、認可、ユーザー管理をサポートするサービスです。
Cognitoで直接ユーザーを管理したり、サードバーティのソーシャルサインイン、SAMLなどによる管理も可能です。
AmplifyフレームワークとしてCognitoを使用した認証機能が提供されており、アプリに数行コードを追加するだけでログイン、サインイン、パスワード再発行などのUIとバックエンドが利用できるようになります。

本ワークショップでの役割

ユーザー管理はすべてCognitoで行います。
UIもAmplifyフレームワークのReactコンポーネントを利用して作成しています↓

import { withAuthenticator } from 'aws-amplify-react';
export default withAuthenticator(App);

AWS Lambda

概要

サービスページ→https://aws.amazon.com/jp/lambda/

もはや解説不要のAWS主要サービス。
様々な言語で関数を作成し、サーバレスに動かすことができるサービスです。

AppSyncではリゾルバとしてLambdaを選択することができ、
AppSyncからLambdaを呼び出してコードを実行することができます。

本ワークショップでの役割

ワークショップの序盤では書き込みもすべてAppSyncから直接DynamoDBにアクセスしていました。
しかし、フォロイーユーザーのPOSTをフォロワーユーザーのHOMEタイムラインに表示させるという要件が追加されたため、
ユーザーがメッセージを投稿した際に、

1. 投稿したユーザーのフォロワー検索
2. フォロワーのタイムラインへのデータ更新
3. 全体のPOSTテーブルへのデータ更新

以上を一度に行うためにLambda関数を利用しています。

Amazon Elasticsearch Service

概要

サービスページ→https://aws.amazon.com/jp/elasticsearch-service/

Elastic社のオープンソースの検索/分析エンジンであるElasticsearchをサポートするサービスです。
ログの分析、全文検索、データ分析などに利用されます。

本ワークショップでの役割

ユーザーが投稿した全POSTの中から全文検索するためにAppSyncから呼び出しています。
GraphQLに定義を追加してAmplifyでPUSHするだけで構築してくれます。

Amazon DynamoDB

概要

サービスページ→https://aws.amazon.com/jp/dynamodb/

サーバレスなNoSQLデータベースです。
高い可用性とスケーラビリティが売りの主要サービスです。
NoSQLデータベースのため、key-valueペアやドキュメントストレージとして利用します。

本ワークショップでの役割

ユーザーのPOSTを保存します。

備考

料金について

AppSyncやLambdaなど、使用量に応じた従量課金なのでワークショップの途中で放置していてもほとんど料金はかからないと思います。
AmplifyでWebアプリをホストするにあたってS3にバケットを作成しているので、そこで少しかかるくらいかと。
また、無料期間中であれば従量課金系のサービスも無料枠内でワークショップが完結するものが多いです。
気になるようでしたら短期間にワークショップを終わらせましょう。
大体１，２日あれば最後までできます。

後片付けについて

ワークショップのほうに書いてありますが、

amplify delete

でAppSync, DynamoDB, CloudFormation, Lambdaなど、ほとんどのリソースを削除できます。
Amplifyだけホストしているアプリが残っているようなので、コンソールからアプリを削除しましょう。

やってみた感想

少し前からAmplifyでホスティングしたReactアプリの開発をしていましたが（どっちも未経験）、
Reactで一杯いっぱいになっていて、バックエンドについてはふわっとした理解しかできていませんでした。

いや、今でもふわっとしているところはあるんですが、ワークショップを通じてGraphQL書いたり、Amplify CLIを叩いたりしていると、何となくバックエンド構築や、フロントエンドのとの繋ぎこみの雰囲気が分かりました。

あと単純にReactの勉強にもなった。