Serverlessなみなさん、AWS Amplifyの紹介をします！

Slide 1

Slide 1 text

Slide 2

Slide 2 text

© 2021, Amazon Web Services, Inc. or its Affiliates. 内容についての注意点 o 本資料では2021年3⽉1⽇現在のサービス内容および価格についてご説明しています。最新の情報はAWS公式ウェブサイト(http://aws.amazon.com)にてご確認ください。 o 資料作成には⼗分注意しておりますが、資料内の価格とAWS公式ウェブサイト記載の価格に相違があった場合、AWS公式ウェブサイトの価格を優先とさせていただきます。 o 価格は税抜表記となっています。⽇本居住者のお客様には別途消費税をご請求させていただきます。 o 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.

Slide 3

Slide 3 text

Slide 4

Slide 4 text

© 2021, Amazon Web Services, Inc. or its Affiliates. 私とServerless o 2013年、⼤学4年、研究室の先⽣から「地域コミュニティーに関する研究しない︖ 地域住⺠の位置情報を取得してどこによく集まっているかを知りたいんだけど」と⾔われて、サーバーを購⼊する o Androidアプリを作って、位置情報を収集︕ o いろいろとアレでAndroidのローカルストレージに位置情報を貯めて、後ほど集約した o 2014年、AWS Lambdaの登場に衝撃を受ける o そのほか前後で登場したAmazon API Gateway、Amazon Cognito、Amazon Kinesisにも衝撃を受ける o 「先⽣、時代はAWSですよ」と先⽣をそそのかして、研究室でAWSを使い始める o 以後、研究で作ったアプリケーションはすべてserverlessで構築せっかくなので⾃分語りさせてください

Slide 5

Slide 5 text

© 2021, Amazon Web Services, Inc. or its Affiliates. 本⽇のお品書き l AWS AmplifyはWeb・モバイルアプリ開発者向けに提供される開発プラットフォームであり、⼀連のライブラリ、CLI、ホスティングサービスを指します。 l 爆速でプロトタイピングするところから多⼈数でセキュアにスケーラブルに開発するところまで、実⽤的な機能が揃っているAWS Amplify。 l 本⽇はServerlessな皆様に向けて、「AWS Amplifyとはなんぞや︖」という疑問にお答えできればと思います︕ AWS Amplify、いろいろあるんです

Slide 6

Slide 6 text

Slide 7

Slide 7 text

© 2021, Amazon Web Services, Inc. or its Affiliates. 本セッションの内容 l Web・モバイルアプリで考えないといけないこと l AWS Amplifyの各要素紹介 Amplifyライブラリ、Amplify CLI、 Amplify Console、Amplify Admin UI l AWS Amplifyをはじめるためのラーニングパス l まとめ

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

© 2021, Amazon Web Services, Inc. or its Affiliates. ⼀般的なWeb/モバイルアプリの構成要素フロントエンドバックエンド Webサーバーバックエンド DBサーバーロジック、UIの実装マルチプラットフォームフロントエンドライブラリロジックの実装 / 認証認可 / 通知サーバーの調達・構築 / 運⽤監視インタフェース定義 / 冗⻑化セキュリティ / メッセージング静的コンテンツ配信 / ログ管理サーバーの調達・構築運⽤監視 / 冗⻑化バックアップ/リストアセキュリティ

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Slide 16

Slide 16 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplify Amplify ライブラリ Web・モバイルアプリとAWSを統合するためのOSSライブラリ Amplify CLI Web・モバイルアプリのバックエンドをインタラクティブに作成・管理するためのOSSツールチェーン Amplify Console フルスタックサーバーレスWebアプリをビルド、テスト、デプロイ、ホスティングするためのAWSサービス Amplify Admin UI Web・モバイルアプリのバックエンドとコンテンツを管理するための GUIツール AWSを⽤いたWeb/モバイルアプリを爆速でリリースするための開発プラットフォーム New!

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify ライブラリで実装できるカテゴリこれら多くのカテゴリから「やりたいこと」を選んで宣⾔的に実装ができる︕ Storage Authentication GraphQL API DataStore REST API Analytics Push Notification XR PubSub Interactions AI / ML Predictions

Slide 26

Slide 26 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Authentication カテゴリ l アプリケーションに認証認可の機能を簡単に実装するためのカテゴリ l Amazon Cognitoと統合されたカテゴリ l 他のカテゴリと組み合わせることで「認証ユーザのみAPIを呼び出す」といった制御が可能 Amazon Cognito APIベースで実装されるモバイルアプリやWebアプリにユーザー認証機能を提供するサービス Authentication

Slide 27

Slide 27 text

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify CLI l AWSに詳しくなくても「やりたいこと」からビルディングブロック構築を⽀援 l コマンドを実⾏し、対話的に質問に答えていくだけで、サーバーレスなバックエンドを構築 l バックエンドとの接続に必要な設定ファイルやソースコードの⼀部を⾃動で⽣成 AWSでサーバーレスなバックエンドを構築・管理するためのCLIツールチェーン

Slide 33

Slide 33 text

Slide 34

Slide 34 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify CLIがあるとき 😆 「APIを追加したい」とコマンドを実⾏し、対話的に質問に答えるだけでAPIのためのバックエンドが追加できる︕ 素早くバックエンドを構築することで、開発速度を向上︕ 「やりたいこと」から宣⾔的にバックエンドを実装︕ AWS Account AWS AppSync Amazon DynamoDB AWS Amplify

Slide 35

Slide 35 text

Slide 36

Slide 36 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplify Console SPAで構築されたWebアプリ向けCI/CD＆ホスティングサービス Amplify CLIとも連携できる︕ CI（継続的インテグレーション）、CD（継続的デリバリー、継続的デプロイ）とは︖ いずれもDevOpsソフトウェア開発⼿法で、開発プロセスの⼀部またはすべてを⾃動化することで、バグの早期発⾒、アプリの品質向上、開発速度の向上が期待できる。

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplify Admin UI Web・モバイルアプリのバックエンドとコンテンツを管理するためのGUIツールマネージメント Admin UI 特徴 ü AWSコンソールの外部からアクセス可能 ü 開発者以外の関係者とアクセスを共有（QAテスター、プロダクトマネージャー） ü リッチテキストをサポートするコンテンツ管理機能 ü ユーザーとグループの管理機能 New!

Slide 41

Slide 41 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify Admin UIの概要ぜひ触ってみてください︕ https://aws.amazon.com/jp/blogs/news/aws-amplify-admin-ui- helps-you-develop-app-backends-no-cloud-experience-required-jp/

Slide 42

Slide 42 text

Slide 43

Slide 43 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplify（再掲） Amplify ライブラリ Web・モバイルアプリとAWSを統合するためのOSSライブラリ Amplify CLI Web・モバイルアプリのバックエンドをインタラクティブに作成・管理するためのOSSツールチェーン Amplify Console フルスタックサーバーレスWebアプリをビルド、テスト、デプロイ、ホスティングするためのAWSサービス Amplify Admin UI Web・モバイルアプリのバックエンドとコンテンツを管理するための GUIツール AWSを⽤いたWeb/モバイルアプリを爆速でリリースするための開発プラットフォーム New!

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplifyの特徴ソースコード管理 l [Libraries] AWSサービスと統合されたクライアントライブラリ l [Libraries] ユースケースに基づいた宣⾔的なインターフェース l [Libraries] スタイルが適⽤され、すぐに利⽤可能なUIコンポーネント l [CLI] 宣⾔的なバックエンド構築と管理 l [CLI] コードによるリソースのモデル化 l [CLI] GraphQLスキーマとLambda関数の⽣成 Amplifyによって⼀気通貫でアプリ開発に集中できるソースコード管理ビルドとテストステージングプロダクション

Slide 49

Slide 49 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplifyの特徴ビルドとテスト l [CLI] Amplify Mockingによるバックエンドのローカルテスト l [CLI] amplify envコマンドによるバックエンド開発環境の分離 l [Console] Gitリポジトリの変更を検知し⾃動デプロイ l [Console] ビルドフェーズに任意のテストを実⾏可能 l [Console] CypressによるE2Eテストが統合済み Amplifyによって⼀気通貫でアプリ開発に集中できるソースコード管理ビルドとテストステージングプロダクション

Slide 50

Slide 50 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplifyの特徴ステージングとプロダクション l [Console] フィーチャーブランチのデプロイ l [Console] プルリクエストのプレビュー l [Console] ホスティングとCDNによる配信 l [Console] 独⾃ドメインとSSL証明書の設定 l [AWS Services] 実績豊富なAWSサービスによるバックエンドの構築 Amplifyによって⼀気通貫でアプリ開発に集中できるソースコード管理ビルドとテストステージングプロダクション

Slide 51

Slide 51 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplifyを活⽤した多彩な実装パターン簡単なものから複雑なものまで、ビジネスに合わせたアプリケーションの開発ができます︕ https://aws.amazon.com/blogs/mobile/appsync-microservices/ https://github.com/aws-samples/appsync-refarch-realtime https://github.com/aws-samples/aws-serverless-workshops/tree/master/WebApplication

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Slide 54

Slide 54 text

© 2021, Amazon Web Services, Inc. or its Affiliates. ハンズオンをやってみる AWS Amplify Social Network App Workshop l ソーシャルメディアアプリの開発を通して、実践的にAWS Amplifyについて学ぶことができる l スタートアップのCTOになったつもりでハンズオンを進めていきましょう︕ 「Amplify CLIは⼊れてみたけど…」というあなたに朗報です︕ https://amplify-sns.workshop.aws/ja/

Slide 55

Slide 55 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Stage 1 - シードステージ（第1章〜第4章）ストーリー l あなたはスタートアップ1⼈⽬の開発者です l CEOと相談し、ソーシャルメディアアプリケーションを開発することが決まりました l しかし、投資家への説明まではあと3⽇しかありません l 必要最低限の機能でいいものの、最速での⽴ち上げが求められています学習できること l AWS Amplifyの基礎的な使い⽅に慣れる爆速でアプリケーションを実装できることを実感する l それだけでなく、将来的なスケーラビリティまでサポートすることを理解するスタートアップ1⼈⽬のエンジニア/CTOとして、アプリを開発する︕

Slide 56

Slide 56 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Stage 2 - アーリーステージ（第5章〜第6章）ストーリー l ひとまず最低限の機能を実装しリリースし、⼀定数のユーザを獲得することに成功しました l AWS Amplifyで構築したためサーバの運⽤は不要なものの、明確になってきた課題や機能要望に答える必要があります学習できること l これまで登場しなかったAWSサービスの活⽤⽅法を知る l AWS Amplifyのさらに⾼度な利⽤⽅法などを知るユーザを⼀定数獲得し、増え始めた課題や機能要望に対応する︕

Slide 57

Slide 57 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Stage 3 - ミドルステージ（第7章〜第8章）ストーリー l 機能拡充を続けた結果、ビジネスは軌道に乗り始め、同時にエンジニア組織も拡⼤し始めました l 並⾏して複数の機能開発が進むことも増えたため、効率の良いチーム開発について考える必要があります学習できること l 実際に機能追加を通して、チーム開発や、 AWS Amplify Consoleを⽤いた機能ごとの検証環境の構築について学ぶ事業が軌道に乗りユーザもエンジニアも急拡⼤

Slide 58

Slide 58 text

© 2021, Amazon Web Services, Inc. or its Affiliates. 各種資料を読む［AWS Black Belt Online Seminar］AWS Amplify（⽇本語） l https://aws.amazon.com/jp/blogs/news/webinar-bb-aws-amplify-2020/ builders.flash✨ l https://aws.amazon.com/jp/builders-flash/ そのほか、Advent Calendarや利⽤者のブログなど⽇本語の資料 AWS Amplify 検索

Slide 59

Slide 59 text

© 2021, Amazon Web Services, Inc. or its Affiliates. 各種資料を読む l Amplify Docs l https://docs.amplify.aws/ l AWS Amplify GitHubリポジトリ l https://github.com/aws-amplify l AWS Mobile Blog l https://aws.amazon.com/blogs/mobile/ 英語の資料

Slide 60

Slide 60 text

© 2021, Amazon Web Services, Inc. or its Affiliates. 注⽬情報 Øawesome-aws-amplify-ja Ø https://github.com/aws-amplify-jp/awesome-aws-amplify-ja Ø ⽇本語で書かれているAWS Amplifyのツール、チュートリアル、記事などのリンク集です。 ØSlack: Amplify Japan User Group Ø https://github.com/aws-amplify-jp/awesome-aws-amplify-ja#slack Ø ⽇本のAmplifyコミュニティーSlackです。オープンなコミュニティとして、運営含めて皆さんと成⻑したいと考えています。⽇本語のコンテンツを頑張って増やしています︕

Slide 61

Slide 61 text

© 2021, Amazon Web Services, Inc. or its Affiliates. 直近のイベント情報 Ø Amplify Meetup #03 Ø 2021年4⽉2⽇ 18:30〜オンライン開催 Ø Amplify Meetupは、AWS Amplifyに興味のあるすべてのエンジニアのためのコミュニティイベントです。AWS Amplifyの知⾒を共有して、⽇本語の情報を増やしていきましょう︕Amplify MeetupではAWS Amplifyに関する情報交換と、AWS Amplifyの⽇本コミュニティの醸成を⽬的とし、様々なイベントを開催予定です。 Amplifyハンズオンなども開催予定です︕

Slide 62

Slide 62 text

Slide 63

Slide 63 text

Slide 64

Slide 64 text

© 2021, Amazon Web Services, Inc. or its Affiliates. まとめ - AWS Amplifyとは︖ l AWSを⽤いたWeb/モバイルアプリを爆速でリリースするための開発プラットフォーム l ライブラリ｜Web・モバイルアプリとAWSを統合するためのOSSライブラリ l CLI｜バックエンドをインタラクティブに作成・管理するためのOSSツールチェーン l AWS Amplify Console｜フロントエンドとバックエンドに対してビルド、テスト、デプロイ、ホスティングを容易に実現できるサービス群 l Admin UI｜ Web・モバイルアプリのバックエンドとコンテンツを管理するためのGUIツール l ビジネスのスケールに合わせて、アーキテクチャの進化に対応

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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