Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AWS Amplify の概要 について簡単なおさらい/AWS Amplify Overview in brief

Jaga
October 08, 2021

AWS Amplify の概要 について簡単なおさらい/AWS Amplify Overview in brief

2021/10/08 (Fri)に開催された【Amplify Japan UG x Startup】Meetup で登壇した際の資料です。Amplifyの概要について解説しています。

Jaga

October 08, 2021
Tweet

More Decks by Jaga

Other Decks in Technology

Transcript

  1. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS Japan Startup Solutions Architect
    じゃが (永⼭⼤輔)
    AWS Amplify の概要
    について簡単なおさらい

    View full-size slide

  2. © 2021, Amazon Web Services, Inc. or its Affiliates.
    じゃが (永⼭⼤輔) @jagaimogmog
    Startup Solutions Architect
    Amazon Web Service Japan K.K.
    > Health Care Startupでエンジニア・事業開発
    > AWSでStartupの技術⽀援・アプリ開発者⽀援
    Amazon Chime SDK
    AWS Amplify AWS App Runner

    View full-size slide

  3. © 2021, Amazon Web Services, Inc. or its Affiliates.
    アジェンダ
    • Web・モバイルアプリ開発と Amplify の⽬指す価値
    • Amplify について
    • Amplify CLI と Amplify Libraries
    • Amplify Console
    • Amplify Admin UI
    • まとめ

    View full-size slide

  4. © 2021, Amazon Web Services, Inc. or its Affiliates.
    ウェブ・モバイルアプリ開発
    と Amplify の⽬指す価値

    View full-size slide

  5. © 2021, Amazon Web Services, Inc. or its Affiliates.
    開発者がやりたいことは何か
    アプリケーション
    エンジニア
    サーバーを構築したい︖
    サーバーを運⽤・監視したい︖
    バックエンドの
    ネットワーク設定をしたい︖
    APNs, FCMにアクセスする
    コードを書きたい︖
    ログの出⼒⽅法を
    セットアップしたい︖
    ミドルウェアをインストール、
    チューニングしたい︖

    View full-size slide

  6. © 2021, Amazon Web Services, Inc. or its Affiliates.
    APNs, FCMにアクセスする
    コードを書きたい︖
    ユーザーに通知を送りたい
    (Push, Email, SMS)
    サーバーを運⽤・監視したい︖
    サーバーを構築したい︖
    バックエンドの
    ネットワーク設定をしたい︖
    ログの出⼒⽅法を
    セットアップしたい︖
    ミドルウェアをインストール、
    チューニングしたい︖
    バックエンドのAPIを
    さくっと作りたい
    フロントエンドの
    アプリを書きたい
    ユーザーの⾏動を
    把握、分析したい
    バックエンドのロジックを
    さくっと書きたい
    Web コンテンツを
    配信したい
    開発者がやりたいことは何か
    アプリケーション
    エンジニア
    「ユーザーに価値を届けたい」

    View full-size slide

  7. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS Amplify

    View full-size slide

  8. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS Amplify とは︖
    Amplify CLI
    Web・モバイルアプリのバックエンドをインタラクティブに
    作成・管理するための OSS ツールチェーン
    Amplify Libraries
    Web・モバイルアプリと AWS を統合するための OSS ライブラリ
    Amplify Console
    フルスタックサーバーレス Web アプリをビルド、テスト、
    デプロイ、ホスティングするための AWS サービス
    Amplify Admin UI
    Web・モバイルアプリのバックエンドとコンテンツを管理するための
    GUI ツール
    バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、
    アプリケーションのデプロイが可能なプラットフォーム

    View full-size slide

  9. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS Amplify とは︖
    Amplify CLI
    Web・モバイルアプリのバックエンドをインタラクティブに
    作成・管理するための OSS ツールチェーン
    Amplify Libraries
    Web・モバイルアプリと AWS を統合するための OSS ライブラリ
    Amplify Console
    フルスタックサーバーレス Web アプリをビルド、テスト、
    デプロイ、ホスティングするための AWS サービス
    Amplify Admin UI
    Web・モバイルアプリのバックエンドとコンテンツを管理するための
    GUI ツール
    バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、
    アプリケーションのデプロイが可能なプラットフォーム

    View full-size slide

  10. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify の各コンポーネントの役割
    - SPA を例に -
    .js
    .html
    .css
    Web Browser

    View full-size slide

  11. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify の各コンポーネントの役割
    - SPA を例に -
    .js
    .html
    .css
    Web Browser

    View full-size slide

  12. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Web Browser
    Amplify の各コンポーネントの役割
    - SPA を例に -
    .js
    .html
    .css

    View full-size slide

  13. © 2021, Amazon Web Services, Inc. or its Affiliates.
    .js
    .html
    .css
    Web Browser
    Amplify の各コンポーネントの役割
    - SPA を例に -

    View full-size slide

  14. © 2021, Amazon Web Services, Inc. or its Affiliates.
    .js
    .html
    .css
    Web Browser
    Amplify の各コンポーネントの役割
    - SPA を例に -

    View full-size slide

  15. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Web Browser
    .js
    .html
    .css
    Amplify の各コンポーネントの役割
    - SPA を例に -

    View full-size slide

  16. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify CLI/Libraries で実装できる
    機能群(カテゴリ)
    Storage
    Authentication GraphQL API
    DataStore
    REST API
    Analytics
    Push Notification
    XR
    PubSub
    Interactions
    AI / ML Predictions
    Geo
    New!

    View full-size slide

  17. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Authentication カテゴリ
    • アプリケーションに認証認可の機能を簡単に実装するためのカテゴリ
    • Amazon Cognito を利⽤して構築
    • 他の機能カテゴリと連携し、ユーザー認証による制御を追加することが可能
    Authentication

    View full-size slide

  18. © 2021, Amazon Web Services, Inc. or its Affiliates.
    API カテゴリ
    • アプリケーションに API を簡単に実装するためのカテゴリ
    REST API GraphQL
    REST API GraphQL API

    View full-size slide

  19. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AI / ML Predictions カテゴリ
    • AWS が提供する AI/ML サービス を簡単に活⽤するためのカテゴリ
    • テキスト翻訳、⽂字読み上げ、物体検出、⽂章のネガポジ判定といった機能
    を簡単に Web・モバイルアプリに実装できる
    Amazon Rekognition
    Amazon Textract Amazon Transcribe
    Amazon Polly Amazon Translate
    Amazon Comprehend
    Amazon Lex
    AI / ML Predictions

    View full-size slide

  20. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS Amplify とは︖
    Amplify CLI
    Web・モバイルアプリのバックエンドをインタラクティブに
    作成・管理するための OSS ツールチェーン
    Amplify Libraries
    Web・モバイルアプリと AWS を統合するための OSS ライブラリ
    Amplify Console
    フルスタックサーバーレス Web アプリをビルド、テスト、
    デプロイ、ホスティングするための AWS サービス
    Amplify Admin UI
    Web・モバイルアプリのバックエンドとコンテンツを管理するための
    GUI ツール
    バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、
    アプリケーションのデプロイが可能なプラットフォーム

    View full-size slide

  21. © 2021, Amazon Web Services, Inc. or its Affiliates.
    .js
    .html
    .css
    Web Browser
    Amplify の各コンポーネントの役割 (再掲)
    - SPA を例に -

    View full-size slide

  22. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify CLI
    • AWS に詳しくなくても「ユースケース(やりた
    いこと)」から各種コンポーネントの構築を⽀援
    • コマンドを実⾏し、対話的に質問に答えていく
    とバックエンドが構築
    AWS でサーバーレスなバックエンドを構築・管理するための CLI ツールチェーン

    View full-size slide

  23. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify CLI がない場合
    CloudFormation テンプレート
    記述して構築︖
    マネジメントコンソールから
    クリックして構築︖

    View full-size slide

  24. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify CLI を利⽤する場合
    「API を追加したい」とユースケースに基づいたコマンドを実⾏し、
    対話的に質問に答えるだけで バックエンドを構築
    詳しい設定は任意回答のため、最⼩限の操作でセットアップ可能
    インフラの開発効率を⾼めることで、ビジネスロジックの開発に集中︕
    AWS Account
    AWS AppSync Amazon DynamoDB
    AWS Amplify

    View full-size slide

  25. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS Amplify とは︖
    Amplify CLI
    Web・モバイルアプリのバックエンドをインタラクティブに
    作成・管理するための OSS ツールチェーン
    Amplify Libraries
    Web・モバイルアプリと AWS を統合するための OSS ライブラリ
    Amplify Console
    フルスタックサーバーレス Web アプリをビルド、テスト、
    デプロイ、ホスティングするための AWS サービス
    Amplify Admin UI
    Web・モバイルアプリのバックエンドとコンテンツを管理するための
    GUI ツール
    バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、
    アプリケーションのデプロイが可能なプラットフォーム

    View full-size slide

  26. © 2021, Amazon Web Services, Inc. or its Affiliates.
    .js
    .html
    .css
    Web Browser
    Amplify の各コンポーネントの役割 (再掲)
    - SPA を例に -

    View full-size slide

  27. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Libraries
    • AWS バックエンドと簡単に統合できるクライアントアプリ⽤のライブラリ
    • React/Vue/Angular といった JavaScript ライブラリや
    iOS/Android、Flutter に対応
    • ユースケースベースで直感的な実装ができるインターフェース

    View full-size slide

  28. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Libraries がない場合
    AWS Mobile SDK を利⽤して実装
    AWSのサービスを意識したAPIを用いて、例外処理なども考慮しながら実装

    View full-size slide

  29. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Libraries を利⽤する場合
    直感的なインターフェースを⽤いてサクッと実装
    Storage にデータを PUT したい
    ファイル名、アップロードするデータ、オプションを指定

    View full-size slide

  30. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify UI コンポーネント
    UI 構築のための JavaScript ライブラリ向けの UI コンポーネントライブラリ
    少ないコードで開発工数を削減できる!
    =本質的な作業に集中できる!

    View full-size slide

  31. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS Amplify とは︖
    Amplify CLI
    Web・モバイルアプリのバックエンドをインタラクティブに
    作成・管理するための OSS ツールチェーン
    Amplify Libraries
    Web・モバイルアプリと AWS を統合するための OSS ライブラリ
    Amplify Console
    フルスタックサーバーレス Web アプリをビルド、テスト、
    デプロイ、ホスティングするための AWS サービス
    Amplify Admin UI
    Web・モバイルアプリのバックエンドとコンテンツを管理するための
    GUI ツール
    バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、
    アプリケーションのデプロイが可能なプラットフォーム

    View full-size slide

  32. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Web Browser
    Amplify の各コンポーネントの役割 (再掲)
    - SPA を例に -
    .js
    .html
    .css

    View full-size slide

  33. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Console の利⽤フロー

    View full-size slide

  34. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Hosting 利用フロー (1) リポジトリの接続

    View full-size slide

  35. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Hosting 利用フロー (1) リポジトリの接続

    View full-size slide

  36. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Hosting 利用フロー (2) ビルド設定

    View full-size slide

  37. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Amplify Hosting 利用フロー (3) デプロイ!

    View full-size slide

  38. © 2021, Amazon Web Services, Inc. or its Affiliates.
    アプリ作成後のコンソール画面
    ソースコードが変更されるたび自動でビルドからデプロイまで実行

    View full-size slide

  39. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS Amplify とは︖
    Amplify CLI
    Web・モバイルアプリのバックエンドをインタラクティブに
    作成・管理するための OSS ツールチェーン
    Amplify Libraries
    Web・モバイルアプリと AWS を統合するための OSS ライブラリ
    Amplify Console
    フルスタックサーバーレス Web アプリをビルド、テスト、
    デプロイ、ホスティングするための AWS サービス
    Amplify Admin UI
    Web・モバイルアプリのバックエンドとコンテンツを管理するための
    GUI ツール
    バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、
    アプリケーションのデプロイが可能なプラットフォーム

    View full-size slide

  40. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Web Browser
    .js
    .html
    .css
    Amplify の各コンポーネントの役割 (再掲)
    - SPA を例に -

    View full-size slide

  41. © 2021, Amazon Web Services, Inc. or its Affiliates.
    ⼿軽にセットアップできる管理⽤GUIツール
    1. メンバーの招待 2. Admin UI へログイン 3. ユーザーと
    コンテンツの管理
    Amplify Admin UI

    View full-size slide

  42. © 2021, Amazon Web Services, Inc. or its Affiliates.
    ユーザー管理
    • ユーザーの作成、管理
    • グループへのユーザー追加、管理
    コンテンツ管理
    • サービス内コンテンツの作成、管理が可能
    例)ブログの記事作成
    EC サイトにおける商品の管理
    • マークダウン形式もサポート
    ユーザーとコンテンツの管理
    Amplify Admin UI

    View full-size slide

  43. © 2021, Amazon Web Services, Inc. or its Affiliates.
    まとめ

    View full-size slide

  44. © 2021, Amazon Web Services, Inc. or its Affiliates.
    AWS Amplify とは︖
    Amplify CLI
    Web・モバイルアプリのバックエンドをインタラクティブに
    作成・管理するための OSS ツールチェーン
    Amplify Libraries
    Web・モバイルアプリと AWS を統合するための OSS ライブラリ
    Amplify Console
    フルスタックサーバーレス Web アプリをビルド、テスト、
    デプロイ、ホスティングするための AWS サービス
    Amplify Admin UI
    Web・モバイルアプリのバックエンドとコンテンツを管理するための
    GUI ツール
    バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、
    アプリケーションのデプロイが可能なプラットフォーム

    View full-size slide

  45. © 2021, Amazon Web Services, Inc. or its Affiliates.
    もっと AWS Amplify を知りたい方へ
    公式ドキュメント
    https://docs.amplify.aws
    AWS Summit 2021 資料 Web・モバイルアプリ開発を加速させる AWS Amplify
    https://d1.awsstatic.com/events/jp/2021/summit-online/AWS-
    47_AWS_Summit_Online_2021_FWM01.pdf
    ワークショップ
    https://amplify-sns.workshop.aws/ja/
    Amplify 学習リソース集
    https://aws-amplify-jp.github.io/resources
    Amplify Japan User Group Slack
    https://github.com/aws-amplify-jp/awesome-aws-amplify-ja#slack

    View full-size slide

  46. © 2021, Amazon Web Services, Inc. or its Affiliates.
    Thank you !

    View full-size slide