[AWS Black Belt Online Seminar] AWS Amplify · フロントエンドプラグイン •...
Transcript of [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.
AWS Webinar 情報 https://amzn.to/JPWebinar | 過去資料 https://amzn.to/JPArchive
Solutions Architect 塚越 啓介
2018/11/7
AWS Amplifyサービスカットシリーズ
[AWS Black Belt Online Seminar]
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Who am I ?
塚越 啓介(つかごし けいすけ)Specialist Solution Architect @Amazon Web Services Japan
Mobile / DevOps / Serverless
Background = アプリケーション開発
Webサービスの開発・運用
リアクティブプログラミング
Agile開発のコンサルティング
好きなサービス: AWS AppSync
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Black Belt Online Seminarへようこそ!
質問を投げることができます!• Adobe ConnectのQ&Aウィンドウから、質問を書き込んで下さい。
(書き込んだ質問は、主催者にしか見えません)
• 今後のロードマップに関するご質問はお答えできませんのでご了承下さい。
• Twitterへツイートする際はハッシュタグ #awsblackbelt をご利用下さい。
①Q&Aウィンドウ右下のフォームに質問を書き込んでください
②吹き出しマークで送信してください
3
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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/
4
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
内容についての注意点
• 本資料では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.
5
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
なぜ AWS Amplify なのか?
AWS Amplify はフロントエンドの開発を加速させるために作られたプロダクト
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amplify とは?
AWS Amplify は、クラウドベースの Web アプリケー
ションおよびモバイルアプリケーションを開発するための、高機能な宣言型 JavaScript ライブラリAmplify CLI (Command Line Interface) ツール
チェーンも併せて提供されており、様々なバックエンドコンポーネントをコマンドラインで一元的な操作、管理することも可能
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amplify で提供されるもの
Library Toolchain UI Component
8
シンプルなコードでクラウドに接続
サーバーレスなバックエンド
数コマンドで構築
便利な UI Componentで開発を
加速
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 9https://aws.amazon.com/jp/campaigns/manga/vol3-4/
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
なにができるか
• Analytics
• ユーザーのセッションや属性などを計測
• API
• REST /GraphQL API の利用
• Authentication
• 認証 API と pre-build UI component
• Storage
• Static contents の シンプルな管理
10
• Interactions• Deep Learning を利用したBot
の構築
• PubSub• リアルタイムなデータのやりとり
• Notification• キャンペーンや分析機能をもった
プッシュ通知
• XR• AR / VR コンテンツの組み込み
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Authentication
SignUp / SignIn ができるようCognito のリソースを構築
クライアントライブラリから Auth クラスを使って Cognito を操作
React, Angular, Vue に対応した Pre-configured component
11
Amazon Cognito
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Analytics
新しい Pinpoint リソースを構築
クライアントアプリからイベントを記録
セッションデータの自動的な記録
認証データの自動的な記録 (SignUp/ SignIn / 認証失敗 )
12
Amazon Pinpoint
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
REST API
Lambda Function のリソース構築
Lambda Code の Scaffold
API Gateway の設定
クライアントライブラリを使った Lambda との通信
13
AWS Lambda + Amazon API Gateway
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
GraphQL API
AppSync GraphQL API のリソースを構築
クライアントアプリからの、Query / Mutation / Subscription の実行
GraphQL データと連動する React Component
14
AWS AppSync
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Hosting
ホスティング用に S3 リソースを構築 & 設定
Cloudfront の設定
S3 に アセットをpublish
変更を CLI 経由で更新
15
Amazon S3 + Amazon Cloudfront
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Storage
S3 バケットを構築
バケットでコンテンツをアクセス権限を考慮した形で管理
16
Amazon S3
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
demo
17
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
デモで見せるもの
AWS AppSync
Amazon
DynamoDB
/graphql
Resolvers
Cognito user pool
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 19
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 20
• クラウド対応アプリケーションを構築するフロントエンド開発者のJavaScriptライブラリ
• フロントエンドに特化したインターフェース
import { Storage } from 'aws-amplify';
Storage.put ('test.txt’ , 'Hello’ )
.then (result => console.log(result))
.catch(err => console.log(err));
例 Amazon S3 へのファイルのアップロード
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
CLI
21
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
バックエンドを簡単に設定
22
ツールチェーンは AWS CloudFormation を使用してサーバーレスバックエンドを高速に作成
auth, analytics, functions, REST / GraphQL API などをサポート
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
スタティックなウェブサイトのホスティング
23
Amazon S3 と Amazon Cloudfront を利用したスケーラブルなウェブサイトホスティングを利用可能
amplify publish によってバックエンドリソースの構築とフロントエンドリソースのビルドおよび公開を実施
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
使い方 : amplify-cli のインストール
コマンドラインから AWS リソースを操作する amplify-cli を セットアップします
https://aws-amplify.github.io/docs/js/start
$ npm install -g @aws-amplify/cli
$ amplify configure
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
使い方 : amplify-cli の設定
指示通りに設定を行います。
URLをクリック、Openを行いブラウザで表示します。
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
使い方 : amplify-cli の設定
デフォルトのまま進めると Admin 権限のユーザーが払い出されます。
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
使い方 : amplify-cli の設定
ユーザーの作成に成功すると AWS を利用するキーが払い出されます。
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
使い方 : amplify-cli の設定
作ったユーザーのキーを使って amplify-cli を設定します。
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
使い方 : amplify-cli を使ってAWSの環境を構築
amplify pushにより src/aws-exports.js というファイルが生成され、このファイルに記載された情報で AWS と接続します。
$ amplify init
$ amplify push
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
使い方 : feature の追加
amplify-cli から feature を追加できます。この例はGraphQL のシンプルな API を構築する例です
$ amplify add api
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
CLI Dive Deep
31
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amplifyのコンセプト
• AWS Amplify CLI を使用して、バックエンドリソースをクラウドに簡単に設定可能
• Amplify-Library とシンプルに連携することが可能
• Node.js (gluegun) で書かれており、ほとんどがプラグインとして実装されている
• カテゴリープラグイン• プロバイダープラグイン• フロントエンドプラグイン
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
カテゴリプラグイン
• クラウドのバックエンドリソースを1つのカテゴリとして作成、管理するプラグイン
• バックエンドの構築、およびメタ情報のエクスポートを行う
• amplify-category-analytics• amplify-category-api• amplify-category-auth• amplify-category-function• apmlify-category-function• amplify-category-hosting• amplify-category-
notification• amplify-category-storage
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
プロバイダープラグイン
• クラウドリソースプロバイダーを抽象化するプラグイン
• 実際に API を呼び出す部分をラップし、カテゴリプラグインの簡単なインターフェースを提供します
• amplify-provider-awscloudformation
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
フロントエンドプラグイン
• フロントエンドのプロジェクトからクラウドリソース情報を認識できるようにする
• フロントエンドプロジェクトから構築したバックエンドリソース
• amplify-frontend-javascript• amplify-frontend-android• amplify-frontend-ios
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
amplify status
36
ローカルリソースのステータスを表示すると、Category / Provider がどう使われているかが確認できる
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
amplify-CLIがどう動くか init
1. フロントエンドプラグインを選択
2. 選択したフロントエンドプラグインの初期化ロジックを実行
3. バックエンドクラウドリソースへのアクセスを提供するプロバイダプラグインを選択
4. 選択したプロバイダプラグインの初期化ロジックを実行
5. プロジェクトのルートディレクトリにAmplify フォルダを作成し、初期プロジェクト構成情報を記述
6. フロントエンドプラグインとプロバイダプラグインの出力を使用して、プロジェクトのメタデータファイルamplify-meta.jsonを生成
7. .amplifyrcファイルを生成
37
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
amplify-CLIがどう動くか configure
1. 新しい IAM ユーザーを設定
2. ローカルにクレデンシャル情報を保存
このクレデンシャルを使ってプロバイダーにアクセス
38
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
amplify-CLIがどう動くか <category> add
1. カテゴリープラグインが実行され、リソースを情報がローカルに書き出される
1. amplify/backend/<category> にリソース情報が配置される
2. Amplify/backend/awscloudformation に上記の参照が追加される
39
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
amplify-CLIがどう動くか push
1. クラウドのバックエンドリソースを更新1. テンプレートの最新バージョンをS3にデプロイ
2. AWS CloudFormation API を呼び出して、テンプレートをもとにクラウドのリソースを構築
2. フロントエンドからクラウドに接続するための情報をエクスポート
40
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
フロントエンドとクラウドをつなぐ情報
• aws-exports.js (js用)
• awsconfiguration.json (iOS / Android用)
41
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’,
}
});
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
UIComponent
42
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Authentication
import { withAuthenticator } from 'aws-amplify-react’;
...
export default withAuthenticator(App);
43
withAuthenticator Higher Order Component を使うことで、非常にシンプルなコードで認証機能をアプリケーションに組み込むことができる
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Picker
import { PhotoPicker } from 'aws-amplify-react’;
render() {
<PhotoPicker preview onLoad={
//custom
}/>
}
44
ローカルストレージからファイルを選択するための UI Component
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
S3Album
import { S3Album } from 'aws-amplify-react’;
reunder() {
return <S3Album path={path}
}
45
S3Image をリスト表示する UI Component
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
まとめ
46
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
まとめ
AWS Amplify は、クラウドベースの Web アプリケー
ションおよびモバイルアプリケーションを開発するための、高機能な宣言型 JavaScript ライブラリAmplify CLI (Command Line Interface) ツール
チェーンも併せて提供されており、様々なバックエンドコンポーネントをコマンドラインで一元的な操作、管理することも可能
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
オンラインセミナー資料の配置場所
AWS クラウドサービス活用資料集
• https://aws.amazon.com/jp/aws-jp-introduction/
Amazon Web Services ブログ
• 最新の情報、セミナー中のQ&A等が掲載されています。
• https://aws.amazon.com/jp/blogs/news/
48
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
公式Twitter/FacebookAWSの最新情報をお届けします
@awscloud_jp検索
最新技術情報、イベント情報、お役立ち情報、お得なキャンペーン情報などを日々更新しています!
もしくはhttp://on.fb.me/1vR8yWm
49
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWSの導入、お問い合わせのご相談
AWSクラウド導入に関するご質問、お見積、資料請求をご希望のお客様は以下のリンクよりお気軽にご相談下さい。
https://aws.amazon.com/jp/contact-us/aws-sales/
※「AWS 問い合わせ」で検索して下さい。
50
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Well Architected 個別技術相談会お知らせ
• Well Architectedフレームワークに基づく数十個の質問項目を元に、お客様がAWS上で構築するシステムに潜むリスクやその回避方法をお伝えする個別相談会です。https://pages.awscloud.com/well-architected-consulting-jp.html
• 参加無料
• 毎週火曜・木曜開催
51
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ご参加ありがとうございました