これからはじめる awsamplify

© 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


⽊村公哉（きむらこうや）

所属アマゾンウェブサービスジャパン（株）技術統括本部 Solutions Architect

好きなAWSサービス

AWS Amplify AWS Lambda Amazon Kinesis


本セッションの内容l ⼀般的なWeb/モバイルアプリの構成要素

l その中でアプリ開発者がやりたいことは何か

l AWS Amplifyでできることと各要素の紹介

l まとめ


本セッションの想定視聴者l これからアプリを作るぞ︕という⽅全員

l 起業したばかりのCEOの⽅l 起業したばかりのCEOに誘われた…

l インフラエンジニア出⾝の⽅l AWS初⼼者の⽅l 初めてアプリを作る⽅

l 「AWS Amplifyのことを知らない︕」という⽅l 「知っている︕」という⽅は「AWS Amplify 実践編」へ


本セッションからお持ち帰りいただきたいことAWS Amplifyは、

シード・アーリーからグロースフェーズまで

スタートアップに最適です︕

最速でアプリを開発

できます

簡単にアプリを開発

できます

スケールするアプリを開発できます


⼀般的なWeb/モバイルアプリの構成要素



クライアントアプリケーション

Web / API サーバーサーバーサイドアプリケーションデータベース

ロジック、UIの実装マルチプラットフォーム

フロントエンドライブラリ

ロジックの実装 / 認証認可 / 通知サーバーの調達・構築 / 運⽤監視

インタフェース定義 / 冗⻑化セキュリティ / メッセージング静的コンテンツ配信 / ログ管理

サーバーの調達・構築運⽤監視 / 冗⻑化

バックアップ/リストアセキュリティ



ユーザー間チャット

プッシュ通知送信

他システムとの連携処理

ログ収集

クライアントイベント収集

分析業務


アプリ開発者がやりたいことは何か

アプリケーションエンジニア

サーバーを構築したい︖

サーバーを運⽤・監視したい︖

バックエンドのネットワーク設定をしたい︖

APNs, FCM にアクセスするコードを書きたい︖

ログの出⼒⽅法をセットアップしたい︖

ミドルウェアをインストール、チューニングしたい︖








バックエンドのAPIをさくっと作りたい

フロントエンドのアプリを書きたい

ユーザーの⾏動を把握、分析したい

ユーザーに通知を送りたい（Push, Email, SMS）

バックエンドのロジックをさくっと書きたい

Web コンテンツを配信したい

アプリ開発者がやりたいことは何か


「ユーザーに価値を届けたい」


AWS Amplify

FrameworkライブラリやCLI、UIコンポーネントを含むOSSのクライアントフレームワークCLIAWS AppSyncやAmazon Pinpoint、Amazon DynamoDBなど、AWSのビルディングブロックを簡単に利⽤することができるツールチェーンDeveloper Toolsフロントエンドとバックエンドに対してビルド、テスト、デプロイ、ホストを容易に実現できるサービス群

AWSを⽤いたWeb/モバイルアプリを最速でリリースするための開発プラットフォーム


Amplifyファミリーで得られる価値AWS Amplifyは、




できます


できます



AWS Amplifyをはじめる⽅法千⾥の道もAmplify CLIからです︕早速インストールしてみましょう︕

https://github.com/aws-amplify/amplify-cli


AWS Amplifyの構成要素（再掲）

Amplify Frameworkl クライアントライブラリ

JavaScript / iOS / Android

l UIコンポーネントl Amplify CLI

Developer Toolsl Amplify Consolel Device Farm


Amplify Framework

l クライアントライブラリJavaScript / iOS / Android

l UIコンポーネントl Amplify DataStorel Amplify CLI

ライブラリ、UIコンポーネント、CLIを含むOSSのクライアントフレームワーク


クライアントライブラリ

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をご利⽤ください。


クライアントライブラリがないとき 😩AWS Mobile SDKを利⽤して⼀⽣懸命実装


