View
7
Download
0
Category
Preview:
Citation preview
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
これからはじめるAWS Amplify⽊村 公哉
T e c h n i c a l - 6
アマゾン ウェブ サービス ジャパン株式会社技術統括本部 Solutions Architect
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⽊村 公哉(きむら こうや)
所属アマゾン ウェブ サービス ジャパン(株)技術統括本部 Solutions Architect
好きなAWSサービス
AWS Amplify AWS Lambda Amazon Kinesis
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
本セッションの内容l ⼀般的なWeb/モバイルアプリの構成要素
l その中でアプリ開発者がやりたいことは何か
l AWS Amplifyでできることと各要素の紹介
l まとめ
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
本セッションの想定視聴者l これからアプリを作るぞ︕という⽅全員
l 起業したばかりのCEOの⽅l 起業したばかりのCEOに誘われた…
l インフラエンジニア出⾝の⽅l AWS初⼼者の⽅l 初めてアプリを作る⽅
l 「AWS Amplifyのことを知らない︕」という⽅l 「知っている︕」という⽅は「AWS Amplify 実践編」へ
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
本セッションからお持ち帰りいただきたいことAWS Amplifyは、
シード・アーリーからグロースフェーズまで
スタートアップに最適です︕
最速でアプリを開発
できます
簡単にアプリを開発
できます
スケールするアプリを開発できます
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⼀般的なWeb/モバイルアプリの構成要素
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⼀般的なWeb/モバイルアプリの構成要素
クライアントアプリケーション
Web / API サーバーサーバーサイドアプリケーション データベース
ロジック、UIの実装マルチプラットフォーム
フロントエンドライブラリ
ロジックの実装 / 認証認可 / 通知サーバーの調達・構築 / 運⽤監視
インタフェース定義 / 冗⻑化セキュリティ / メッセージング静的コンテンツ配信 / ログ管理
サーバーの調達・構築運⽤監視 / 冗⻑化
バックアップ/リストアセキュリティ
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⼀般的なWeb/モバイルアプリの構成要素
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⼀般的なWeb/モバイルアプリの構成要素
ユーザー間チャット
プッシュ通知送信
他システムとの連携処理
ログ収集
クライアントイベント収集
分析業務
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
アプリ開発者がやりたいことは何か
アプリケーションエンジニア
サーバーを構築したい︖
サーバーを運⽤・監視したい︖
バックエンドのネットワーク設定をしたい︖
APNs, FCM にアクセスするコードを書きたい︖
ログの出⼒⽅法をセットアップしたい︖
ミドルウェアをインストール、チューニングしたい︖
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
サーバーを運⽤・監視したい︖
サーバーを構築したい︖
バックエンドのネットワーク設定をしたい︖
APNs, FCM にアクセスするコードを書きたい︖
ログの出⼒⽅法をセットアップしたい︖
ミドルウェアをインストール、チューニングしたい︖
バックエンドのAPIをさくっと作りたい
フロントエンドのアプリを書きたい
ユーザーの⾏動を把握、分析したい
ユーザーに通知を送りたい(Push, Email, SMS)
バックエンドのロジックをさくっと書きたい
Web コンテンツを配信したい
アプリ開発者がやりたいことは何か
アプリケーションエンジニア
「ユーザーに価値を届けたい」
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify
FrameworkライブラリやCLI、UIコンポーネントを含むOSSのクライアントフレームワークCLIAWS AppSyncやAmazon Pinpoint、Amazon DynamoDBなど、AWSのビルディングブロックを簡単に利⽤することができるツールチェーンDeveloper Toolsフロントエンドとバックエンドに対してビルド、テスト、デプロイ、ホストを容易に実現できるサービス群
AWSを⽤いたWeb/モバイルアプリを最速でリリースするための開発プラットフォーム
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplifyファミリーで得られる価値AWS Amplifyは、
シード・アーリーからグロースフェーズまで
スタートアップに最適です︕
最速でアプリを開発
できます
簡単にアプリを開発
できます
スケールするアプリを開発できます
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplifyをはじめる⽅法千⾥の道もAmplify CLIからです︕早速インストールしてみましょう︕
https://github.com/aws-amplify/amplify-cli
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplifyの構成要素(再掲)
Amplify Frameworkl クライアントライブラリ
JavaScript / iOS / Android
l UIコンポーネントl Amplify CLI
Developer Toolsl Amplify Consolel Device Farm
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplifyの構成要素(再掲)
Amplify Frameworkl クライアントライブラリ
JavaScript / iOS / Android
l UIコンポーネントl Amplify CLI
Developer Toolsl Amplify Consolel Device Farm
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify Framework
l クライアントライブラリJavaScript / iOS / Android
l UIコンポーネントl Amplify DataStorel Amplify CLI
ライブラリ、UIコンポーネント、CLIを含むOSSのクライアントフレームワーク
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify Framework
l クライアントライブラリJavaScript / iOS / Android
l UIコンポーネントl Amplify DataStorel Amplify CLI
ライブラリ、UIコンポーネント、CLIを含むOSSのクライアントフレームワーク
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
クライアントライブラリ
l AWSバックエンドと簡単に統合できるクライアントライブラリ
l React / Vue / AngularといったWebフレームワークやiOS / Androidに対応
l カテゴリーベースで直感的な実装ができるインターフェース
Amplify for JavaScript / iOS / Android
注意︓2020年1⽉28⽇現在、Amplify for iOS / Androidはプレビュー版です。本番環境にはAWS Mobile SDK for iOS / Androidをご利⽤ください。
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
クライアントライブラリがないとき 😩AWS Mobile SDKを利⽤して⼀⽣懸命実装
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
クライアントライブラリがあるとき 🤣直感的なインターフェースを⽤いてサクッと実装
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify Framework
l クライアントライブラリJavaScript / iOS / Android
l UIコンポーネントl Amplify DataStorel Amplify CLI
ライブラリ、UIコンポーネント、CLIを含むOSSのクライアントフレームワーク
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
UIコンポーネント
l React / React Native / Angular / Ionic / Vueに対応
各フレームワーク向けのUIコンポーネントライブラリ
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
UIコンポーネントがないとき 😩
認証機能に必要なUI︓l ユーザーのサインイン・サインアップ・サインアウトのUIl パスワードを忘れた場合のUIl フェデレーションによる認証のUIl MFA(多要素認証)
l SMS、メール、TOTP(Temporary One Time Password)
l MFAコードの確認とTOTPのためのQRコード⽣成
認証機能に必要なUIをすべて⾃分で実装
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
UIコンポーネントがあるとき 🤣あらかじめ⽤意されたUIコンポーネントを⽤いてサクッと実装
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify Framework
l クライアントライブラリJavaScript / iOS / Android
l UIコンポーネントl Amplify DataStorel Amplify CLI
ライブラリ、UIコンポーネント、CLIを含むOSSのクライアントフレームワーク
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify DataStore
GraphQL経由で⾃動的にアプリケーション - バックエンドのデータを同期l AWS AppSyncと連携してデータを同期、コンフリクトを解決l iOS / Android / React Native / Webに対応
マルチプラットフォームなクライアント向けストレージエンジン
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
参考︓GraphQL
l メリットl クライアント – サーバ間のインターフェースがクリーンになるl 通信のオーバーヘッドが削減されるl APIのドキュメント作成・理解に費やす時間を減らすことができる
l 特徴l 型指定されたスキーマl クライアントからのレスポンス形式の指定l サブスクリプションを利⽤したリアルタイム処理
API⽤のOSSクエリ⾔語、クエリを実⾏するためのランタイム
詳しくは「AWS BlackBelt Online Seminar - AWS AppSync」をご覧ください
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
参考︓AWS AppSyncリアルタイム機能とオフライン機能を備えたフルマネージドGraphQLサービス
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify DataStoreがないとき 😩
よくある状況︓デバイスがオフラインになり、再度オンラインになる
l オフラインでも、データにアクセスできるl オフラインでも、データを作成したり変更したりできるl オンラインに戻ったときに、バックエンドに再接続できるl オンラインに戻ったときに、データを同期することができるl オンラインに戻ったときに、データの競合を解決できる
これらの「理想」をどうやって実装する︖
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify DataStoreがあるとき 🤣まずはデータのスキーマを定義
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify DataStoreがあるとき 🤣あとはAmplify DataStore APIを使ってデータを操作
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify Framework
l クライアントライブラリJavaScript / iOS / Android
l UIコンポーネントl Amplify DataStorel Amplify CLI
ライブラリ、UIコンポーネント、CLIを含むOSSのクライアントフレームワーク
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify CLI
l AWSに詳しくなくても「やりたいこと」からビルディングブロックを構築することができる
l コマンドを実⾏し、対話的に質問に答えていくだけで、サーバーレスなバックエンドを構築
l バックエンドとの接続に必要な設定ファイルやソースコードの⼀部を⾃動で⽣成
AWSでサーバーレスなバックエンドを構築・管理するためのCLIツールチェーン
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify CLIがないとき 😩バックエンドをどうやって実装する︖
マネジメントコンソールからクリックで実装︖
AWS CloudFormationで記述して実装︖
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify CLIがあるとき 🤣
「やりたいこと」から宣⾔的にバックエンドを実装
Analytics
Track user sessions, custom user attributes and in-app metrics
API
HTTP requests using REST and GraphQL with support for real-time data
Auth
AuthN + AuthZ library with prebuilt UI components for your app
DataStore
On-device persistent storage that automatically synchronizes data between you apps and the cloud
Interactions
Conversational bots powered by deep learning technologies
PubSub
Connect your app to message-oriented middleware on the cloud
Notifications
Push notifications with campaign analytics and targeting
XR
Work with augmented reality and virtual reality content in your apps
Predictions
Add MI/ML capabilities to your app powered by cloud services
Storage
Manage user content securely in public, protected, and private storage
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplifyの構成要素(再掲)
Amplify Frameworkl クライアントライブラリ
JavaScript / iOS / Android
l UIコンポーネントl Amplify CLI
Developer Toolsl Amplify Consolel Device Farm
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Developer Toolsフロントエンドとバックエンドに対してビルド、テスト、デプロイ、ホスティングを容易に実現できるAWSサービス群• AWS Amplify Console• AWS Device Farm
AWS Device Farmについては、こちらの資料をご参照ください。https://speakerdeck.com/srym/iosdc-2019-devicefarm
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Developer Toolsフロントエンドとバックエンドに対してビルド、テスト、デプロイ、ホスティングを容易に実現できるAWSサービス群• AWS Amplify Console• AWS Device Farm
AWS Device Farmについては、こちらの資料をご参照ください。https://speakerdeck.com/srym/iosdc-2019-devicefarm
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify Console
SPA︓Single Page Application、ReactやVueなどで作るイマドキのWebアプリケーションSSG︓Static Site Generator、GatsbyやHugoなど、構造化テキストとテンプレートからWebサイトを⽣成するフレームワーク
SPAとSSGによるフルスタックWebアプリ向けCI/CD&ホスティングサービス
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify ConsoleSPAとSSGによるフルスタックWebアプリ向けCI/CD&ホスティングサービス
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify Consoleがあるとき 🤣価値を届けるために必要⼗分な機能を提供
Gitリポジトリを接続するだけで、WebアプリケーションのためのCI/CDパイプラインの構築とホスティングができる︕
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplifyの構成要素(再掲)
Amplify Frameworkl クライアントライブラリ
JavaScript / iOS / Android
l UIコンポーネントl Amplify CLI
Developer Toolsl Amplify Consolel Device Farm
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplifyの特徴
例)Webアプリ開発におけるアプリのリリースプロセス
Amplifyファミリーによって⼀気通貫でアプリ開発に集中できる
ソースコード管理
ビルドとテスト
ステージング プロダクション
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplifyの特徴
例)Webアプリ開発におけるアプリのリリースプロセス
Amplifyファミリーによって⼀気通貫でアプリ開発に集中できる
ソースコード管理
ビルドとテスト
ステージング プロダクション
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplifyの特徴
例)Webアプリ開発におけるアプリのリリースプロセス
Amplifyファミリーによって⼀気通貫でアプリ開発に集中できる
ソースコード管理
ビルドとテスト
ステージング プロダクション
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplifyの特徴
例)Webアプリ開発におけるアプリのリリースプロセス
Amplifyファミリーによって⼀気通貫でアプリ開発に集中できる
ソースコード管理
ビルドとテスト
ステージング プロダクション
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplifyの特徴
ソースコード管理l [Framework] AWSサービスと統合されたクライアントライブラリl [Framework] ユースケースに基づいた宣⾔的なインターフェースl [Framework] スタイルが適⽤され、すぐに利⽤可能なUIコンポーネントl [CLI] 宣⾔的なバックエンド構築と管理l [CLI] コードによるリソースのモデル化l [CLI] GraphQLスキーマとLambda関数の⽣成
Amplifyファミリーによって⼀気通貫でアプリ開発に集中できる
ソースコード管理
ビルドとテスト
ステージング プロダクション
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplifyの特徴
ビルドとテストl [CLI] Amplify Mockingによるバックエンドのローカルテストl [CLI] amplify envコマンドによるバックエンド開発環境の分離l [Console] Gitリポジトリの変更を検知し⾃動デプロイl [Console] ビルドフェーズに任意のテストを実⾏可能l [Console] CypressによるE2Eテストが統合済み
Amplifyファミリーによって⼀気通貫でアプリ開発に集中できる
ソースコード管理
ビルドとテスト
ステージング プロダクション
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplifyの特徴
ステージングとプロダクションl [Console] フィーチャーブランチのデプロイl [Console] プルリクエストのプレビューl [Console] ホスティングとCDNによる配信l [Console] 独⾃ドメインとSSL証明書の設定l [AWS Services] 実績豊富なAWSサービスによるバックエンドの構築
Amplifyファミリーによって⼀気通貫でアプリ開発に集中できる
ソースコード管理
ビルドとテスト
ステージング プロダクション
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
まとめ - AWS Amplifyとは︖l AWSを⽤いたWeb/モバイルアプリを最速でリリースするための
開発プラットフォームl Framework
ライブラリやCLI、UIコンポーネントを含むOSSのクライアントフレームワークl CLI
AWS AppSyncやAmazon Pinpoint、Amazon DynamoDBなど、AWSのサービスを簡単に利⽤することができるツールチェーン
l Developer Tools(AWS Amplify Console)フロントエンドとバックエンドに対してビルド、テスト、デプロイ、ホストを容易に実現できるサービス群
l ビジネスのスケールに合わせて、アーキテクチャの進化に対応
l Amplifyファミリーによって⼀気通貫でアプリ開発に集中できる
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
まとめ - AWS Amplifyがないとき 😩
アプリケーションエンジニア
サーバーを構築したい︖
サーバーを運⽤・監視したい︖
バックエンドのネットワーク設定をしたい︖
APNs, FCM にアクセスするコードを書きたい︖
ログの出⼒⽅法をセットアップしたい︖
ミドルウェアをインストール、チューニングしたい︖
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
サーバーを運⽤・監視したい︖
サーバーを構築したい︖
バックエンドのネットワーク設定をしたい︖
APNs, FCM にアクセスするコードを書きたい︖
ログの出⼒⽅法をセットアップしたい︖
ミドルウェアをインストール、チューニングしたい︖
バックエンドのAPIをさくっと作りたい
フロントエンドのアプリを書きたい
ユーザーの⾏動を把握、分析したい
ユーザーに通知を送りたい(Push, Email, SMS)
バックエンドのロジックをさくっと書きたい
Web コンテンツを配信したい
まとめ - AWS Amplifyがあるとき 🤣
アプリケーションエンジニア
「ユーザーに価値を届けたい」
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
本セッションからお持ち帰りいただきたいことAWS Amplifyは、
シード・アーリーからグロースフェーズまで
スタートアップに最適です︕
最速でアプリを開発
できます
簡単にアプリを開発
できます
スケールするアプリを開発できます
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
【宿題】AWS Amplifyをはじめる⽅法千⾥の道もAmplify CLIからです︕早速インストールしてみましょう︕
https://github.com/aws-amplify/amplify-cli
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Loft Tokyo〜挑戦をカタチにする場所へ〜
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Loftとは︖
スタートアップやデベロッパーが学び、コーディングし、交流し「挑戦をカタチにする場所へ」
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Ask An Expertカウンターでご質問いただけます
AWSのエキスパートに予約不要で質問できる
コワーキングスペースの営業時間中(平⽇10-18時)にオープン
※ エキスパートが不在のこともありますのでご了承ください
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
関連セッション[biz-03]スピード︖スケール︖⾮エンジニアもおさえておきたい技術選定︕|塚⽥ 朗弘スタートアップでは、フェーズによって様々な要求が⽣まれます。例えば、デモデイの期限があるときはとにかく素早くアイデアを形にしたいでしょう。MVPの後サービスを成⻑させていくとき、PMFの後グロースフェーズを乗り切るとき、そして開発チームの⼈数が増えてきたとき、提携先企業も出てきたときなど、それぞれ異なる要求特性が⽣まれます。最初からToo Muchにせず、しかしちゃんとスケールできるようにするには、どう技術を考えればよいでしょうか。
[tech-07]AWS Amplify 実践編|永⼭ ⼤輔本セッションは「AWS Amplify 実践編」と称して、より実践的なAmplifyを⽤いた開発についてお話しします。少⼈数でMVPをスピーディに開発するのにとどまらず、事業が成⻑してチームが⼤きくなってきたときにどうAmplifyを使えばよいか︖ビジネスの敏捷性をエンジニアリングで⽀えるために、Amplifyはどのような効率的なツール群を提供するか︖より広範囲なビジネスニーズに答えるための柔軟性を、AmplifyとAWSの175以上のサービス群で実現するには︖こうした質問に答えるかたちで、Amplifyの魅⼒をお伝えします。
Thank you!
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⽊村 公哉@kimyan_udon2
Recommended