PowerPoint Presentation

Transcription

1 [AWS Black Belt Online Seminar] AWS Amplify サービスカットシリーズ Solutions Architect 塚越啓介 2018/11/7 AWS Webinar 情報 過去資料

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

3 AWS Black Belt Online Seminarへようこそ 質問を投げることができます Adobe ConnectのQ&Aウィンドウから 質問を書き込んで下さい (書き込んだ質問は 主催者にしか見えません) 今後のロードマップに関するご質問はお答えできませんのでご了承下さい Twitterへツイートする際はハッシュタグ #awsblackbelt をご利用下さい ①Q&Aウィンドウ 右下のフォームに 質問を書き込んで ください ②吹き出しマークで 送信してください 3

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

5 内容についての注意点 本資料では 2018 年 11 月 7 日時点のサービス内容および価格についてご説明しています 最新の情報は AWS 公式ウェブサイト ( にてご確認ください 資料作成には十分注意しておりますが 資料内の価格と 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 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

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

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

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

9 9

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

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

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

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

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

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

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

17 demo 17

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

19 19

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

21 CLI 21

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

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

24 使い方 : amplify-cli のインストール コマンドラインから AWS リソースを操作する amplify-cli をセットアップします $ npm install $ amplify configure

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

26 使い方 : amplify-cli の設定 デフォルトのまま進めると Admin 権限のユーザーが払い出されます

27 使い方 : amplify-cli の設定 ユーザーの作成に成功すると AWS を利用するキーが払い出されます

28 使い方 : amplify-cli の設定 作ったユーザーのキーを使って amplify-cli を設定します

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

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

31 CLI Dive Deep 31

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

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

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

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

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

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

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

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

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

41 フロントエンドとクラウドをつなぐ情報 aws-exports.js (js 用 ) awsconfiguration.json (ios / Android 用 ) 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, } }); 41

42 UIComponent 42

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

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

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

46 まとめ 46

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

48 オンラインセミナー資料の配置場所 AWS クラウドサービス活用資料集 Amazon Web Services ブログ 最新の情報 セミナー中のQ&A等が掲載されています 48

49 公式 Twitter/Facebook AWS 検索 もしくは 最新技術情報 イベント情報 お役立ち情報 お得なキャンペーン情報などを日々更新しています! 49

50 AWS の導入 お問い合わせのご相談 AWS クラウド導入に関するご質問 お見積 資料請求をご希望のお客様は以下のリンクよりお気軽にご相談下さい AWS 問い合わせ で検索して下さい 50

51 AWS Well Architected 個別技術相談会お知らせ Well Architectedフレームワークに基づく数十個の質問項目を元に お客様 がAWS上で構築するシステムに潜むリスクやその回避方法をお伝えする個別 相談会です 参加無料 毎週火曜 木曜開催 51

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