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

Transcript

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

   View Slide

2. 自己紹介
   2or3 (ツカサ) 2(ツー) or(~か) 3(サン)
   アプリケーションエンジニア です。
   最近サーバーレスWebアプリ制作にお熱です！
   去年7月頃からJAWS UG浜松に
   顔を出しているモノです。
   よろしくおねがいします。
   もうすぐ
   10ヶ月！
   

   View Slide

3. 自己紹介
   最初の2,3ヶ月
   ぼんやり参加
   　↓
   9月頃
   何かやらねば
   →
   〜10, 11, 12月
   ダッシュで制作
   ＆進捗報告at勉強会
   　↓
   みなぎってきてる
   (37才)
   

   View Slide

4. サーバーレスWebアプリ
   『Mosaic』とは？
   ● JAWS UG浜松で発表するために制作した
   ● AWSを活用したサーバーレスWebアプリ
   ● 顔・文字を抽出し、選んでモザイクをかける
   ● 絶賛学習 & 拡張中
   https://mosaic.w2or3w.com
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. AppSyncとは？
   ● 単一のエンドポイントを持つWebAPI
   ● AWSのマネージドサービス
   ● GraphQLでアクセス
   ● MQTT over WebSocket
   ● CRUDはもちろん、リアルタイム同期の機能を提供
   ● きめ細かなアクセスコントロール
   ● 様々なデータソースを操作可能
   ● オフラインでのデータ同期・キャッシング
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. Thank You !!
    

    View Slide