Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AWS Black Belt Online Seminar AWS Amplify

4,653 views

Published on

その他のAWS公式オンラインセミナー: https://amzn.to/JPWebinar
過去の資料: https://amzn.to/JPArchive

Published in: Technology
  • Be the first to comment

AWS Black Belt Online Seminar AWS Amplify

  1. 1. © 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]
  2. 2. © 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
  3. 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/ 3
  4. 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. 4
  5. 5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. なぜ AWS Amplify なのか? AWS Amplify はフロントエンドの開発を加速させるた めに作られたプロダクト
  6. 6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amplify とは? AWS Amplify は、クラウドベースの Web アプリケー ションおよびモバイルアプリケーションを開発するため の、高機能な宣言型 JavaScript ライブラリ Amplify CLI (Command Line Interface) ツール チェーンも併せて提供されており、様々なバックエンド コンポーネントをコマンドラインで一元的な操作、管理 することも可能
  7. 7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amplify で提供されるもの Library Toolchain UI Component 7 シンプルなコードで クラウドに接続 サーバーレスな バックエンド 数コマンドで構築 便利な UI Componentで開発を 加速
  8. 8. © 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 の シンプル な管理 8 • Interactions • Deep Learning を利用したBot の構築 • PubSub • リアルタイムなデータのやりとり • Notification • キャンペーンや分析機能をもった プッシュ通知 • XR • AR / VR コンテンツの組み込み
  9. 9. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Authentication  SignUp / SignIn ができるようCognito のリソースを構築  クライアントライブラリから Auth クラスを使って Cognito を操作  React, Angular, Vue に対応した Pre-configured component 9 Amazon Cognito
  10. 10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Analytics  新しい Pinpoint リソースを構築  クライアントアプリからイベントを記録  セッションデータの自動的な記録  認証データの自動的な記録 (SignUp/ SignIn / 認証失敗 ) 10 Amazon Pinpoint
  11. 11. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. REST API  Lambda Function のリソース構築  Lambda Code の Scaffold  API Gateway の設定  クライアントライブラリを使った Lambda との通信 11 AWS Lambda + Amazon API Gateway
  12. 12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQL API  AppSync GraphQL API のリソースを構築  クライアントアプリからの、Query / Mutation / Subscription の実行  GraphQL データと連動する React Component 12 AWS AppSync
  13. 13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Hosting  ホスティング用に S3 リソースを構築 & 設定  Cloudfront の設定  S3 に アセットをpublish  変更を CLI 経由で更新 13 Amazon S3 + Amazon Cloudfront
  14. 14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Storage  S3 バケットを構築  バケットでコンテンツをアクセス権限を考慮した形で管理 14 Amazon S3
  15. 15. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. demo 15
  16. 16. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. デモで見せるもの AWS AppSync Amazon DynamoDB /graphql Resolvers Cognito user pool
  17. 17. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 17
  18. 18. © 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 へのファイルのアップロード
  19. 19. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. CLI 19
  20. 20. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. バックエンドを簡単に設定 20 ツールチェーンは AWS CloudFormation を使用して サーバーレスバックエンドを高速に作成 auth, analytics, functions, REST / GraphQL API などをサポート
  21. 21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. スタティックなウェブサイトのホスティング 21 Amazon S3 と Amazon Cloudfront を利用したスケーラブルなウェ ブサイトホスティングを利用可能 amplify publish によってバックエンドリソースの構築とフロントエ ンドリソースのビルドおよび公開を実施
  22. 22. © 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
  23. 23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 使い方 : amplify-cli の設定 指示通りに設定を行います。 URLをクリック、Openを行いブラウザで表示します。
  24. 24. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 使い方 : amplify-cli の設定 デフォルトのまま進めると Admin 権限のユーザーが払い 出されます。
  25. 25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 使い方 : amplify-cli の設定 ユーザーの作成に成功すると AWS を利用するキーが払い 出されます。
  26. 26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 使い方 : amplify-cli の設定 作ったユーザーのキーを使って amplify-cli を設定します。
  27. 27. © 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
  28. 28. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 使い方 : feature の追加 amplify-cli から feature を追加できます。この例は GraphQL のシンプルな API を構築する例です $ amplify add api
  29. 29. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. CLI Dive Deep 29
  30. 30. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amplifyのコンセプト • AWS Amplify CLI を使用して、 バックエンドリソースをクラウドに 簡単に設定可能 • Amplify-Library とシンプルに連携 することが可能 • Node.js (gluegun) で書かれており、 ほとんどがプラグインとして実装さ れている • カテゴリープラグイン • プロバイダープラグイン • フロントエンドプラグイン
  31. 31. © 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
  32. 32. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. プロバイダープラグイン • クラウドリソースプロバイダーを抽 象化するプラグイン • 実際に API を呼び出す部分をラップ し、カテゴリプラグインの簡単なイ ンターフェースを提供します • amplify-provider- awscloudformation
  33. 33. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. フロントエンドプラグイン • フロントエンドのプロジェクトから クラウドリソース情報を認識できる ようにする • フロントエンドプロジェクトから構 築したバックエンドリソース • amplify-frontend-javascript • amplify-frontend-android • amplify-frontend-ios
  34. 34. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. amplify status 34 ローカルリソースのステータスを表示すると、Category / Provider がどう使わ れているかが確認できる
  35. 35. © 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ファイルを生成 35
  36. 36. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. amplify-CLIがどう動くか configure 1. 新しい IAM ユーザーを設定 2. ローカルにクレデンシャル情報を保存 このクレデンシャルを使ってプロバイダーにアクセス 36
  37. 37. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. amplify-CLIがどう動くか <category> add 1. カテゴリープラグインが実行され、リソースを情報がローカルに書き出さ れる 1. amplify/backend/<category> にリソース情報が配置される 2. Amplify/backend/awscloudformation に上記の参照が追加される 37
  38. 38. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. amplify-CLIがどう動くか push 1. クラウドのバックエンドリソースを更新 1. テンプレートの最新バージョンをS3にデプロイ 2. AWS CloudFormation API を呼び出して、テンプレートをもとにクラウドのリソース を構築 2. フロントエンドからクラウドに接続するための情報をエクスポート 38
  39. 39. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. フロントエンドとクラウドをつなぐ情報 • 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’, } });
  40. 40. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. UIComponent 40
  41. 41. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Authentication import { withAuthenticator } from 'aws-amplify-react’; ... export default withAuthenticator(App); 41 withAuthenticator Higher Order Component を使うことで、非常にシンプル なコードで認証機能をアプリケーションに組 み込むことができる
  42. 42. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Picker import { PhotoPicker } from 'aws-amplify-react’; render() { <PhotoPicker preview onLoad={ //custom }/> } 42 ローカルストレージからファイルを選択する ための UI Component
  43. 43. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. S3Album import { S3Album } from 'aws-amplify-react’; reunder() { return <S3Album path={path} } 43 S3Image をリスト表示する UI Component
  44. 44. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. まとめ 44
  45. 45. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. まとめ AWS Amplify は、クラウドベースの Web アプリケー ションおよびモバイルアプリケーションを開発するため の、高機能な宣言型 JavaScript ライブラリ Amplify CLI (Command Line Interface) ツール チェーンも併せて提供されており、様々なバックエンド コンポーネントをコマンドラインで一元的な操作、管理 することも可能
  46. 46. © 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/ 46
  47. 47. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 公式Twitter/Facebook AWSの最新情報をお届けします @awscloud_jp 検索 最新技術情報、イベント情報、お役立ち情報、 お得なキャンペーン情報などを日々更新しています! もしくは http://on.fb.me/1vR8yWm 47
  48. 48. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWSの導入、お問い合わせのご相談 AWSクラウド導入に関するご質問、お見積、資料請求をご希望の お客様は以下のリンクよりお気軽にご相談下さい。 https://aws.amazon.com/jp/contact-us/aws-sales/ ※「AWS 問い合わせ」で検索して下さい。 48
  49. 49. © 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 • 参加無料 • 毎週火曜・木曜開催 49

×