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

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

w2or3w
April 24, 2020
0
120

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

w2or3w

April 24, 2020
Tweet

More Decks by w2or3w

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

Featured

See All Featured
4 Signs Your Business is Dying
shpigford
171
20k
Web Components: a chance to create the future
zenorocha
304
40k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
A better future with KSS
kneath
230
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
Product Roadmaps are Hard
iamctodd
38
7.7k
Happy Clients
brianwarren
90
5.8k
A Philosophy of Restraint
colly
193
15k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
A designer walks into a library…
pauljervisheath
199
16k

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 !!