Developers.ioの記事を読んでやってみる「AWS Amplify」

対象

• AWSの次世代JavaScriptライブラリ「AWS Amplify」の概要とReactアプリに導入する手順 #serverless #adventcalendar

目的

• AWS Cognitoを触っていたが、Javascriptがマジでわからず詰まってしまうので、噂の「AWS Amplify」を触ってみる

やってみる

前提

• 機能を理解するのが目的なので、terraformは使わずにAWSコンソールからポチポチ
• ローカル環境はMac

準備

• yarnをインストール

$ brew install yarn

AWS Amplifyとは？

• AWSを利用するWebアプリケーション向けのJavaScriptライブラリ
  • ほほう
• これまでCognitoを利用したWebアプリケーションを開発する場合、複数のライブラリ（Amazon Cognito Identity SDK for JavaScript+AWS SDK for JavaScript）を読む必要があり少し冗長な面がありましたが、AWS Amplifyを使うとその複雑さから解放されます。
  • これこれ！ユーザが求めていたものでは？！

AWS Amplifyでできること

• Auth
  • Amazon Cognito利用時に必要なAWS署名バージョン4プロトコル（AWS Signature Version 4 Signing）に準拠した認証処理 ← キタコレ
• Analytics
• API
  • API Gatewayへのリクエスト処理 ← キタコレ
  • AWS署名バージョン4プロトコル（AWS Signature Version 4 Signing）を用いたRESTful APIへのリクエスト処理 ← キタコレ
• Storage
• Caching
• i18n and Logging

Reactアプリを作ってみる

Cognito User Poolsの準備

• Cognito User Poolのセットアップ
  • Developers.ioの記事を読んでやってみる「Angular+Cognito」①
  • Developers.ioの記事を読んでやってみる「Angular+Cognito」②

Webアプリケーションの実装

• create-react-appを使ってReactアプリの雛形を作る

$ yarn global add create-react-app
$ create-react-app amplify-react-sample
$ cd amplify-react-sample

• command not foundになったらPATHを指定して実行するか create-react-appにPATHが通っていなかったらPATHを通しておく

$ /usr/local/bin/create-react-app amplify-react-sample

• create-react-appの動作確認

$ yarn start

• http://localhost:3000/にアクセス
• AMplifyライブラリとAmplifyのReact拡張ライブラリをインストール

$ yarn add aws-amplify aws-amplify-react

• src/App.js修正

動かしてみる

• 動作確認

$ yarn start

• http://localhost:3000/にアクセスで画面が出た！
• インポートしている Authenticator は、サインインやサインアップといったユーザー認証周りの処理を画面遷移も含めて丸ごと詰め込まれたReactコンポーネントとのことなので、Reactがやってくれてるのかな・・・？
• SignUpしてみる
• Cognito User Pool確認
• SignInしてみる
• SignIn状態になった！
• あれ、すげぇ簡単じゃね？

感想とまとめ

• AngularJSでガリガリ書いていたのが一瞬で実装できてしまった・・・
• 簡単すぎて何が起こっているかわからなかった・・・
• とりあえず、すごい簡単というのがわかったのでOK！とする！！！