[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight

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

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

今⽇のセッションの⽬的
• Web/モバイルアプリ開発⽤の
ライブラリ、フレームワークである
AWS Amplify を知る
• お⼿軽感を実感する

アジェンダ
そもそもなぜ AWS Amplify が必要なのか
Amplify CLI
init > add > push
View コンポーネント
AWS Amplify のはじめかた

© 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 が
必要なのか

⼀般的な Web / モバイルアプリの構成要素

クライアント
アプリケーション
Web / API サーバー
サーバーサイドアプリケーション
データベース
ロジック、UI の実装
マルチプラットフォーム
フロントエンドライブラリ
ロジックの実装 / 認証認可 / 通知
サーバーの調達・構築 / 運⽤監視
インタフェース定義 / 冗⻑化
セキュリティ / メッセージング
静的コンテンツ配信 / ログ管理
サーバーの調達・構築
運⽤監視 / 冗⻑化
バックアップ/リストア
セキュリティ

ユーザー間
チャット、
メッセージング
プッシュ
通知送信
他システムとの
連携処理
ログ収集
クライアント
イベント収集
分析業務

ユーザー間
チャット、
メッセージング
プッシュ
通知送信
他システムとの
連携処理
ログ収集
クライアント
イベント収集
分析業務
この中で
アプリケーション開発者が
やりたいことは何か

アプリ開発者がやりたいことは何か
エンジニア
サーバーを構築したい？
サーバーを運⽤・監視したい？
バックエンドの
ネットワーク設定をしたい？
APNs, FCM にアクセスする
コードを書きたい？
ログの出⼒⽅法を
セットアップしたい？
ミドルウェアをインストール、
チューニングしたい？

サーバーを運⽤・監視したい？
バックエンドのAPIを
さくっと作りたい
エンジニア
サーバーを構築したい？
バックエンドの
ネットワーク設定をしたい？
APNs, FCM にアクセスする
コードを書きたい？
ログの出⼒⽅法を
セットアップしたい？
ミドルウェアをインストール、
チューニングしたい？
フロントエンドの
アプリを書きたい
ユーザーの⾏動を
把握、分析したい
ユーザーに通知を送りたい
(Push, Email, SMS )
バックエンドのロジックを
さくっと書きたい
Web コンテンツを
配信したい
「ユーザーに価値を届けたい」

エンジニア
フロントエンドの
アプリを書きたい
バックエンドのAPIを
さくっと作りたい
ユーザーの⾏動を
把握、分析したい
ユーザーに通知を送りたい
(Push, Email, SMS )
バックエンドのロジックを
さくっと書きたい
Web コンテンツを
配信したい
「ユーザーに価値を届けたい」

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

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

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

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

Amplify CLI
※ v3.0.0, 042c01421 時点の情報に基づきます

AWS Amplify とは（再掲）
• Amplify CLI
UI Component やライブラリを使いフ
ロントエンドアプリを開発
• Amplify Console
Web アプリを⾃動デプロイ

Amplify CLI
$ npm install -g @aws-amplify/cli
$ amplify
█████╗ ███╗ ███╗██████╗ ██╗ ██╗███████╗██╗ ██╗ ███████╗██████╗ █████╗ ███╗ ███╗███████╗██╗ ██╗ ██████╗ ██████╗ ██╗ ██╗
██╔══██╗████╗ ████║██╔══██╗██║ ██║██╔════╝╚██╗ ██╔╝ ██╔════╝██╔══██╗██╔══██╗████╗ ████║██╔════╝██║ ██║██╔═══██╗██╔══██╗██║ ██╔╝
███████║██╔████╔██║██████╔╝██║ ██║█████╗ ╚████╔╝ █████╗ ██████╔╝███████║██╔████╔██║█████╗ ██║ █╗ ██║██║ ██║██████╔╝█████╔╝
██╔══██║██║╚██╔╝██║██╔═══╝ ██║ ██║██╔══╝ ╚██╔╝ ██╔══╝ ██╔══██╗██╔══██║██║╚██╔╝██║██╔══╝ ██║███╗██║██║ ██║██╔══██╗██╔═██╗
██║ ██║██║ ╚═╝ ██║██║ ███████╗██║██║ ██║ ██║ ██║ ██║██║ ██║██║ ╚═╝ ██║███████╗╚███╔███╔╝╚██████╔╝██║ ██║██║ ██╗
╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝ ╚══╝╚══╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝
• TypeScript で実装された npm パッケージ
• https://github.com/aws-amplify/amplify-cli
• 各コマンド実装は /packages/amplify-cli/src/commands/* (@042c0142)

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 カテゴリー等があります

その他の 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 など複数環境を管理する

init > add > push
を⾒てみる
典型的な操作として

$ amplify init
Project
状況確認
Frontend
初期化
Provider
初期化
成功時
処理
/packages/amplify-cli/src/commands/init.js

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

$ 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
初期化
成功時
処理

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

$ 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
初期化
成功時
処理

$ amplify <category> add
ここでは $amplify predictions add の例
必要なら
認証機能を追加
さらに利⽤
したい AI の
種類を選択
設定を
ローカルに
保存
/packages/amplify-category-predictions/commands/predictions/add.js
利⽤する
機能を
選択

$ amplify predictions add
/packages/amplify-category-predictions/provider-utils/supportedPredictions.js
必要なら
さらに利⽤
したい AI の
種類を選択
設定を
ローカルに
保存
利⽤する
機能を
選択

provider-utils/awscloudformation/prediction-category-walkthroughs/identify-walkthrough.js
必要なら
さらに利⽤
したい AI の
種類を選択
設定を
ローカルに
保存
利⽤する
機能を
選択

provider-utils/awscloudformation/prediction-category-walkthroughs/interpret-walkthrough.js
必要なら
さらに利⽤
したい AI の
種類を選択
設定を
ローカルに
保存
利⽤する
機能を
選択

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

$ amplify push
クラウドに
プッシュ
/packages/amplify-cli/src/commands/push.js
差分を表⽰して
プッシュするか
確認

$ amplify push
クラウドに
プッシュ
/packages/amplify-cli/src/extensions/amplify-helpers/push-resources.js
確認

$ amplify push
クラウドに
プッシュして
ローカルを同期
/packages/amplify-cli/src/extensions/amplify-helpers/push-resources.js
確認

View コンポーネント

AWS Amplify とは（再掲）
• Amplify CLI
UI Component やライブラリを使い
フロントエンドアプリを開発
• Amplify Console
Web アプリを⾃動デプロイ

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

各 Component の実装は GitHub に
https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-vue/src/components

認証機能を提供する Vue Component の例
<template>
<div id="app">

<amplify-authenticator />

</div>
</template>

Authenticator.vue ⾃体は 98 ⾏のシンプルな実装
https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-vue/src/components/authenticator/Authenticator.vue

AWS Amplify のはじめかた

公式サイトのチュートリアルではじめる
https://aws-amplify.github.io

AWS Loft Tokyo
〜挑戦をカタチにする場所へ〜

AWS Loft とは︖
スタートアップやデベロッパーが、
学び、コーディングし、交流し、
「挑戦をカタチにする場所へ」

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

Thank you!

[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to [CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight

Similar to [CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight (20)

More from Amazon Web Services Japan

More from Amazon Web Services Japan (20)

[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight