Slide 1

Slide 1 text

AppSync入門! GraphQL APIを 作ってみた! 2023/10/25 JAWS UG 朝会 APCommunications 升谷直緒

Slide 2

Slide 2 text

Self Introduction 所属 株式会社エーピーコミュニケーションズ @apc_tweet

Slide 3

Slide 3 text

Self Introduction 株式会社 エーピーコミュニケーションズ システム基盤サービス事業本部 クラウド事業部 IaC技術推進部 升谷直緒 ● 2020年新卒入社 ● SIerとして4年目 ● AWSは使い始めて3年目 ● CI/CDの導入支援 ● Webアプリの改善運用 ● リモートワーク @masuchoku

Slide 4

Slide 4 text

JAWSに参加してみて 今年の3月ごろから月1ペースでJAWSに参加、LTは4回目です。 社外の人と関われる貴重な機会、 普段使わないAWSサービスに触れる、 アウトプットと向き合うことができる、 初心者にすごく優しいコミュニティ …な点がいいなと感じております!

Slide 5

Slide 5 text

本日は、、 GraphQL APIはこんなに簡単にAWSで作れるのか!? をお伝えしたいです! ぜひ今日お時間があれば作ってみてください...!

Slide 6

Slide 6 text

App Sync とは サーバレスにGraphQLを使用し、データベースに接続で きるサービス。 1 つの GraphQL API エンドポイントから 1 つ以上の データソースのデータにアクセスする。

Slide 7

Slide 7 text

クエリ言語とスキーマ言語で構成された Web APIの規格。 サーバーにデータを問い合わせることができる。 RESTの場合、必要のないデータまで取得してしまうため、大量 のデータを処理する必要があったため、 GraphQLが開発され た。 Facebook社によって2012年に開発がスタートし、 2015年にオー プンソース化された。 GraphQL とは

Slide 8

Slide 8 text

REST と GraphQL REST GraphQL クエリ { user(id: 1) { name } } レスポンス { "data": { "user": { "name": "Nao Masuya" } } } GETリクエスト GET /users レスポンス [ {"id": 1, "name": "Nao Masuya"}, {"id": 2, "name": "Simba"} ] 「単一のURLエンドポイント」にク エリを行えば、クエリに応じた データを返すことができる。

Slide 9

Slide 9 text

RESTを使う User API Gateway Lambda RDS ドラキュラはこういうユーザー ● アプリケーションの規模が小さく、データがそれ ほど複雑ではない ● すべてのクライアントが同じように使用するデー タと操作がある ● 複雑なデータクエリの必要がない https://aws.amazon.com/jp/compare/the-difference-between-graphql-and-rest/

Slide 10

Slide 10 text

DynamoDBの 参照・削除・更新がしたい クエリを書くだけ GraphQLを使う User App Sync DynamoDB ゾンビはこういうユーザー ● 帯域幅に制限があり、リクエストとレスポンスの数を最小限に抑えたい ● 複数のデータソースがあり、それらを 1 つのエンドポイントにまとめたい ● クライアントのリクエストが大きく異なり、求められるレスポンスも大きく異なる 
 https://aws.amazon.com/jp/compare/the-difference-between-graphql-and-rest/

Slide 11

Slide 11 text

AppSyncの実装はとても簡単 DynamoDBを選択 API名を決める クエリの要素を入力

Slide 12

Slide 12 text

クエリを実行 DynamoDBで確認

Slide 13

Slide 13 text

認証方法 API_KEY AWS_LAMBDA AWS_IAM OPENID_CONNECT AMAZON_COGNITO_USER_POOLS から選べます!

Slide 14

Slide 14 text

IAMを使った認証方法 IAM Policyを作成してUserに紐付ける { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "appsync:GraphQL" ], "Resource": [ "作成したAPIのarn:aws/*" // やりたい放題 "作成したAPIのarn:aws/types/Query/*” // 取得 "作成したAPIのarn:aws/types/Mutation/*” // 挿入更新削除 "作成したAPIのarn:aws/types/Subscription/*” // 監視 ] } ] }

Slide 15

Slide 15 text

CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik Thank you! AppSync,GraphQLの簡単な紹介でした! Happy Halloween!

Slide 16

Slide 16 text

Resources ● GraphQLとRESTの比較 ○ https://hasura.io/learn/ja/graphql/intro-graphql/graphql-vs-rest/ ● AWS AppSync の概要 ○ https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/what-is-appsync.html ● GraphQLとは?RESTとの違いや導入事例を紹介 ○ https://udemy.benesse.co.jp/development/system/graphql.html ● GraphQL と REST の違いは? ○ https://aws.amazon.com/jp/compare/the-difference-between-graphql-and-rest/ ● 承認と認証 ○ https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/security-authz.html