Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AWS Amplify の概要 について簡単なおさらい/AWS Amplify Overvie...
Search
Jaga
October 08, 2021
Technology
1
1.3k
AWS Amplify の概要 について簡単なおさらい/AWS Amplify Overview in brief
2021/10/08 (Fri)に開催された【Amplify Japan UG x Startup】Meetup で登壇した際の資料です。Amplifyの概要について解説しています。
Jaga
October 08, 2021
Tweet
Share
More Decks by Jaga
See All by Jaga
Nstock QAの旅 / nstock-qa-jouerney
jagaimogmog
2
120
「引き算」で高めるアジリティ / Enhancing Agility through Subtraction
jagaimogmog
4
240
Spring Bootと行レベルセキュリティではじめるマルチテナントアーキテクチャ / Multi-tenant architecture using Row-Level Security
jagaimogmog
4
1.8k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jagaimogmog
3
560
久しぶりのコミュニティイベントがスクフェス神奈川でよかった/Good to see you Scrum Fest Kanagawa
jagaimogmog
1
480
シードスタートアップがデザインシステムをちいさくはじめてみた / Design System Small Start
jagaimogmog
1
3.5k
Starutp.fm AWSでアプリ開発に集中するためのインフラ選定/Starutp.fm How to Focus on App Development using AWS
jagaimogmog
5
1.1k
AmplifyによるGraphQL API開発 / GraphQL Development Using Amplify @Serverless Meetup#19
jagaimogmog
0
1.2k
Amplify Updates at Amplify Meetup #02
jagaimogmog
0
3.2k
Other Decks in Technology
See All in Technology
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
170
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
610
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
430
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
130
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.1k
【若手エンジニア応援LT会】ソフトウェアを学んできた私がインフラエンジニアを目指した理由
kazushi_ohata
0
150
The Rise of LLMOps
asei
7
1.6k
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
220
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
390
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Teambox: Starting and Learning
jrom
133
8.8k
Navigating Team Friction
lara
183
14k
Faster Mobile Websites
deanohume
305
30k
A Tale of Four Properties
chriscoyier
156
23k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Thoughts on Productivity
jonyablonski
67
4.3k
Facilitating Awesome Meetings
lara
50
6.1k
Automating Front-end Workflow
addyosmani
1366
200k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Transcript
© 2021, Amazon Web Services, Inc. or its Affiliates. AWS
Japan Startup Solutions Architect じゃが (永⼭⼤輔) AWS Amplify の概要 について簡単なおさらい
© 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
© 2021, Amazon Web Services, Inc. or its Affiliates. アジェンダ
• Web・モバイルアプリ開発と Amplify の⽬指す価値 • Amplify について • Amplify CLI と Amplify Libraries • Amplify Console • Amplify Admin UI • まとめ
© 2021, Amazon Web Services, Inc. or its Affiliates. ウェブ・モバイルアプリ開発
と Amplify の⽬指す価値
© 2021, Amazon Web Services, Inc. or its Affiliates. 開発者がやりたいことは何か
アプリケーション エンジニア サーバーを構築したい︖ サーバーを運⽤・監視したい︖ バックエンドの ネットワーク設定をしたい︖ APNs, FCMにアクセスする コードを書きたい︖ ログの出⼒⽅法を セットアップしたい︖ ミドルウェアをインストール、 チューニングしたい︖
© 2021, Amazon Web Services, Inc. or its Affiliates. APNs,
FCMにアクセスする コードを書きたい︖ ユーザーに通知を送りたい (Push, Email, SMS) サーバーを運⽤・監視したい︖ サーバーを構築したい︖ バックエンドの ネットワーク設定をしたい︖ ログの出⼒⽅法を セットアップしたい︖ ミドルウェアをインストール、 チューニングしたい︖ バックエンドのAPIを さくっと作りたい フロントエンドの アプリを書きたい ユーザーの⾏動を 把握、分析したい バックエンドのロジックを さくっと書きたい Web コンテンツを 配信したい 開発者がやりたいことは何か アプリケーション エンジニア 「ユーザーに価値を届けたい」
© 2021, Amazon Web Services, Inc. or its Affiliates. AWS
Amplify
© 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 アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム
© 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 アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
の各コンポーネントの役割 - SPA を例に - .js .html .css Web Browser
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
の各コンポーネントの役割 - SPA を例に - .js .html .css Web Browser
© 2021, Amazon Web Services, Inc. or its Affiliates. Web
Browser Amplify の各コンポーネントの役割 - SPA を例に - .js .html .css
© 2021, Amazon Web Services, Inc. or its Affiliates. .js
.html .css Web Browser Amplify の各コンポーネントの役割 - SPA を例に -
© 2021, Amazon Web Services, Inc. or its Affiliates. .js
.html .css Web Browser Amplify の各コンポーネントの役割 - SPA を例に -
© 2021, Amazon Web Services, Inc. or its Affiliates. Web
Browser .js .html .css Amplify の各コンポーネントの役割 - SPA を例に -
© 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!
© 2021, Amazon Web Services, Inc. or its Affiliates. Authentication
カテゴリ • アプリケーションに認証認可の機能を簡単に実装するためのカテゴリ • Amazon Cognito を利⽤して構築 • 他の機能カテゴリと連携し、ユーザー認証による制御を追加することが可能 Authentication
© 2021, Amazon Web Services, Inc. or its Affiliates. API
カテゴリ • アプリケーションに API を簡単に実装するためのカテゴリ REST API GraphQL REST API GraphQL API
© 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
© 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 アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム
© 2021, Amazon Web Services, Inc. or its Affiliates. .js
.html .css Web Browser Amplify の各コンポーネントの役割 (再掲) - SPA を例に -
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
CLI • AWS に詳しくなくても「ユースケース(やりた いこと)」から各種コンポーネントの構築を⽀援 • コマンドを実⾏し、対話的に質問に答えていく とバックエンドが構築 AWS でサーバーレスなバックエンドを構築・管理するための CLI ツールチェーン
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
CLI がない場合 CloudFormation テンプレート 記述して構築︖ マネジメントコンソールから クリックして構築︖
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
CLI を利⽤する場合 「API を追加したい」とユースケースに基づいたコマンドを実⾏し、 対話的に質問に答えるだけで バックエンドを構築 詳しい設定は任意回答のため、最⼩限の操作でセットアップ可能 インフラの開発効率を⾼めることで、ビジネスロジックの開発に集中︕ AWS Account AWS AppSync Amazon DynamoDB AWS Amplify
© 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 アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム
© 2021, Amazon Web Services, Inc. or its Affiliates. .js
.html .css Web Browser Amplify の各コンポーネントの役割 (再掲) - SPA を例に -
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
Libraries • AWS バックエンドと簡単に統合できるクライアントアプリ⽤のライブラリ • React/Vue/Angular といった JavaScript ライブラリや iOS/Android、Flutter に対応 • ユースケースベースで直感的な実装ができるインターフェース
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
Libraries がない場合 AWS Mobile SDK を利⽤して実装 AWSのサービスを意識したAPIを用いて、例外処理なども考慮しながら実装
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
Libraries を利⽤する場合 直感的なインターフェースを⽤いてサクッと実装 Storage にデータを PUT したい ファイル名、アップロードするデータ、オプションを指定
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
UI コンポーネント UI 構築のための JavaScript ライブラリ向けの UI コンポーネントライブラリ 少ないコードで開発工数を削減できる! =本質的な作業に集中できる!
© 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 アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム
© 2021, Amazon Web Services, Inc. or its Affiliates. Web
Browser Amplify の各コンポーネントの役割 (再掲) - SPA を例に - .js .html .css
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
Console の利⽤フロー
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
Hosting 利用フロー (1) リポジトリの接続
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
Hosting 利用フロー (1) リポジトリの接続
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
Hosting 利用フロー (2) ビルド設定
© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify
Hosting 利用フロー (3) デプロイ!
© 2021, Amazon Web Services, Inc. or its Affiliates. アプリ作成後のコンソール画面
ソースコードが変更されるたび自動でビルドからデプロイまで実行
© 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 アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム
© 2021, Amazon Web Services, Inc. or its Affiliates. Web
Browser .js .html .css Amplify の各コンポーネントの役割 (再掲) - SPA を例に -
© 2021, Amazon Web Services, Inc. or its Affiliates. ⼿軽にセットアップできる管理⽤GUIツール
1. メンバーの招待 2. Admin UI へログイン 3. ユーザーと コンテンツの管理 Amplify Admin UI
© 2021, Amazon Web Services, Inc. or its Affiliates. ユーザー管理
• ユーザーの作成、管理 • グループへのユーザー追加、管理 コンテンツ管理 • サービス内コンテンツの作成、管理が可能 例)ブログの記事作成 EC サイトにおける商品の管理 • マークダウン形式もサポート ユーザーとコンテンツの管理 Amplify Admin UI
© 2021, Amazon Web Services, Inc. or its Affiliates. まとめ
© 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 アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム
© 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
© 2021, Amazon Web Services, Inc. or its Affiliates. Thank
you !