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

サーバーレス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 !!

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

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

w2or3w

More Decks by w2or3w

Featured

Transcript

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

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

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

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

まずはデモします。 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

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認証

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