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

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

w2or3w
April 24, 2020
160

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

w2or3w

April 24, 2020
Tweet

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