2019年10月に京都で開催された CTO Night & Day 2019 Fall Day1 モーニングセッションでの講演資料です

1. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Morning Session
AWS Amplify で Web/Mobile
爆速スケーラブル Serverless 開発

2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
つかだ あきひろ
• Startup Solutions Architect
• #serverless #mobile #fintech
#pinpoint #amplify
• AWS Amplify の感じを
わかってほしい⼈

3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
今⽇のセッションの⽬的
• Web/モバイルアプリ開発⽤の
ライブラリ、フレームワークである
AWS Amplify を知る
• お⼿軽感を実感する

4. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
アジェンダ
そもそもなぜ AWS Amplify が必要なのか
Amplify CLI
init > add > push
View コンポーネント
AWS Amplify のはじめかた

5. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
そもそもなぜ AWS Amplify が
必要なのか

6. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⼀般的な Web / モバイルアプリの構成要素

7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⼀般的な Web / モバイルアプリの構成要素
クライアント
アプリケーション
Web / API サーバー
サーバーサイドアプリケーション
データベース
ロジック、UI の実装
マルチプラットフォーム
フロントエンドライブラリ
ロジックの実装 / 認証認可 / 通知
サーバーの調達・構築 / 運⽤監視
インタフェース定義 / 冗⻑化
セキュリティ / メッセージング
静的コンテンツ配信 / ログ管理
サーバーの調達・構築
運⽤監視 / 冗⻑化
バックアップ/リストア
セキュリティ

8. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⼀般的な Web / モバイルアプリの構成要素

9. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⼀般的な Web / モバイルアプリの構成要素
ユーザー間
チャット、
メッセージング
プッシュ
通知送信
他システムとの
連携処理
ログ収集
クライアント
イベント収集
分析業務

10. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
ユーザー間
チャット、
メッセージング
⼀般的な Web / モバイルアプリの構成要素
プッシュ
通知送信
他システムとの
連携処理
ログ収集
クライアント
イベント収集
分析業務
この中で
アプリケーション開発者が
やりたいことは何か

11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
アプリ開発者がやりたいことは何か
アプリケーション
エンジニア
サーバーを構築したい？
サーバーを運⽤・監視したい？
バックエンドの
ネットワーク設定をしたい？
APNs, FCM にアクセスする
コードを書きたい？
ログの出⼒⽅法を
セットアップしたい？
ミドルウェアをインストール、
チューニングしたい？

12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
サーバーを運⽤・監視したい？
バックエンドのAPIを
さくっと作りたい
アプリ開発者がやりたいことは何か
アプリケーション
エンジニア
サーバーを構築したい？
バックエンドの
ネットワーク設定をしたい？
APNs, FCM にアクセスする
コードを書きたい？
ログの出⼒⽅法を
セットアップしたい？
ミドルウェアをインストール、
チューニングしたい？
フロントエンドの
アプリを書きたい
ユーザーの⾏動を
把握、分析したい
ユーザーに通知を送りたい
(Push, Email, SMS )
バックエンドのロジックを
さくっと書きたい
Web コンテンツを
配信したい
「ユーザーに価値を届けたい」

13. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
アプリ開発者がやりたいことは何か
アプリケーション
エンジニア
フロントエンドの
アプリを書きたい
バックエンドのAPIを
さくっと作りたい
ユーザーの⾏動を
把握、分析したい
ユーザーに通知を送りたい
(Push, Email, SMS )
バックエンドのロジックを
さくっと書きたい
Web コンテンツを
配信したい
「ユーザーに価値を届けたい」

14. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Amplify

15. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify とは
• Amplify CLI
「やりたいこと」から直感的に
サーバーレスなバックエンドを構築
• Amplify Framework
クラウドに接続された
UI Component やライブラリを使い
フロントエンドアプリを開発
• Amplify Console
Web アプリをデプロイ、ホスティング

16. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify を使うと
「やりたいこと」だけを意識して構築できる
• AWS の各サービスの詳細を知らなくても「やりたいこと」から
Amplify がサーバーレスなバックエンドを構築してくれる
• アプリケーション開発者は本当に必要な開発だけに集中できる
• バックエンドの構築は下記のようなシンプルなコマンドで実⾏できる
$ amplify add api
❯ GraphQL
REST
$ amplify push
AWS AppSync
AWS Cloud

17. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify を使うと
「やりたいこと」だけを意識して構築できる
• AWS の各サービスの詳細を知らなくても「やりたいこと」から
Amplify がサーバーレスなバックエンドを構築してくれる
• アプリケーション開発者は本当に必要な開発だけに集中できる
• バックエンドの構築は下記のようなシンプルなコマンドで実⾏できる
$ amplify add api
❯ GraphQL
REST
$ amplify push
AWS AppSync
AWS Cloud
AWS や Amplify の
仕組みとか知らなくても
だいたい⼤丈夫

18. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
Amplify CLI
※ v3.0.0, 042c01421 時点の情報に基づきます

19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify とは （再掲）
• Amplify CLI
「やりたいこと」から直感的に
サーバーレスなバックエンドを構築
• Amplify Framework
クラウドに接続された
UI Component やライブラリを使いフ
ロントエンドアプリを開発
• Amplify Console
Web アプリを⾃動デプロイ

20. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify CLI
$ npm install -g @aws-amplify/cli
$ amplify
█████╗ ███╗ ███╗██████╗ ██╗ ██╗███████╗██╗ ██╗ ███████╗██████╗ █████╗ ███╗ ███╗███████╗██╗ ██╗ ██████╗ ██████╗ ██╗ ██╗
██╔══██╗████╗ ████║██╔══██╗██║ ██║██╔════╝╚██╗ ██╔╝ ██╔════╝██╔══██╗██╔══██╗████╗ ████║██╔════╝██║ ██║██╔═══██╗██╔══██╗██║ ██╔╝
███████║██╔████╔██║██████╔╝██║ ██║█████╗ ╚████╔╝ █████╗ ██████╔╝███████║██╔████╔██║█████╗ ██║ █╗ ██║██║ ██║██████╔╝█████╔╝
██╔══██║██║╚██╔╝██║██╔═══╝ ██║ ██║██╔══╝ ╚██╔╝ ██╔══╝ ██╔══██╗██╔══██║██║╚██╔╝██║██╔══╝ ██║███╗██║██║ ██║██╔══██╗██╔═██╗
██║ ██║██║ ╚═╝ ██║██║ ███████╗██║██║ ██║ ██║ ██║ ██║██║ ██║██║ ╚═╝ ██║███████╗╚███╔███╔╝╚██████╔╝██║ ██║██║ ██╗
╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝ ╚══╝╚══╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝
• TypeScript で実装された npm パッケージ
• https://github.com/aws-amplify/amplify-cli
• 各コマンド実装は /packages/amplify-cli/src/commands/* (@042c0142)

21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
add で使えるカテゴリーと対応するバックエンドの例
$ amplify add ...
api
auth
analytics
notifications
hosting
AWS AppSync
Amazon API Gateway
Amazon Cognito
Amazon Pinpoint
Amazon Pinpoint
Amazon S3
Amazon CloudFront
predictions
Amazon Translate
Amazon PollyAmazon Kinesis
Amazon Personalize Amazon Rekognition
Amazon Transcribe
Amazon Textract
Amazon Comprehend
※ この他に interactions, pubsub カテゴリー等があります

22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
その他の Amplify CLI コマンド
$ amplify init
$ amplify configure
$ amplify push
$ amplify serve|run
$ amplify <category> add
$ amplify <category> update
$ amplify <category> push
$ amplify <category> remove
$ amplify codegen
$ amplify env <add|pull|...>
// プロジェクトの初期化
// プロジェクトの設定
// ローカルの情報をクラウドに反映する
// ローカルでサーバーを⽴てる
// アプリケーションにカテゴリーを追加する
// カテゴリーの設定を更新する
// カテゴリーの情報をクラウドに反映する
// アプリケーションからカテゴリーを削除する
// 強い型付きの GraphQL スキーマオブジェクトを⽣成
// dev, prod など複数環境を管理する

23. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
init > add > push
を⾒てみる
典型的な操作として

24. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify init
Project
状況確認
Frontend
初期化
Provider
初期化
成功時
処理
/packages/amplify-cli/src/commands/init.js

25. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify init
• プロジェクト名確定、環境名確定、エディタ選択を⾏う
• エディタは
VSCode, Atom, Sublime Text, IntelliJ IDEA, Vim, Emacs, None
から選択可能
• この時点ではメモリ上に各種情報を保持する
/packages/amplify-cli/src/lib/init-steps/s0-analyzeProject.js
Project
状況確認
Frontend
初期化
Provider
初期化
成功時
処理

26. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify init
• ここでいうフロントエンドとは ios / android / javascript
• "javascript" を選択した場合はさらに
angular, ember, ionic, react, react-native
からフレームワークを選択する
/packages/amplify-cli/src/lib/init-steps/s1-initFrontend.js
Project
状況確認
Frontend
初期化
Provider
初期化
成功時
処理

27. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify init
• プロバイダー = バックエンドの構築を担当する機構
• デフォルトでは "awscloudformation" が選ばれるが、
設定ファイルに定義することで任意のカスタムプロバイダーを
利⽤可能
/packages/amplify-cli/src/lib/init-steps/s2-initProviders.js
Project
状況確認
Frontend
初期化
Provider
初期化
成功時
処理

28. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify init
• 設定したフロントエンド、プロバイダーの
`onInitSuccessful` を呼んで後処理を⾏う
• awscloudformation プロバイダーの後処理では、
設定の保存とデプロイに使う Amazon S3 バケット、
必要な IAM Role を作成する簡単な CloudFormation Stack が作成される
• その結果を src/aws-exports.js に書き出す
/packages/amplify-cli/src/lib/init-steps/s9-onSuccess.js
Project
状況確認
Frontend
初期化
Provider
初期化
成功時
処理

29. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify <category> add
ここでは $amplify predictions add の例
必要なら
認証機能を追加
さらに利⽤
したい AI の
種類を選択
設定を
ローカルに
保存
/packages/amplify-category-predictions/commands/predictions/add.js
利⽤する
機能を
選択

30. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify predictions add
/packages/amplify-category-predictions/provider-utils/supportedPredictions.js
必要なら
認証機能を追加
さらに利⽤
したい AI の
種類を選択
設定を
ローカルに
保存
利⽤する
機能を
選択

31. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify predictions add
provider-utils/awscloudformation/prediction-category-walkthroughs/identify-walkthrough.js
必要なら
認証機能を追加
さらに利⽤
したい AI の
種類を選択
設定を
ローカルに
保存
利⽤する
機能を
選択

32. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify predictions add
provider-utils/awscloudformation/prediction-category-walkthroughs/interpret-walkthrough.js
必要なら
認証機能を追加
さらに利⽤
したい AI の
種類を選択
設定を
ローカルに
保存
利⽤する
機能を
選択

33. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify predictions add
/packages/amplify-cli/src/extensions/amplify-helpers/update-amplify-meta.js
必要なら
認証機能を追加
さらに利⽤
したい AI の
種類を選択
設定を
ローカルに
保存
利⽤する
機能を
選択
• ./amplify/backend/predictions/* に追加したリソースの
AWS CloudFormation テンプレートが⾃動⽣成される
• この時点ではまだクラウドには反映されていない

34. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify push
クラウドに
プッシュ
/packages/amplify-cli/src/commands/push.js
差分を表⽰して
プッシュするか
確認

35. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify push
クラウドに
プッシュ
/packages/amplify-cli/src/extensions/amplify-helpers/push-resources.js
差分を表⽰して
プッシュするか
確認

36. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify push
クラウドに
プッシュして
ローカルを同期
/packages/amplify-cli/src/extensions/amplify-helpers/push-resources.js
差分を表⽰して
プッシュするか
確認

37. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
View コンポーネント

38. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify とは （再掲）
• Amplify CLI
「やりたいこと」から直感的に
サーバーレスなバックエンドを構築
• Amplify Framework
クラウドに接続された
UI Component やライブラリを使い
フロントエンドアプリを開発
• Amplify Console
Web アプリを⾃動デプロイ

39. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify がサポートする JavaScript 環境
$ npm install aws-amplify --save
$ npm install aws-amplify-vue --save
$ npm install aws-amplify-react --save
$ npm install aws-amplify-react-native --save
$ npm install aws-amplify-angular --save
React の Hyper Order Component、Angular の Angular Module、
Vue の Vue Component でバックエンド接続済みの UI 部品を提供
https://github.com/aws-amplify/amplify-js

40. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
各 Component の実装は GitHub に
https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-vue/src/components

41. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
認証機能を提供する Vue Component の例
<template>
<div id="app">
<!-- ↓↓認証コンポーネント↓↓ -->
<amplify-authenticator />
<!-- ↑↑↑↑ -->
</div>
</template>

42. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Authenticator.vue ⾃体は 98 ⾏のシンプルな実装
https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-vue/src/components/authenticator/Authenticator.vue

43. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
AWS Amplify のはじめかた

44. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
公式サイトのチュートリアルではじめる
https://aws-amplify.github.io

45. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Loft Tokyo
〜挑戦をカタチにする場所へ〜

46. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Loft とは︖
スタートアップやデベロッパーが、
学び、コーディングし、交流し、
「挑戦をカタチにする場所へ」

47. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Ask An Expert カウンターでご質問いただけます
• AWS のエキスパートに
予約不要で質問できる
• コワーキングスペースの
営業時間中（平⽇10-18時）に
オープン ※ エキスパートが不在のことも
ありますのでご了承ください

48. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
Thank you!