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
2020.03-サーバーレスWebアプリ制作で学ぶAppSync
Search
w2or3w
April 24, 2020
0
280
2020.03-サーバーレスWebアプリ制作で学ぶAppSync
w2or3w
April 24, 2020
Tweet
Share
More Decks by w2or3w
See All by w2or3w
2021.09-DeployDeGo!!
w2or3w
0
19
2021.08-CICD-01
w2or3w
0
50
2021.06-Deploy-de-Go!!
w2or3w
0
24
2021.04-YOTEIASOBI vol.1 (Amplify, Cognito, Google Calendar)
w2or3w
0
260
2020.12-浜松IT合同勉強会2020
w2or3w
0
250
2020.10-にゃーにゃーマップvol.4(Uber H3 Index)
w2or3w
0
360
2020.09-JAWS UG SONIC(コロナ対策サイト+にゃーにゃーマップvol.3)
w2or3w
0
290
2020.07-にゃーにゃーマップvol.2(CloudSearch)
w2or3w
0
280
2020.06-にゃーにゃーマップvol.1
w2or3w
0
290
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
Code Review Best Practice
trishagee
66
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.4k
Practical Orchestrator
shlominoach
186
10k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
910
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 !!