クライアントライブラリがあるとき 🤣直感的なインターフェースを⽤いてサクッと実装


Amplify Framework





UIコンポーネント

l React / React Native / Angular / Ionic / Vueに対応

各フレームワーク向けのUIコンポーネントライブラリ


UIコンポーネントがないとき 😩

認証機能に必要なUI︓l ユーザーのサインイン・サインアップ・サインアウトのUIl パスワードを忘れた場合のUIl フェデレーションによる認証のUIl MFA（多要素認証）

l SMS、メール、TOTP（Temporary One Time Password）

l MFAコードの確認とTOTPのためのQRコード⽣成

認証機能に必要なUIをすべて⾃分で実装


UIコンポーネントがあるとき 🤣あらかじめ⽤意されたUIコンポーネントを⽤いてサクッと実装


Amplify Framework





Amplify DataStore

GraphQL経由で⾃動的にアプリケーション - バックエンドのデータを同期l AWS AppSyncと連携してデータを同期、コンフリクトを解決l iOS / Android / React Native / Webに対応

マルチプラットフォームなクライアント向けストレージエンジン


参考︓GraphQL

l メリットl クライアント – サーバ間のインターフェースがクリーンになるl 通信のオーバーヘッドが削減されるl APIのドキュメント作成・理解に費やす時間を減らすことができる

l 特徴l 型指定されたスキーマl クライアントからのレスポンス形式の指定l サブスクリプションを利⽤したリアルタイム処理

API⽤のOSSクエリ⾔語、クエリを実⾏するためのランタイム

詳しくは「AWS BlackBelt Online Seminar - AWS AppSync」をご覧ください


参考︓AWS AppSyncリアルタイム機能とオフライン機能を備えたフルマネージドGraphQLサービス


Amplify DataStoreがないとき 😩

よくある状況︓デバイスがオフラインになり、再度オンラインになる

l オフラインでも、データにアクセスできるl オフラインでも、データを作成したり変更したりできるl オンラインに戻ったときに、バックエンドに再接続できるl オンラインに戻ったときに、データを同期することができるl オンラインに戻ったときに、データの競合を解決できる

これらの「理想」をどうやって実装する︖


Amplify DataStoreがあるとき 🤣まずはデータのスキーマを定義


Amplify DataStoreがあるとき 🤣あとはAmplify DataStore APIを使ってデータを操作


Amplify Framework





Amplify CLI

l AWSに詳しくなくても「やりたいこと」からビルディングブロックを構築することができる

l コマンドを実⾏し、対話的に質問に答えていくだけで、サーバーレスなバックエンドを構築

l バックエンドとの接続に必要な設定ファイルやソースコードの⼀部を⾃動で⽣成

AWSでサーバーレスなバックエンドを構築・管理するためのCLIツールチェーン


Amplify CLIがないとき 😩バックエンドをどうやって実装する︖

マネジメントコンソールからクリックで実装︖

AWS CloudFormationで記述して実装︖


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


Developer Toolsフロントエンドとバックエンドに対してビルド、テスト、デプロイ、ホスティングを容易に実現できるAWSサービス群• AWS Amplify Console• AWS Device Farm

AWS Device Farmについては、こちらの資料をご参照ください。https://speakerdeck.com/srym/iosdc-2019-devicefarm


AWS Amplify Console

SPA︓Single Page Application、ReactやVueなどで作るイマドキのWebアプリケーションSSG︓Static Site Generator、GatsbyやHugoなど、構造化テキストとテンプレートからWebサイトを⽣成するフレームワーク

SPAとSSGによるフルスタックWebアプリ向けCI/CD＆ホスティングサービス


AWS Amplify ConsoleSPAとSSGによるフルスタックWebアプリ向けCI/CD＆ホスティングサービス


Amplify Consoleがあるとき 🤣価値を届けるために必要⼗分な機能を提供

Gitリポジトリを接続するだけで、WebアプリケーションのためのCI/CDパイプラインの構築とホスティングができる︕


