2020/10/17 「JAWS-UG福岡#11：8度目もちょっと濃い目にAWSの話をしてみよう ～あつまれ サメのもり～」 で発表した資料です

1. AWS Amplify 入門
青柳 英明
2020/10/17
JAWS-UG 福岡 「8度目もちょっと濃い目にAWSの話をしてみよう」

2. はじめに 1
・セッション資料は終了後に公開します
・ガンガン Tweet お願いします！
・質問や感想など、お気軽に声をお掛けください
ハッシュタグ： #jawsug #jawsugfuk

3. 自己紹介 2
青柳 英明
所属： クラスメソッド 福岡オフィス
経歴：
クラウドおじさん
職業： AWSソリューションアーキテクト
オンプレインフラおじさん LV20
LV1 コアメンバーです
LV2 年目

4. 本日お話しすること 3
オンプレインフラ歴20年で、プログラミング言語は
Visual Basic くらいしか分からないおじさんが、
ひょんなことから AWS Amplify を使ったサー
バーレスアプリケーションの構築に関わることに
なったので、初学者向けに AWS Amplify の概要
とか使い始める方法とかをお話しできるといいなと
思います。

5. Amplifyとは 4
サーバーレスアプリケーションの
・フロントエンド（Webアプリ・モバイルアプリ）
・バックエンド （AWSサービス）
を統合的に構築・開発できるサービス

6. Amplifyの構成要素 5
・Amplify CLI
・Amplify Libraries
・Amplify Console

7. Amplify CLI 6
テキストメニュー形式によって
サーバーレスアプリケーションのバックエンド環境を
構築することができるツール
※「CLI」という名前ですが、
AWS CLI のようなコマンドラインツールではありません
（バッチ処理などが行える訳ではありません）

8. Amplify CLI 7
$ amplify add function
? Provide the AWS Lambda function name: amplify_example
? Choose the runtime that you want to use:
.NET Core 3.1
Go
Java
❯ NodeJS
Python
$ amplify push
✔ Successfully pulled backend environment demo from the cloud.
Current Environment: demo
| Category | Resource name | Operation | Provider plugin |
| -------- | --------------- | --------- | ----------------- |
| Storage | amplify_example | Create | awscloudformation |
| Function | amplify_example | Create | awscloudformation |
| Api | amplify_example | Create | awscloudformation |
? Are you sure you want to continue? (Y/n) y
案内に従って、テキストを入力したり
カーソルキー上下で選択します
サマリーなどは
見易く表組表示されたりもします

9. Amplify Libraries 8
いわゆるSDK
「AWS SDK for JavaScript」
「AWS Mobile SDK (for Android/iOS)」
と呼ばれていたものの後継

10. Amplify Libraries 9
JavaScript
対応フレームワーク（基本的にSPA）
・React
Next.js (SSR), ReactNative (Android/iOS向けアプリ)
・Angular
Ionic
・Vue

11. Amplify Libraries 10
Android
言語： Java, Kotlin
環境： Android Studio, Android SDK
iOS
言語： Swift
環境： Xcode, CocoaPods

12. Amplify Console 11
CI/CD
ホスティング
GitHub、AWS CodeCommit と連係して
アプリケーションのビルドやデプロイが行える
Webサイトのマネージドなホスティング環境
S3、CloudFront、Route 53ドメイン
(XXXX.amplifyapp.com または独自ドメインを利用可)

13. Amplifyの使い方（概要） 12
例： React を使ったSPAアプリケーションの作成
1. 開発マシンに Amplify CLI をインストール
・Node.js … 10.x 以降
・npm … 6.x 以降
$ npm install -g @aws-amplify/cli

14. Amplifyの使い方（概要） 13
2. React のプロジェクトを作成
$ npx create-react-app ＜application-name＞
3. Amplify の初期設定
$ amplify init
4. Amplify Libraries のインストール
$ npm install aws-amplify @aws-amplify/ui-react

15. Amplifyの使い方（概要） 14
5. AWSリソースの定義設定
$ amplify add ＜AWSリソースのカテゴリ＞
API … API Gateway (REST) / AppSync (GraphQL)
Function … Lambda
Storage … S3 / DynamoDB
Auth … Cognito / IAM
その他にも・・・
・分析 (Pinpoint) ・XR (Smerian)
・対話 (Lex) ・IoT
・AI/ML系サービス

16. Amplifyの使い方（概要） 15
6. リソースをAWS環境へデプロイ
$ amplify push
リソース定義
CloudFormation
API Gateway AppSync
Lambda DynamoDB
Cognito

17. Amplifyの使い方（概要） 16
7. アプリケーションの動作確認
$ npm start
API Gateway AppSync
Lambda DynamoDB
Cognito
ローカルWebサーバー
アプリケーション
(SPA)
http://localhost:3000

18. Amplifyの使い方（概要） 17
8. アプリケーションをホスティング
$ amplify add hosting
$ amplify push
Route 53 CloudFront S3
(静的Web
ホスティング)
Amplify
アプリケーション
(SPA)

19. 試しにAmplifyでアプリを作ってみた 18
今回の勉強会で使う
「アンケート」アプリ
を作ってみました
作ってみたんですが、ホス
ティングの登録が何故か上
手く行かず、お披露目はで
きませんでした（泣）

20. AWS Amplify で
簡易アンケートアプリを
さくっと作ってみた
青柳 英明
2020/10/17
JAWS-UG 福岡 「8度目もちょっと濃い目にAWSの話をしてみよう」

21. システム概要 19
AppSync ＋ DynamoDB
AppSync
DynamoDB
質問一覧
選択肢一覧
回答一覧
GraphQL

22. 初めてのAppSync (GraphQL) 20
今回、書いたもの、書いていないもの
・クエリ定義 → 標準で用意されるものを利用
この程度でもアプリが作れてしまう！
(今回一番の驚き？)
・スキーマ定義 → 3つの単純なテーブル
・その他コード → Lambda関数など一切書いてない

23. AppSync (GraphQL) の「Subscription」 21
「購読」＝ 更新発生時に通知してくれる
AppSync DynamoDB
アンケート登録 更新発生
更新を通知
（そのまま、更新分の
読み取りを行う）
サマリ表示

24. Amplifyを触ってみた所感 22
・各サービスのマネコンを全く触らなくても
Amplify CLIだけで、それなりに構築ができちゃう
・コードサンプルやリファレンスを充実して欲しい
・AWS的には「AppSyncとの組み合わせ」推し？
（確かに使いこなせれば便利だと思う）
・Amplifyよりもアプリ（JavaScript、SPA）を
書く方が難しい