AWS Amplifyまとめ＆よくある質問集 #AWS

皆さんおはこんばんにちは、現在12月2日の592時を回ったところですが、いかがお過ごしでしょうか。
（大変反省しております）

この記事では「AWS Amplify」についてのまとめとよくある質問について書いています。

「AWS Amplify」とは？

AWS Amplify（以下、Amplify）は、WebアプリとMobileアプリの開発を容易にするためのライブラリ、フレームワーク、UIコンポーネント、コマンドラインインターフェイス、コンソールからなるサービスです。
このように、一口にAmplifyと言っても様々なサービスがあります。
まずは、様々なサービスからなるAmplifyファミリーについてまとめていきます。

Amplify CLI

Amplify CLIはサーバーレスバックエンドをコマンドラインから構築するためのツールキットです。
以下のようなコマンドで、やりたいことから対話的にバックエンドを構築できます。

$ amplify add api  # バックエンド用のAPIどデプロイするための設定ファイルが生成される
$ amplify push     # 設定がAWSに反映される

Amplify Framework

Amplify Frameworkは、バックエンドのAWSサービスとフロントエンドを統合できるクライアントライブラリです。
このライブラリはJavaScript、iOS、Android向けに提供されており、JavaScript版はReact、Vue、AngularなどのWebフレームワークと一緒に利用することができます。

また、AWS SDKと比べて、直感的な実装ができるインターフェースとなっています。
例えば、オーナー以外は参照権限のみを持つファイルアップロード機能を考えます。
この時「ファイルアップロード時の権限設定」「アップロード処理」「参照時の権限設定」「例外処理」などいろいろと考えないといけないですが、Amplify Frameworkを利用すると、以下のように簡単に記述できます。

const file = anyFileObject            // @see https://github.com/aws-amplify/amplify-js/blob/867412030de57fd74078b609252de6f7f81ad331/packages/storage/src/Storage.ts#L189
Storage.put('example.png', file`,` {  // アップロード後のキーとアップロードするファイルを指定
      level: 'protected',             // 権限レベルを「public」「protected」「private」から指定
      contentType: 'image/png'        // Content-Typeを指定
})

なお、Amplify Framework for JavaScriptについては（もちろん）一般利用が可能ですが、2019年12月18日現在、Amplify Framework for iOS、Amplify Framework for Androidはプレビュー版ですのでガシガシ試してください！なお、現時点でプロダクションに投入される場合はAndroid / iOS SDKをご利用ください。

現在、Amplify CLIとAmplify Frameworkの組み合わせで直感的に構築・実装ができる機能は以下になります。

Analytics
- ユーザーのセッションや属性などを計測
API
- REST/GraphQL APIを利用
Authentication
- 認証APIとビルド済みUIコンポーネント
Storage
- 静的コンテンツのシンプルな管理
Interactions
- Deep Learningを利用したBot
PubSub
- リアルタイムなデータのやりとり
Push Notification
- キャンペーンや分析機能を持ったプッシュ通知
Predictions
- AI/MLコンテンツの組み込み
XR
- AR/VRコンテンツの組み込み

Amplify Console

Amplify Consoleは、Single Page Application（SPA）とStatic Site Generator（SSG） + バックエンド向けCI/CD＆ホスティングサービスです。CI/CDの機能によって、紐つけたGitリポジトリの変更を検知し、SPAなどを、独自ドメインもしくはamplifyapp.comドメインでホスティングできます。ホスティングするだけなら、Gitリポジトリを紐つけるだけですぐに利用できます。

また、CI/CDの機能を活用すると、フロントエンドだけではなくサーバーレスバックエンドもデプロイできます。特にAmplify CLIとは密に連携しており、Amplify CLIが作成したファイルを自動的に検知し、バックエンドのデプロイも同時に行います。さらには、CypressによるE2Eテストも可能であったり、プルリクエストのプレビューも可能であったりと、フロントエンド開発から運用までを一気通貫で行うことができます。

よくある質問

言っても個人開発とかプロトタイプ向けなんでしょ？？

そんなことはないですよ！！確かにデモアプリや小規模なサイトなどを最速で作る方法としてもAmplifyは最適ですが、それだけには留まりません。AWS AppSyncやAmazon API Gateway、Amazon DynamoDB、AWS Lambdaなどの信頼と実績のAWSサービスが使われるため、スケーラブルかつ複数人のチーム開発にも耐える柔軟性があります。また、CI/CDやホスティングをはじめとしたプロダクションに必須な機能を提供しています。

Amplifyの外で作ったリソースを使うにはどうすればいいの？

Amplify Frameworkの「Manual Setup」によって、手動でリソースを設定することができます。
https://aws-amplify.github.io/docs/js/authentication#manual-setup

チーム開発とかには向かないでしょ

Amplify CLIでamplify envを使うと、開発環境を分離することができます。使ってください！
https://aws-amplify.github.io/docs/cli-toolchain/quickstart#environments--teams

Amplifyが`amplify configure`で作ろうとするIAMユーザー権限強すぎない？

ここ見てください！（雑）
https://aws-amplify.github.io/docs/cli-toolchain/quickstart#team-workflow

考え方としては、本番環境に対するblast radiusを縮小するための方策をとることです。
まずは、AWS Organizationsで各開発者にAWSアカウントを発行し、サンドボックス環境が持てるようにしましょう。
その上で、統制を効かせたい場合はAWS OrganizationsのSCP（Service Control Policy）で権限を絞ることもできます。
また、本番環境への操作権限はAmplify ConsoleなどのCI/CDパイプラインにのみ与えることで本番環境を守りましょう。

AWS Amplifyまとめ＆よくある質問集