Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
2020.03-サーバーレスWebアプリ制作で学ぶAppSync
w2or3w
April 24, 2020
0
90
2020.03-サーバーレスWebアプリ制作で学ぶAppSync
w2or3w
April 24, 2020
Tweet
Share
More Decks by w2or3w
See All by w2or3w
2021.09-DeployDeGo!!
w2or3w
0
7
2021.08-CICD-01
w2or3w
0
24
2021.06-Deploy-de-Go!!
w2or3w
0
14
2021.04-YOTEIASOBI vol.1 (Amplify, Cognito, Google Calendar)
w2or3w
0
110
2020.12-浜松IT合同勉強会2020
w2or3w
0
95
2020.10-にゃーにゃーマップvol.4(Uber H3 Index)
w2or3w
0
130
2020.09-JAWS UG SONIC(コロナ対策サイト+にゃーにゃーマップvol.3)
w2or3w
0
92
2020.07-にゃーにゃーマップvol.2(CloudSearch)
w2or3w
0
99
2020.06-にゃーにゃーマップvol.1
w2or3w
0
120
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1351
200k
Making Projects Easy
brettharned
98
4.4k
Intergalactic Javascript Robots from Outer Space
tanoku
260
25k
Infographics Made Easy
chrislema
233
17k
The World Runs on Bad Software
bkeepers
PRO
57
5.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.6k
Writing Fast Ruby
sferik
612
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
We Have a Design System, Now What?
morganepeng
35
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
6
2.5k
The Mythical Team-Month
searls
210
39k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
Transcript
サーバーレスWebアプリ制作で学ぶ AppSync 2020.03.27→04.24 JAWS UG 浜松 2or3
自己紹介 2or3 (ツカサ) 2(ツー) or(~か) 3(サン) アプリケーションエンジニア です。 最近サーバーレスWebアプリ制作にお熱です! 去年7月頃からJAWS
UG浜松に 顔を出しているモノです。 よろしくおねがいします。 もうすぐ 10ヶ月!
自己紹介 最初の2,3ヶ月 ぼんやり参加 ↓ 9月頃 何かやらねば → 〜10, 11, 12月
ダッシュで制作 &進捗報告at勉強会 ↓ みなぎってきてる (37才)
サーバーレスWebアプリ 『Mosaic』とは? • JAWS UG浜松で発表するために制作した • AWSを活用したサーバーレスWebアプリ • 顔・文字を抽出し、選んでモザイクをかける •
絶賛学習 & 拡張中 https://mosaic.w2or3w.com
まずはデモします。 https://mosaic.w2or3w.com ※モバイル推奨
サーバーレスWebアプリ『Mosaic』 アーキテクチャの変化 https://mosaic.w2or3w.com 着手から3ヶ月 ひとまず完成時
サーバーレスWebアプリ『Mosaic』 アーキテクチャの変化 https://mosaic.w2or3w.com それから3ヶ月 いろいろと変わった 特に AppSync
AppSyncとは? • 単一のエンドポイントを持つWebAPI • AWSのマネージドサービス • GraphQLでアクセス • MQTT over
WebSocket • CRUDはもちろん、リアルタイム同期の機能を提供 • きめ細かなアクセスコントロール • 様々なデータソースを操作可能 • オフラインでのデータ同期・キャッシング
AppSync 何が変わった? 1. 複数の認証モードを使い分けた 2. リゾルバーによる制御を加えた 3. データソースを追加して呼び分けた
AppSync ① 複数の認証モードを使い分けた https://aws.amazon.com/jp/about-aws/whats-new/2019/05/aws-appsync-now -supports-configuring-multiple-authorization-type/
AppSync ① 複数の認証モードを使い分けた APIキーだけだった ↓ APIキー APIキー
AppSync ① 複数の認証モードを使い分けた APIキーだけだった ↓ フロントエンド側 Cognito認証 バックエンド側 IAM認証 Cognito認証
IAM認証
AppSync ① 複数の認証モードを使い分けた https://qiita.com/w2or3w/items/6fe0828cd44b31f1c482
AppSync ② リゾルバーによる制御を加えた https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/resolver-mappin g-template-reference-overview.html
AppSync ② リゾルバーによる制御を加えた レコードの自動削除時間ってサーバー側の要件なのに、 クライアント側に求めさせるって何か変だよな、、。 30分後にレコードを消したい
AppSync ② リゾルバーによる制御を加えた 30分後にレコードを消したい 呼び出し元クライアントの CognitoユーザーID設定や、 入力値のバリデーションなんかもここにかけます!
AppSync ② リゾルバーによる制御を加えた https://qiita.com/w2or3w/items/ea217a404becfd0da87f
AppSync ③ データソースを追加して呼び分けた https://aws.amazon.com/jp/appsync/
AppSync ③ データソースを追加して呼び分けた モザイク処理のLambdaを 実行するために API Gatewayを利用 ↓
AppSync ③ データソースを追加して呼び分けた モザイク処理のLambdaを 実行するために API Gatewayを利用 ↓ AppSyncへ Lambdaを呼び出す
データソースを追加した
AppSync ③ データソースを追加して呼び分けた https://qiita.com/w2or3w/items/54b5c84bed05d614629e
サーバーレスWebアプリ制作で学ぶ AppSync Have a nice AppSync life!
Thank You !!