AWS Amplifyの特徴

例）Webアプリ開発におけるアプリのリリースプロセス

Amplifyファミリーによって⼀気通貫でアプリ開発に集中できる

ソースコード管理

ビルドとテスト

ステージングプロダクション



ソースコード管理l [Framework] AWSサービスと統合されたクライアントライブラリl [Framework] ユースケースに基づいた宣⾔的なインターフェースl [Framework] スタイルが適⽤され、すぐに利⽤可能なUIコンポーネントl [CLI] 宣⾔的なバックエンド構築と管理l [CLI] コードによるリソースのモデル化l [CLI] GraphQLスキーマとLambda関数の⽣成







ビルドとテストl [CLI] Amplify Mockingによるバックエンドのローカルテストl [CLI] amplify envコマンドによるバックエンド開発環境の分離l [Console] Gitリポジトリの変更を検知し⾃動デプロイl [Console] ビルドフェーズに任意のテストを実⾏可能l [Console] CypressによるE2Eテストが統合済み







ステージングとプロダクションl [Console] フィーチャーブランチのデプロイl [Console] プルリクエストのプレビューl [Console] ホスティングとCDNによる配信l [Console] 独⾃ドメインとSSL証明書の設定l [AWS Services] 実績豊富なAWSサービスによるバックエンドの構築






まとめ - 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ファミリーによって⼀気通貫でアプリ開発に集中できる


まとめ - AWS Amplifyがないとき 😩















バックエンドのAPIをさくっと作りたい

フロントエンドのアプリを書きたい

ユーザーの⾏動を把握、分析したい

ユーザーに通知を送りたい（Push, Email, SMS）

バックエンドのロジックをさくっと書きたい

Web コンテンツを配信したい

まとめ - AWS Amplifyがあるとき 🤣


「ユーザーに価値を届けたい」


本セッションからお持ち帰りいただきたいことAWS Amplifyは、




できます


できます



【宿題】AWS Amplifyをはじめる⽅法千⾥の道もAmplify CLIからです︕早速インストールしてみましょう︕

https://github.com/aws-amplify/amplify-cli


AWS Loft Tokyo〜挑戦をカタチにする場所へ〜


AWS Loftとは︖

スタートアップやデベロッパーが学び、コーディングし、交流し「挑戦をカタチにする場所へ」


Ask An Expertカウンターでご質問いただけます

AWSのエキスパートに予約不要で質問できる

コワーキングスペースの営業時間中（平⽇10-18時）にオープン

※ エキスパートが不在のこともありますのでご了承ください


関連セッション［biz-03］スピード︖スケール︖⾮エンジニアもおさえておきたい技術選定︕｜塚⽥朗弘スタートアップでは、フェーズによって様々な要求が⽣まれます。例えば、デモデイの期限があるときはとにかく素早くアイデアを形にしたいでしょう。MVPの後サービスを成⻑させていくとき、PMFの後グロースフェーズを乗り切るとき、そして開発チームの⼈数が増えてきたとき、提携先企業も出てきたときなど、それぞれ異なる要求特性が⽣まれます。最初からToo Muchにせず、しかしちゃんとスケールできるようにするには、どう技術を考えればよいでしょうか。

［tech-07］AWS Amplify 実践編｜永⼭⼤輔本セッションは「AWS Amplify 実践編」と称して、より実践的なAmplifyを⽤いた開発についてお話しします。少⼈数でMVPをスピーディに開発するのにとどまらず、事業が成⻑してチームが⼤きくなってきたときにどうAmplifyを使えばよいか︖ビジネスの敏捷性をエンジニアリングで⽀えるために、Amplifyはどのような効率的なツール群を提供するか︖より広範囲なビジネスニーズに答えるための柔軟性を、AmplifyとAWSの175以上のサービス群で実現するには︖こうした質問に答えるかたちで、Amplifyの魅⼒をお伝えします。

Thank you!


⽊村公哉@kimyan_udon2

これからはじめる awsamplify

Documents