AWS Black Belt Online Seminar AWS Amplify

© 2018, 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 Webinar 情報 https://amzn.to/JPWebinar | 過去資料 https://amzn.to/JPArchive
Solutions Architect 塚越啓介
2018/11/7
AWS Amplify
サービスカットシリーズ
[AWS Black Belt Online Seminar]

Who am I ?
塚越啓介（つかごしけいすけ）
Specialist Solution Architect
@Amazon Web Services Japan
Mobile / DevOps / Serverless
Background = アプリケーション開発
Webサービスの開発・運用
リアクティブプログラミング
Agile開発のコンサルティング
好きなサービス： AWS AppSync

AWS Black Belt Online Seminarとは
AWSJのTechメンバがAWSに関する様々な事を紹介するオンラインセミナーです
【火曜 12:00〜13:00】
主にAWSのソリューションや
業界カットでの使いどころなどを紹介
(例：IoT、金融業界向け etc.)
【水曜 18:00〜19:00】
主にAWSサービスの紹介や
アップデートの解説
(例：EC2、RDS、Lambda etc.)
※開催曜日と時間帯は変更となる場合がございます。最新の情報は下記をご確認下さい。
オンラインセミナーのスケジュール＆申し込みサイト https://aws.amazon.com/jp/about-aws/events/webinars/
3

内容についての注意点
• 本資料では2018年11月7日時点のサービス内容および価格についてご説明しています。最新の情報
はAWS公式ウェブサイト(http://aws.amazon.com)にてご確認ください。
• 資料作成には十分注意しておりますが、資料内の価格とAWS公式ウェブサイト記載の価格に相違が
あった場合、AWS公式ウェブサイトの価格を優先とさせていただきます。
• 価格は税抜表記となっています。日本居住者のお客様が東京リージョンを使用する場合、別途消費
税をご請求させていただきます。
• AWS does not offer binding price quotes. AWS pricing is publicly available and is subject to
change in accordance with the AWS Customer Agreement available at
http://aws.amazon.com/agreement/. Any pricing information included in this document is
provided only as an estimate of usage charges for AWS services based on certain
information that you have provided. Monthly charges will be based on your actual use of
AWS services, and may vary from the estimates provided.
4

なぜ AWS Amplify なのか？
AWS Amplify はフロントエンドの開発を加速させるた
めに作られたプロダクト

Amplify とは？
AWS Amplify は、クラウドベースの Web アプリケー
ションおよびモバイルアプリケーションを開発するため
の、高機能な宣言型 JavaScript ライブラリ
Amplify CLI (Command Line Interface) ツール
チェーンも併せて提供されており、様々なバックエンド
コンポーネントをコマンドラインで一元的な操作、管理
することも可能

Amplify で提供されるもの
Library Toolchain UI Component
7
シンプルなコードで
クラウドに接続
サーバーレスな
バックエンド
数コマンドで構築
便利な UI
Componentで開発を
加速

なにができるか
• Analytics
• ユーザーのセッションや属
性などを計測
• API
• REST /GraphQL API の利用
• Authentication
• 認証 API と pre-build UI
component
• Storage
• Static contents のシンプル
な管理
8
• Interactions
• Deep Learning を利用したBot
の構築
• PubSub
• リアルタイムなデータのやりとり
• Notification
• キャンペーンや分析機能をもった
プッシュ通知
• XR
• AR / VR コンテンツの組み込み

Authentication
 SignUp / SignIn ができるようCognito のリソースを構築
 クライアントライブラリから Auth クラスを使って Cognito を操作
 React, Angular, Vue に対応した Pre-configured component
9
Amazon Cognito

Analytics
 新しい Pinpoint リソースを構築
 クライアントアプリからイベントを記録
 セッションデータの自動的な記録
 認証データの自動的な記録 (SignUp/ SignIn / 認証失敗 )
10
Amazon Pinpoint

REST API
 Lambda Function のリソース構築
 Lambda Code の Scaffold
 API Gateway の設定
 クライアントライブラリを使った Lambda との通信
11
AWS Lambda + Amazon API Gateway

GraphQL API
 AppSync GraphQL API のリソースを構築
 クライアントアプリからの、Query / Mutation / Subscription の実行
 GraphQL データと連動する React Component
12
AWS AppSync

Hosting
 ホスティング用に S3 リソースを構築 & 設定
 Cloudfront の設定
 S3 にアセットをpublish
 変更を CLI 経由で更新
13
Amazon S3 + Amazon Cloudfront

Storage
 S3 バケットを構築
 バケットでコンテンツをアクセス権限を考慮した形で管理
14
Amazon S3

demo
15

デモで見せるもの
AWS AppSync
Amazon
DynamoDB
/graphql
Resolvers
Cognito user pool

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 18
• クラウド対応アプリケーションを構築する
フロントエンド開発者のJavaScriptライブラリ
• フロントエンドに特化したインターフェース
import { Storage } from 'aws-amplify';
Storage.put ('test.txt’ , 'Hello’ )
.then (result => console.log(result))
.catch(err => console.log(err));
例 Amazon S3 へのファイルのアップロード

CLI
19

バックエンドを簡単に設定
20
ツールチェーンは AWS CloudFormation を使用して
サーバーレスバックエンドを高速に作成
auth, analytics, functions, REST / GraphQL API などをサポート

スタティックなウェブサイトのホスティング
21
Amazon S3 と Amazon Cloudfront を利用したスケーラブルなウェ
ブサイトホスティングを利用可能
amplify publish によってバックエンドリソースの構築とフロントエ
ンドリソースのビルドおよび公開を実施

使い方 : amplify-cli のインストール
コマンドラインから AWS リソースを操作する amplify-cli
をセットアップします
https://aws-amplify.github.io/docs/js/start
$ npm install -g @aws-amplify/cli
$ amplify configure

使い方 : amplify-cli の設定
指示通りに設定を行います。
URLをクリック、Openを行いブラウザで表示します。

デフォルトのまま進めると Admin 権限のユーザーが払い
出されます。

ユーザーの作成に成功すると AWS を利用するキーが払い
出されます。

作ったユーザーのキーを使って amplify-cli を設定します。

使い方 : amplify-cli を使ってAWSの環境を構築
amplify pushにより src/aws-exports.js というファイル
が生成され、このファイルに記載された情報で AWS と接
続します。
$ amplify init
$ amplify push

使い方 : feature の追加
amplify-cli から feature を追加できます。この例は
GraphQL のシンプルな API を構築する例です
$ amplify add api

CLI Dive Deep
29

Amplifyのコンセプト
• AWS Amplify CLI を使用して、
バックエンドリソースをクラウドに
簡単に設定可能
• Amplify-Library とシンプルに連携
することが可能
• Node.js (gluegun) で書かれており、
ほとんどがプラグインとして実装さ
れている
• カテゴリープラグイン
• プロバイダープラグイン
• フロントエンドプラグイン

カテゴリプラグイン
• クラウドのバックエンドリソースを
１つのカテゴリとして作成、管理す
るプラグイン
• バックエンドの構築、およびメタ情
報のエクスポートを行う
• amplify-category-analytics
• amplify-category-api
• amplify-category-auth
• amplify-category-function
• apmlify-category-function
• amplify-category-hosting
• amplify-category-
notification
• amplify-category-storage

プロバイダープラグイン
• クラウドリソースプロバイダーを抽
象化するプラグイン
• 実際に API を呼び出す部分をラップ
し、カテゴリプラグインの簡単なイ
ンターフェースを提供します
• amplify-provider-
awscloudformation

フロントエンドプラグイン
• フロントエンドのプロジェクトから
クラウドリソース情報を認識できる
ようにする
• フロントエンドプロジェクトから構
築したバックエンドリソース
• amplify-frontend-javascript
• amplify-frontend-android
• amplify-frontend-ios

amplify status
34
ローカルリソースのステータスを表示すると、Category / Provider がどう使わ
れているかが確認できる

amplify-CLIがどう動くか init
1. フロントエンドプラグインを選択
2. 選択したフロントエンドプラグインの初期化ロジックを実行
3. バックエンドクラウドリソースへのアクセスを提供するプロバイダプラグ
インを選択
4. 選択したプロバイダプラグインの初期化ロジックを実行
5. プロジェクトのルートディレクトリにAmplify フォルダを作成し、初期プ
ロジェクト構成情報を記述
6. フロントエンドプラグインとプロバイダプラグインの出力を使用して、プ
ロジェクトのメタデータファイルamplify-meta.jsonを生成
7. .amplifyrcファイルを生成
35

amplify-CLIがどう動くか configure
1. 新しい IAM ユーザーを設定
2. ローカルにクレデンシャル情報を保存
このクレデンシャルを使ってプロバイダーにアクセス
36

amplify-CLIがどう動くか <category> add
1. カテゴリープラグインが実行され、リソースを情報がローカルに書き出さ
れる
1. amplify/backend/<category> にリソース情報が配置される
2. Amplify/backend/awscloudformation に上記の参照が追加される
37

amplify-CLIがどう動くか push
1. クラウドのバックエンドリソースを更新
1. テンプレートの最新バージョンをS3にデプロイ
2. AWS CloudFormation API を呼び出して、テンプレートをもとにクラウドのリソース
を構築
2. フロントエンドからクラウドに接続するための情報をエクスポート
38

フロントエンドとクラウドをつなぐ情報
• aws-exports.js (js用)
• awsconfiguration.json (iOS / Android用)
39
Amplify.configure({
Auth: {
// REQUIRED - Amazon Cognito Region
region: 'XX-XXXX-X’,
// OPTIONAL - Amazon Cognito User Pool ID
userPoolId: 'XX-XXXX-X_abcd1234’,
// OPTIONAL - Amazon Cognito Web Client ID
userPoolWebClientId: 'XX-XXXX-X_abcd1234’,
}
});

UIComponent
40

Authentication
import { withAuthenticator } from 'aws-amplify-react’;
...
export default withAuthenticator(App);
41
withAuthenticator Higher Order
Component を使うことで、非常にシンプル
なコードで認証機能をアプリケーションに組
み込むことができる

Picker
import { PhotoPicker } from 'aws-amplify-react’;
render() {
<PhotoPicker preview onLoad={
//custom
}/>
}
42
ローカルストレージからファイルを選択する
ための UI Component

S3Album
import { S3Album } from 'aws-amplify-react’;
reunder() {
return <S3Album path={path}
}
43
S3Image をリスト表示する UI Component

まとめ
44

まとめ
AWS Amplify は、クラウドベースの Web アプリケー
ションおよびモバイルアプリケーションを開発するため
の、高機能な宣言型 JavaScript ライブラリ
Amplify CLI (Command Line Interface) ツール
チェーンも併せて提供されており、様々なバックエンド
コンポーネントをコマンドラインで一元的な操作、管理
することも可能

オンラインセミナー資料の配置場所
AWS クラウドサービス活用資料集
• https://aws.amazon.com/jp/aws-jp-introduction/
Amazon Web Services ブログ
• 最新の情報、セミナー中のQ&A等が掲載されています。
• https://aws.amazon.com/jp/blogs/news/
46

公式Twitter/Facebook
AWSの最新情報をお届けします
@awscloud_jp
検索
最新技術情報、イベント情報、お役立ち情報、
お得なキャンペーン情報などを日々更新しています！
もしくは
http://on.fb.me/1vR8yWm
47

AWSの導入、お問い合わせのご相談
AWSクラウド導入に関するご質問、お見積、資料請求をご希望の
お客様は以下のリンクよりお気軽にご相談下さい。
https://aws.amazon.com/jp/contact-us/aws-sales/
※「AWS 問い合わせ」で検索して下さい。
48

AWS Well Architected 個別技術相談会お知らせ
• Well Architectedフレームワークに基づく数十個の質問項目を元に、お客様
がAWS上で構築するシステムに潜むリスクやその回避方法をお伝えする個別
相談会です。
https://pages.awscloud.com/well-architected-consulting-jp.html
• 参加無料
• 毎週火曜・木曜開催
49

AWS Black Belt Online Seminar AWS Amplify

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie AWS Black Belt Online Seminar AWS Amplify

Ähnlich wie AWS Black Belt Online Seminar AWS Amplify (20)

Mehr von Amazon Web Services Japan

Mehr von Amazon Web Services Japan (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (12)

AWS Black Belt Online Seminar AWS Amplify