[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]

https://amzn.to/JPWebinar

https://amzn.to/JPArchive

© 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


AWS Black Belt Online Seminarへようこそ！

質問を投げることができます！• Adobe ConnectのQ&Aウィンドウから、質問を書き込んで下さい。

(書き込んだ質問は、主催者にしか見えません)

• 今後のロードマップに関するご質問はお答えできませんのでご了承下さい。

• Twitterへツイートする際はハッシュタグ #awsblackbelt をご利用下さい。

①Q&Aウィンドウ右下のフォームに質問を書き込んでください

②吹き出しマークで送信してください

3


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

https://aws.amazon.com/jp/about-aws/events/webinars/


内容についての注意点

• 本資料では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


なぜ AWS Amplify なのか？

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


Amplify とは？

AWS Amplify は、クラウドベースの Web アプリケー

ションおよびモバイルアプリケーションを開発するための、高機能な宣言型 JavaScript ライブラリAmplify CLI (Command Line Interface) ツール

チェーンも併せて提供されており、様々なバックエンドコンポーネントをコマンドラインで一元的な操作、管理することも可能


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/

https://aws.amazon.com/jp/campaigns/manga/vol3-4/


なにができるか

• Analytics

• ユーザーのセッションや属性などを計測

• API

• REST /GraphQL API の利用

• Authentication

• 認証 API と pre-build UI component

• Storage

• Static contents のシンプルな管理

10

• Interactions• Deep Learning を利用したBot

の構築

• PubSub• リアルタイムなデータのやりとり

• Notification• キャンペーンや分析機能をもった

プッシュ通知

• XR• AR / VR コンテンツの組み込み


Authentication

SignUp / SignIn ができるようCognito のリソースを構築

クライアントライブラリから Auth クラスを使って Cognito を操作

React, Angular, Vue に対応した Pre-configured component

11

Amazon Cognito


Analytics

新しい Pinpoint リソースを構築

クライアントアプリからイベントを記録

セッションデータの自動的な記録

認証データの自動的な記録 (SignUp/ SignIn / 認証失敗 )

12

Amazon Pinpoint


REST API

Lambda Function のリソース構築

Lambda Code の Scaffold

API Gateway の設定

クライアントライブラリを使った Lambda との通信

13

AWS Lambda + Amazon API Gateway


GraphQL API

AppSync GraphQL API のリソースを構築

クライアントアプリからの、Query / Mutation / Subscription の実行

GraphQL データと連動する React Component

14

AWS AppSync


Hosting

ホスティング用に S3 リソースを構築 & 設定

Cloudfront の設定

S3 にアセットをpublish

変更を CLI 経由で更新

15

Amazon S3 + Amazon Cloudfront


Storage

S3 バケットを構築

バケットでコンテンツをアクセス権限を考慮した形で管理

16

Amazon S3


demo

17


デモで見せるもの

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 へのファイルのアップロード


CLI

21


バックエンドを簡単に設定

22

ツールチェーンは AWS CloudFormation を使用してサーバーレスバックエンドを高速に作成

auth, analytics, functions, REST / GraphQL API などをサポート


スタティックなウェブサイトのホスティング

23

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

https://aws-amplify.github.io/docs/js/start


使い方 : 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

31


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

36

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


amplify-CLIがどう動くか init

1. フロントエンドプラグインを選択

2. 選択したフロントエンドプラグインの初期化ロジックを実行

3. バックエンドクラウドリソースへのアクセスを提供するプロバイダプラグインを選択

4. 選択したプロバイダプラグインの初期化ロジックを実行

5. プロジェクトのルートディレクトリにAmplify フォルダを作成し、初期プロジェクト構成情報を記述

6. フロントエンドプラグインとプロバイダプラグインの出力を使用して、プロジェクトのメタデータファイルamplify-meta.jsonを生成

7. .amplifyrcファイルを生成

37


amplify-CLIがどう動くか configure

1. 新しい IAM ユーザーを設定

2. ローカルにクレデンシャル情報を保存

このクレデンシャルを使ってプロバイダーにアクセス

38


amplify-CLIがどう動くか <category> add

1. カテゴリープラグインが実行され、リソースを情報がローカルに書き出される

1. amplify/backend/<category> にリソース情報が配置される

2. Amplify/backend/awscloudformation に上記の参照が追加される

39


amplify-CLIがどう動くか push

1. クラウドのバックエンドリソースを更新1. テンプレートの最新バージョンをS3にデプロイ

2. AWS CloudFormation API を呼び出して、テンプレートをもとにクラウドのリソースを構築

2. フロントエンドからクラウドに接続するための情報をエクスポート

40


フロントエンドとクラウドをつなぐ情報

• 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’,

}

});


UIComponent

42


Authentication

import { withAuthenticator } from 'aws-amplify-react’;

...

export default withAuthenticator(App);

43

withAuthenticator Higher Order Component を使うことで、非常にシンプルなコードで認証機能をアプリケーションに組み込むことができる


Picker

import { PhotoPicker } from 'aws-amplify-react’;

render() {

<PhotoPicker preview onLoad={

//custom

}/>

}

44

ローカルストレージからファイルを選択するための UI Component


S3Album

import { S3Album } from 'aws-amplify-react’;

reunder() {

return <S3Album path={path}

}

45

S3Image をリスト表示する UI Component


まとめ

46


まとめ

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/

48

https://aws.amazon.com/jp/aws-jp-introduction/

https://aws.amazon.com/jp/blogs/news/


公式Twitter/FacebookAWSの最新情報をお届けします

@awscloud_jp検索

最新技術情報、イベント情報、お役立ち情報、お得なキャンペーン情報などを日々更新しています！

もしくはhttp://on.fb.me/1vR8yWm

49

http://on.fb.me/1vR8yWm


AWSの導入、お問い合わせのご相談

AWSクラウド導入に関するご質問、お見積、資料請求をご希望のお客様は以下のリンクよりお気軽にご相談下さい。

https://aws.amazon.com/jp/contact-us/aws-sales/

※「AWS 問い合わせ」で検索して下さい。

50

https://aws.amazon.com/jp/contact-us/aws-sales/


AWS Well Architected 個別技術相談会お知らせ

• Well Architectedフレームワークに基づく数十個の質問項目を元に、お客様がAWS上で構築するシステムに潜むリスクやその回避方法をお伝えする個別相談会です。https://pages.awscloud.com/well-architected-consulting-jp.html

• 参加無料

• 毎週火曜・木曜開催

51

https://pages.awscloud.com/well-architected-consulting-jp.html

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

ご参加ありがとうございました

Documents

[AWS Black Belt Online Seminar] AWS Amplify · フロントエンドプラグイン • フロントエンドのプロジェクトから クラウドリソース情報を認識できる

[AWS Black Belt Online Seminar] AWS Amplify · フロントエンドプラグイン • フロントエンドのプロジェクトからクラウドリソース情報を認識できる