Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2020.03-サーバーレスWebアプリ制作で学ぶAppSync

7bb2eea85ebf9a431e3ae4ecf21876af?s=47 w2or3w
April 24, 2020
0
90

 2020.03-サーバーレスWebアプリ制作で学ぶAppSync

7bb2eea85ebf9a431e3ae4ecf21876af?s=128

w2or3w

April 24, 2020
Tweet

More Decks by w2or3w

See All by w2or3w
2021.09-DeployDeGo!!
7bb2eea85ebf9a431e3ae4ecf21876af?s=48 w2or3w
0
7
2021.08-CICD-01
7bb2eea85ebf9a431e3ae4ecf21876af?s=48 w2or3w
0
24
2021.06-Deploy-de-Go!!
7bb2eea85ebf9a431e3ae4ecf21876af?s=48 w2or3w
0
14
2021.04-YOTEIASOBI vol.1 (Amplify, Cognito, Google Calendar)
7bb2eea85ebf9a431e3ae4ecf21876af?s=48 w2or3w
0
110
2020.12-浜松IT合同勉強会2020
7bb2eea85ebf9a431e3ae4ecf21876af?s=48 w2or3w
0
95
2020.10-にゃーにゃーマップvol.4(Uber H3 Index)
7bb2eea85ebf9a431e3ae4ecf21876af?s=48 w2or3w
0
130
2020.09-JAWS UG SONIC(コロナ対策サイト+にゃーにゃーマップvol.3)
7bb2eea85ebf9a431e3ae4ecf21876af?s=48 w2or3w
0
92
2020.07-にゃーにゃーマップvol.2(CloudSearch)
7bb2eea85ebf9a431e3ae4ecf21876af?s=48 w2or3w
0
99
2020.06-にゃーにゃーマップvol.1
7bb2eea85ebf9a431e3ae4ecf21876af?s=48 w2or3w
0
120

Featured

See All Featured
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.4k
Intergalactic Javascript Robots from Outer Space
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
25k
Infographics Made Easy
282d599b414022eba5096510f675b6e2?s=48 chrislema
233
17k
The World Runs on Bad Software
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
57
5.4k
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
27
1.6k
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
130k
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
3k
StorybookのUI Testing Handbookを読んだ
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
6
2.5k
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
210
39k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
127
8.5k

Transcript

  1. サーバーレスWebアプリ制作で学ぶ AppSync 2020.03.27→04.24 JAWS UG 浜松 2or3

  2. 自己紹介 2or3 (ツカサ) 2(ツー) or(~か) 3(サン) アプリケーションエンジニア です。 最近サーバーレスWebアプリ制作にお熱です！ 去年7月頃からJAWS

    UG浜松に 顔を出しているモノです。 よろしくおねがいします。 もうすぐ 10ヶ月！

  3. 自己紹介 最初の2,3ヶ月 ぼんやり参加 　↓ 9月頃 何かやらねば → 〜10, 11, 12月

    ダッシュで制作 ＆進捗報告at勉強会 　↓ みなぎってきてる (37才)

  4. サーバーレスWebアプリ 『Mosaic』とは？ • JAWS UG浜松で発表するために制作した • AWSを活用したサーバーレスWebアプリ • 顔・文字を抽出し、選んでモザイクをかける •

    絶賛学習 & 拡張中 https://mosaic.w2or3w.com

  5. まずはデモします。 https://mosaic.w2or3w.com ※モバイル推奨

  6. サーバーレスWebアプリ『Mosaic』 アーキテクチャの変化 https://mosaic.w2or3w.com 着手から3ヶ月 ひとまず完成時

  7. サーバーレスWebアプリ『Mosaic』 アーキテクチャの変化 https://mosaic.w2or3w.com それから3ヶ月 いろいろと変わった 特に AppSync

  8. AppSyncとは？ • 単一のエンドポイントを持つWebAPI • AWSのマネージドサービス • GraphQLでアクセス • MQTT over

    WebSocket • CRUDはもちろん、リアルタイム同期の機能を提供 • きめ細かなアクセスコントロール • 様々なデータソースを操作可能 • オフラインでのデータ同期・キャッシング

  9. AppSync 何が変わった？ 1. 複数の認証モードを使い分けた 2. リゾルバーによる制御を加えた 3. データソースを追加して呼び分けた

  10. AppSync ① 複数の認証モードを使い分けた https://aws.amazon.com/jp/about-aws/whats-new/2019/05/aws-appsync-now -supports-configuring-multiple-authorization-type/

  11. AppSync ① 複数の認証モードを使い分けた APIキーだけだった ↓ APIキー APIキー

  12. AppSync ① 複数の認証モードを使い分けた APIキーだけだった ↓ フロントエンド側 Cognito認証 バックエンド側 IAM認証 Cognito認証

    IAM認証

  13. AppSync ① 複数の認証モードを使い分けた https://qiita.com/w2or3w/items/6fe0828cd44b31f1c482

  14. AppSync ② リゾルバーによる制御を加えた https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/resolver-mappin g-template-reference-overview.html

  15. AppSync ② リゾルバーによる制御を加えた レコードの自動削除時間ってサーバー側の要件なのに、 クライアント側に求めさせるって何か変だよな、、。 30分後にレコードを消したい

  16. AppSync ② リゾルバーによる制御を加えた 30分後にレコードを消したい 呼び出し元クライアントの CognitoユーザーID設定や、 入力値のバリデーションなんかもここにかけます！

  17. AppSync ② リゾルバーによる制御を加えた https://qiita.com/w2or3w/items/ea217a404becfd0da87f

  18. AppSync ③ データソースを追加して呼び分けた https://aws.amazon.com/jp/appsync/

  19. AppSync ③ データソースを追加して呼び分けた モザイク処理のLambdaを 実行するために API Gatewayを利用 ↓

  20. AppSync ③ データソースを追加して呼び分けた モザイク処理のLambdaを 実行するために API Gatewayを利用 ↓ AppSyncへ Lambdaを呼び出す

    データソースを追加した

  21. AppSync ③ データソースを追加して呼び分けた https://qiita.com/w2or3w/items/54b5c84bed05d614629e

  22. サーバーレスWebアプリ制作で学ぶ AppSync Have a nice AppSync life!

  23. Thank You !!