Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Morning Session
AWS Amplify で Web/Mobile
爆速スケーラブ...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
つかだ あきひろ
• Startup Solutions Architect
• #server...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
今⽇のセッションの⽬的
• Web/モバイルアプリ開発⽤の
ライブラリ、フレームワークである
A...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
アジェンダ
そもそもなぜ AWS Amplify が必要なのか
Amplify CLI
init...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliat...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⼀般的な Web / モバイルアプリの構成要素
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⼀般的な Web / モバイルアプリの構成要素
クライアント
アプリケーション
Web / AP...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⼀般的な Web / モバイルアプリの構成要素
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⼀般的な Web / モバイルアプリの構成要素
ユーザー間
チャット、
メッセージング
プッシュ...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
ユーザー間
チャット、
メッセージング
⼀般的な Web / モバイルアプリの構成要素
プッシュ...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
アプリ開発者がやりたいことは何か
アプリケーション
エンジニア
サーバーを構築したい?
サーバー...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
サーバーを運⽤・監視したい?
バックエンドのAPIを
さくっと作りたい
アプリ開発者がやりたいこ...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
アプリ開発者がやりたいことは何か
アプリケーション
エンジニア
フロントエンドの
アプリを書きた...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2019, Amazon Web Services, Inc. or its Affiliat...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify とは
• Amplify CLI
「やりたいこと」から直感的に
サーバー...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify を使うと
「やりたいこと」だけを意識して構築できる
• AWS の各サー...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify を使うと
「やりたいこと」だけを意識して構築できる
• AWS の各サー...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliat...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify とは (再掲)
• Amplify CLI
「やりたいこと」から直感的に...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify CLI
$ npm install -g @aws-amplify/cli
$ ...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
add で使えるカテゴリーと対応するバックエンドの例
$ amplify add ...
api...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
その他の Amplify CLI コマンド
$ amplify init
$ amplify c...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliat...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify init
Project
状況確認
Frontend
初期化
Provide...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify init
• プロジェクト名確定、環境名確定、エディタ選択を⾏う
• エディ...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify init
• ここでいうフロントエンドとは ios / android / ...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify init
• プロバイダー = バックエンドの構築を担当する機構
• デフォ...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify init
• 設定したフロントエンド、プロバイダーの
`onInitSucc...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify <category> add
ここでは $amplify predictio...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify predictions add
/packages/amplify-cate...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify predictions add
provider-utils/awsclou...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify predictions add
provider-utils/awsclou...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify predictions add
/packages/amplify-cli/...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify push
クラウドに
プッシュ
/packages/amplify-cli/...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify push
クラウドに
プッシュ
/packages/amplify-cli/...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
$ amplify push
クラウドに
プッシュして
ローカルを同期
/packages/am...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliat...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify とは (再掲)
• Amplify CLI
「やりたいこと」から直感的に...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify がサポートする JavaScript 環境
$ npm install ...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
各 Component の実装は GitHub に
https://github.com/aws...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
認証機能を提供する Vue Component の例
<template>
<div id="a...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Authenticator.vue ⾃体は 98 ⾏のシンプルな実装
https://githu...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliat...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
公式サイトのチュートリアルではじめる
https://aws-amplify.github.io
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Loft Tokyo
〜挑戦をカタチにする場所へ〜
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Loft とは︖
スタートアップやデベロッパーが、
学び、コーディングし、交流し、
「挑...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Ask An Expert カウンターでご質問いただけます
• AWS のエキスパートに
予約不...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliat...
Nächste SlideShare
Wird geladen in …5
×

[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight

425 Aufrufe

Veröffentlicht am

2019年10月に京都で開催された CTO Night & Day 2019 Fall Day1 モーニングセッションでの講演資料です

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight

  1. 1. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Morning Session AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発
  2. 2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. つかだ あきひろ • Startup Solutions Architect • #serverless #mobile #fintech #pinpoint #amplify • AWS Amplify の感じを わかってほしい⼈
  3. 3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 今⽇のセッションの⽬的 • Web/モバイルアプリ開発⽤の ライブラリ、フレームワークである AWS Amplify を知る • お⼿軽感を実感する
  4. 4. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. アジェンダ そもそもなぜ AWS Amplify が必要なのか Amplify CLI init > add > push View コンポーネント AWS Amplify のはじめかた
  5. 5. © 2019, 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 Amplify が 必要なのか
  6. 6. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. ⼀般的な Web / モバイルアプリの構成要素
  7. 7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. ⼀般的な Web / モバイルアプリの構成要素 クライアント アプリケーション Web / API サーバー サーバーサイドアプリケーション データベース ロジック、UI の実装 マルチプラットフォーム フロントエンドライブラリ ロジックの実装 / 認証認可 / 通知 サーバーの調達・構築 / 運⽤監視 インタフェース定義 / 冗⻑化 セキュリティ / メッセージング 静的コンテンツ配信 / ログ管理 サーバーの調達・構築 運⽤監視 / 冗⻑化 バックアップ/リストア セキュリティ
  8. 8. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. ⼀般的な Web / モバイルアプリの構成要素
  9. 9. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. ⼀般的な Web / モバイルアプリの構成要素 ユーザー間 チャット、 メッセージング プッシュ 通知送信 他システムとの 連携処理 ログ収集 クライアント イベント収集 分析業務
  10. 10. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. ユーザー間 チャット、 メッセージング ⼀般的な Web / モバイルアプリの構成要素 プッシュ 通知送信 他システムとの 連携処理 ログ収集 クライアント イベント収集 分析業務 この中で アプリケーション開発者が やりたいことは何か
  11. 11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. アプリ開発者がやりたいことは何か アプリケーション エンジニア サーバーを構築したい? サーバーを運⽤・監視したい? バックエンドの ネットワーク設定をしたい? APNs, FCM にアクセスする コードを書きたい? ログの出⼒⽅法を セットアップしたい? ミドルウェアをインストール、 チューニングしたい?
  12. 12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. サーバーを運⽤・監視したい? バックエンドのAPIを さくっと作りたい アプリ開発者がやりたいことは何か アプリケーション エンジニア サーバーを構築したい? バックエンドの ネットワーク設定をしたい? APNs, FCM にアクセスする コードを書きたい? ログの出⼒⽅法を セットアップしたい? ミドルウェアをインストール、 チューニングしたい? フロントエンドの アプリを書きたい ユーザーの⾏動を 把握、分析したい ユーザーに通知を送りたい (Push, Email, SMS ) バックエンドのロジックを さくっと書きたい Web コンテンツを 配信したい 「ユーザーに価値を届けたい」
  13. 13. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. アプリ開発者がやりたいことは何か アプリケーション エンジニア フロントエンドの アプリを書きたい バックエンドのAPIを さくっと作りたい ユーザーの⾏動を 把握、分析したい ユーザーに通知を送りたい (Push, Email, SMS ) バックエンドのロジックを さくっと書きたい Web コンテンツを 配信したい 「ユーザーに価値を届けたい」
  14. 14. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify
  15. 15. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify とは • Amplify CLI 「やりたいこと」から直感的に サーバーレスなバックエンドを構築 • Amplify Framework クラウドに接続された UI Component やライブラリを使い フロントエンドアプリを開発 • Amplify Console Web アプリをデプロイ、ホスティング
  16. 16. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify を使うと 「やりたいこと」だけを意識して構築できる • AWS の各サービスの詳細を知らなくても「やりたいこと」から Amplify がサーバーレスなバックエンドを構築してくれる • アプリケーション開発者は本当に必要な開発だけに集中できる • バックエンドの構築は下記のようなシンプルなコマンドで実⾏できる $ amplify add api ❯ GraphQL REST $ amplify push AWS AppSync AWS Cloud
  17. 17. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify を使うと 「やりたいこと」だけを意識して構築できる • AWS の各サービスの詳細を知らなくても「やりたいこと」から Amplify がサーバーレスなバックエンドを構築してくれる • アプリケーション開発者は本当に必要な開発だけに集中できる • バックエンドの構築は下記のようなシンプルなコマンドで実⾏できる $ amplify add api ❯ GraphQL REST $ amplify push AWS AppSync AWS Cloud AWS や Amplify の 仕組みとか知らなくても だいたい⼤丈夫
  18. 18. © 2019, 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 Amplify CLI ※ v3.0.0, 042c01421 時点の情報に基づきます
  19. 19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify とは (再掲) • Amplify CLI 「やりたいこと」から直感的に サーバーレスなバックエンドを構築 • Amplify Framework クラウドに接続された UI Component やライブラリを使いフ ロントエンドアプリを開発 • Amplify Console Web アプリを⾃動デプロイ
  20. 20. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify CLI $ npm install -g @aws-amplify/cli $ amplify █████╗ ███╗ ███╗██████╗ ██╗ ██╗███████╗██╗ ██╗ ███████╗██████╗ █████╗ ███╗ ███╗███████╗██╗ ██╗ ██████╗ ██████╗ ██╗ ██╗ ██╔══██╗████╗ ████║██╔══██╗██║ ██║██╔════╝╚██╗ ██╔╝ ██╔════╝██╔══██╗██╔══██╗████╗ ████║██╔════╝██║ ██║██╔═══██╗██╔══██╗██║ ██╔╝ ███████║██╔████╔██║██████╔╝██║ ██║█████╗ ╚████╔╝ █████╗ ██████╔╝███████║██╔████╔██║█████╗ ██║ █╗ ██║██║ ██║██████╔╝█████╔╝ ██╔══██║██║╚██╔╝██║██╔═══╝ ██║ ██║██╔══╝ ╚██╔╝ ██╔══╝ ██╔══██╗██╔══██║██║╚██╔╝██║██╔══╝ ██║███╗██║██║ ██║██╔══██╗██╔═██╗ ██║ ██║██║ ╚═╝ ██║██║ ███████╗██║██║ ██║ ██║ ██║ ██║██║ ██║██║ ╚═╝ ██║███████╗╚███╔███╔╝╚██████╔╝██║ ██║██║ ██╗ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝ ╚══╝╚══╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝ • TypeScript で実装された npm パッケージ • https://github.com/aws-amplify/amplify-cli • 各コマンド実装は /packages/amplify-cli/src/commands/* (@042c0142)
  21. 21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. add で使えるカテゴリーと対応するバックエンドの例 $ amplify add ... api auth analytics notifications hosting AWS AppSync Amazon API Gateway Amazon Cognito Amazon Pinpoint Amazon Pinpoint Amazon S3 Amazon CloudFront predictions Amazon Translate Amazon PollyAmazon Kinesis Amazon Personalize Amazon Rekognition Amazon Transcribe Amazon Textract Amazon Comprehend ※ この他に interactions, pubsub カテゴリー等があります
  22. 22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. その他の Amplify CLI コマンド $ amplify init $ amplify configure $ amplify push $ amplify serve|run $ amplify <category> add $ amplify <category> update $ amplify <category> push $ amplify <category> remove $ amplify codegen $ amplify env <add|pull|...> // プロジェクトの初期化 // プロジェクトの設定 // ローカルの情報をクラウドに反映する // ローカルでサーバーを⽴てる // アプリケーションにカテゴリーを追加する // カテゴリーの設定を更新する // カテゴリーの情報をクラウドに反映する // アプリケーションからカテゴリーを削除する // 強い型付きの GraphQL スキーマオブジェクトを⽣成 // dev, prod など複数環境を管理する
  23. 23. © 2019, 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 init > add > push を⾒てみる 典型的な操作として
  24. 24. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify init Project 状況確認 Frontend 初期化 Provider 初期化 成功時 処理 /packages/amplify-cli/src/commands/init.js
  25. 25. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify init • プロジェクト名確定、環境名確定、エディタ選択を⾏う • エディタは VSCode, Atom, Sublime Text, IntelliJ IDEA, Vim, Emacs, None から選択可能 • この時点ではメモリ上に各種情報を保持する /packages/amplify-cli/src/lib/init-steps/s0-analyzeProject.js Project 状況確認 Frontend 初期化 Provider 初期化 成功時 処理
  26. 26. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify init • ここでいうフロントエンドとは ios / android / javascript • "javascript" を選択した場合はさらに angular, ember, ionic, react, react-native からフレームワークを選択する /packages/amplify-cli/src/lib/init-steps/s1-initFrontend.js Project 状況確認 Frontend 初期化 Provider 初期化 成功時 処理
  27. 27. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify init • プロバイダー = バックエンドの構築を担当する機構 • デフォルトでは "awscloudformation" が選ばれるが、 設定ファイルに定義することで任意のカスタムプロバイダーを 利⽤可能 /packages/amplify-cli/src/lib/init-steps/s2-initProviders.js Project 状況確認 Frontend 初期化 Provider 初期化 成功時 処理
  28. 28. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify init • 設定したフロントエンド、プロバイダーの `onInitSuccessful` を呼んで後処理を⾏う • awscloudformation プロバイダーの後処理では、 設定の保存とデプロイに使う Amazon S3 バケット、 必要な IAM Role を作成する簡単な CloudFormation Stack が作成される • その結果を src/aws-exports.js に書き出す /packages/amplify-cli/src/lib/init-steps/s9-onSuccess.js Project 状況確認 Frontend 初期化 Provider 初期化 成功時 処理
  29. 29. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify <category> add ここでは $amplify predictions add の例 必要なら 認証機能を追加 さらに利⽤ したい AI の 種類を選択 設定を ローカルに 保存 /packages/amplify-category-predictions/commands/predictions/add.js 利⽤する 機能を 選択
  30. 30. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify predictions add /packages/amplify-category-predictions/provider-utils/supportedPredictions.js 必要なら 認証機能を追加 さらに利⽤ したい AI の 種類を選択 設定を ローカルに 保存 利⽤する 機能を 選択
  31. 31. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify predictions add provider-utils/awscloudformation/prediction-category-walkthroughs/identify-walkthrough.js 必要なら 認証機能を追加 さらに利⽤ したい AI の 種類を選択 設定を ローカルに 保存 利⽤する 機能を 選択
  32. 32. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify predictions add provider-utils/awscloudformation/prediction-category-walkthroughs/interpret-walkthrough.js 必要なら 認証機能を追加 さらに利⽤ したい AI の 種類を選択 設定を ローカルに 保存 利⽤する 機能を 選択
  33. 33. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify predictions add /packages/amplify-cli/src/extensions/amplify-helpers/update-amplify-meta.js 必要なら 認証機能を追加 さらに利⽤ したい AI の 種類を選択 設定を ローカルに 保存 利⽤する 機能を 選択 • ./amplify/backend/predictions/* に追加したリソースの AWS CloudFormation テンプレートが⾃動⽣成される • この時点ではまだクラウドには反映されていない
  34. 34. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify push クラウドに プッシュ /packages/amplify-cli/src/commands/push.js 差分を表⽰して プッシュするか 確認
  35. 35. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify push クラウドに プッシュ /packages/amplify-cli/src/extensions/amplify-helpers/push-resources.js 差分を表⽰して プッシュするか 確認
  36. 36. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify push クラウドに プッシュして ローカルを同期 /packages/amplify-cli/src/extensions/amplify-helpers/push-resources.js 差分を表⽰して プッシュするか 確認
  37. 37. © 2019, 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 View コンポーネント
  38. 38. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify とは (再掲) • Amplify CLI 「やりたいこと」から直感的に サーバーレスなバックエンドを構築 • Amplify Framework クラウドに接続された UI Component やライブラリを使い フロントエンドアプリを開発 • Amplify Console Web アプリを⾃動デプロイ
  39. 39. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify がサポートする JavaScript 環境 $ npm install aws-amplify --save $ npm install aws-amplify-vue --save $ npm install aws-amplify-react --save $ npm install aws-amplify-react-native --save $ npm install aws-amplify-angular --save React の Hyper Order Component、Angular の Angular Module、 Vue の Vue Component でバックエンド接続済みの UI 部品を提供 https://github.com/aws-amplify/amplify-js
  40. 40. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 各 Component の実装は GitHub に https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-vue/src/components
  41. 41. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 認証機能を提供する Vue Component の例 <template> <div id="app"> <!-- ↓↓認証コンポーネント↓↓ --> <amplify-authenticator /> <!-- ↑↑↑↑ --> </div> </template>
  42. 42. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Authenticator.vue ⾃体は 98 ⾏のシンプルな実装 https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-vue/src/components/authenticator/Authenticator.vue
  43. 43. © 2019, 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 Amplify のはじめかた
  44. 44. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 公式サイトのチュートリアルではじめる https://aws-amplify.github.io
  45. 45. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Loft Tokyo 〜挑戦をカタチにする場所へ〜
  46. 46. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Loft とは︖ スタートアップやデベロッパーが、 学び、コーディングし、交流し、 「挑戦をカタチにする場所へ」
  47. 47. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Ask An Expert カウンターでご質問いただけます • AWS のエキスパートに 予約不要で質問できる • コワーキングスペースの 営業時間中(平⽇10-18時)に オープン ※ エキスパートが不在のことも ありますのでご了承ください
  48. 48. © 2019, 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 Thank you!

×