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

© 2021, Amazon Web Services, Inc. or its Affiliates.
アマゾンウェブサービスジャパン株式会社
⽊村公哉（こやきむ）
Serverlessなみなさん、
AWS Amplifyの紹介をします︕
@kimyan_udon2

View Slide

内容についての注意点
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.

View Slide

⽊村公哉（きむらこうや）
所属
アマゾンウェブサービスジャパン株式会社
技術統括本部 ISV/SaaSソリューション本部
ソリューションアーキテクト
好きなAWSサービス
AWS Amplify AWS Lambda Amazon Kinesis
@kimyan_udon2

View Slide

私と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で構築
せっかくなので⾃分語りさせてください

View Slide

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

View Slide

本⽇お持ち帰りいただきたいこと
AWS Amplify は、
スタートアップからエンタープライズまで
⼩さくはじめて⼤きく育てる
ビジネスを展開するお客様に最適です︕
爆速
でアプリを開発
できます
簡単
にアプリを開発
できます
スケール
するアプリを
開発できます

View Slide

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

View Slide

Web・モバイルアプリ開発で
考えないといけないこと

View Slide

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

View Slide

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

View Slide


View Slide

ユーザー間
チャット
プッシュ
通知送信
他システムとの
連携処理
ログ収集
クライアント
イベント収集
分析業務

View Slide

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

View Slide

APNs, FCMにアクセスする
ユーザーに通知を送りたい
（Push, Email, SMS）
バックエンドのAPIを
さくっと作りたい
フロントエンドの
アプリを書きたい
ユーザーの⾏動を
把握、分析したい
バックエンドのロジックを
さくっと書きたい
Web コンテンツを
配信したい
アプリ開発者がやりたいことは何か
エンジニア
「ユーザーに価値を届けたい」

View Slide

AWS Amplify

View Slide

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

View Slide

AWS Amplify は、
爆速
できます
簡単
できます
スケール
するアプリを
開発できます

View Slide

AWS Amplifyをはじめる⽅法
千⾥の道もAmplify CLIからです︕早速インストールしてみましょう︕
https://github.com/aws-amplify/amplify-cli

View Slide

AWS Amplifyの各要素紹介

View Slide

AWS Amplify
Amplify CLI
Amplify Console
Amplify Admin UI
GUIツール
New!

View Slide

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

View Slide

Amplify ライブラリがないとき 😩
AWS Mobile SDKを利⽤して実装
AWSの個別のサービスを意識したAPIを⽤いて、例外処理なども考慮しながら実装

View Slide

Amplify ライブラリがあるとき 😆
直感的なインターフェースを⽤いてサクッと実装
「StorageにデータをPutしたい」
「ファイル名、アップロードするデータ、オプションを指定」

View Slide

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

View Slide

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

View Slide

API カテゴリ
l アプリケーションにAPIを簡単に実装するためのカテゴリ
AWS AppSync
「GraphQL」形式のAPIを構築するためのサービス
Amazon API Gateway
「REST」形式のAPIを構築するためのサービス
AWS Lambda

View Slide

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

View Slide

Predictions カテゴリ｜実装例
少ないコードで簡単に画像認識機能を実装︕
画像認識を実装したい場合
約98%の精度で
猫（Cat）と判定している
AI / ML Predictions

View Slide

Amplify UIコンポーネント
UI構築のためのJavaScriptライブラリ向けのUIコンポーネントライブラリ
少ないコードで開発⼯数を削減できる︕
＝本質的な作業に集中できる︕

View Slide

AWS Amplify
Amplify CLI
Amplify Console
Amplify Admin UI
GUIツール
New!

View Slide

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

View Slide

Amplify CLIがないとき 😩
バックエンドをどうやって実装する︖
AWS CloudFormationで
記述して実装︖
マネジメントコンソールから
クリックで実装︖

View Slide

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

View Slide

AWS Amplify
Amplify CLI
Amplify Console
Amplify Admin UI
GUIツール
New!

View Slide

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

View Slide

AWS Amplify Console
SPAで構築されたWebアプリ向けCI/CD＆ホスティングサービス

View Slide

Amplify Consoleがあるとき 😆
価値を届けるために必要⼗分な機能を提供
Gitリポジトリを接続するだけで、Webアプリケーションのための
CI/CDパイプラインの構築とホスティングができる︕

View Slide

AWS Amplify
Amplify CLI
Amplify Console
Amplify Admin UI
GUIツール
New!

View Slide

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

View Slide

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

View Slide

AWS Amplify（再掲）
Amplify CLI
Amplify Console
Amplify Admin UI
GUIツール
New!

View Slide

AWS Amplifyの特徴
例）Webアプリ開発におけるアプリのリリースプロセス
Amplifyによって⼀気通貫でアプリ開発に集中できる
ソースコード
管理
ビルドと
テスト
ステージングプロダクション

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

AWS Amplifyをはじめるための
ラーニングパス

View Slide

AWS Amplifyをはじめる⽅法（再掲）
千⾥の道もAmplify CLIからです︕早速インストールしてみましょう︕
Amplify CLIの初期セットアップと
プロジェクトの初期化が完了し、開発をスタートできる︕

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

各種資料を読む
［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 検索

View Slide

各種資料を読む
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/
英語の資料

View Slide

注⽬情報
Ø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です。オープンなコミュニティ
として、運営含めて皆さんと成⻑したいと考えています。
⽇本語のコンテンツを頑張って増やしています︕

View Slide

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

View Slide

AWSのフロントエンド関連サービスが気になる⽅、
ぜひ connpass のメンバーに⼊ってください︕
https://aws-amplify-jp.connpass.com/
今後のイベント開催時に通知を受け取ることができます︕

View Slide

まとめ

View Slide

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

View Slide

まとめ - AWS Amplifyがないとき 😩
エンジニア
APNs, FCM にアクセスする

View Slide

APNs, FCM にアクセスする
バックエンドのAPIを
さくっと作りたい
フロントエンドの
アプリを書きたい
ユーザーの⾏動を
把握、分析したい
ユーザーに通知を送りたい
（Push, Email, SMS）
バックエンドのロジックを
さくっと書きたい
Web コンテンツを
配信したい
まとめ - AWS Amplifyがあるとき 😆
エンジニア
「ユーザーに価値を届けたい」

View Slide

AWS Amplify

View Slide

AWS Amplify は、
爆速
できます
簡単
できます
スケール
するアプリを
開発できます

View Slide

Thank you!
こやきむ @kimyan_udon2

View Slide

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

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

Koya Kimura
PRO

More Decks by Koya Kimura

Other Decks in Programming

Featured

Transcript

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

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

Koya Kimura PRO

More Decks by Koya Kimura

Other Decks in Programming

Featured

Transcript

Koya Kimura
PRO