血と汗となみだを流す

クラウドエンジニアになるための修業の場

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

対象

目的

  • 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
  • Storage
  • Caching
  • i18n and Logging

Reactアプリを作ってみる

Cognito User Poolsの準備

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/にアクセス f:id:Anorlondo448:20180501222343p:plain
  • AMplifyライブラリとAmplifyのReact拡張ライブラリをインストール
$ yarn add aws-amplify aws-amplify-react
  • src/App.js修正

動かしてみる

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

感想とまとめ

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