Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第150回 雲勉 AWS AppSyncではじめるGraphQL体験
Search
iret.kumoben
January 17, 2025
Technology
0
66
第150回 雲勉 AWS AppSyncではじめるGraphQL体験
下記、勉強会での資料です。
https://youtu.be/esZjRHXupLU
iret.kumoben
January 17, 2025
Tweet
Share
More Decks by iret.kumoben
See All by iret.kumoben
第159回 雲勉 Amazon Bedrock でブラウザを操作する AI エージェントを作ってみた
iret
0
51
第158回 雲勉 AWS CDK 入門 ~ プログラミング言語で書くインフラ Python 編 ~
iret
0
42
第157回 雲勉 AWSインフラ監視をNew Relicで行う際の個人的Tips
iret
0
41
第156回 雲勉 AWS on Windows入門
iret
0
77
第155回 雲勉 サーバレスアーキテクチャを 用いたコスト重視 AI サービス
iret
0
54
第154回 雲勉 AWS Codeシリーズ盛り上げ隊 ~ Codeシリーズは砕けない ~
iret
0
57
第153回 雲勉 トラシューが秒で終わる新機能 Amazon Q Developer operational investigations
iret
0
67
第151回 雲勉 プロジェクトのドキュメントにおける課題をAmazon Bedrockで解決してみる
iret
0
77
第152回 雲勉 シームレスなマルチリージョンへの移行と検討 ~Amazon EKSとAWS Global Acceleratorを使用した環境〜
iret
0
87
Other Decks in Technology
See All in Technology
AWSで作るセキュアな認証基盤with OAuth mTLS / Secure Authentication Infrastructure with OAuth mTLS on AWS
kaminashi
0
180
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
150
アセスメントで紐解く、10Xのデータマネジメントの軌跡
10xinc
1
440
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
6
6.2k
Amazon CloudWatch Application Signals ではじめるバーンレートアラーム / Burn rate alarm with Amazon CloudWatch Application Signals
ymotongpoo
5
530
AWSLambdaMCPServerを使ってツールとMCPサーバを分離する
tkikuchi
1
3k
PicoRabbit: a Tiny Presentation Device Powered by Ruby
harukasan
PRO
2
240
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
180
Стильный код: натуральный поиск редких атрибутов по картинке. Юлия Антохина, Data Scientist, Lamoda Tech
lamodatech
0
740
Road to Go Gem #rubykaigi
sue445
0
790
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
180
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
760
Designing Experiences People Love
moore
141
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Navigating Team Friction
lara
184
15k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
The Language of Interfaces
destraynor
157
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
第150回 雲勉 AWS AppSyncではじめる GraphQL体験
アジェンダ 2 0. 自己紹介 1. AWS AppSyncとは 2. GraphQLとは 3.
GraphQLを試してみる 4. AWS Amplifyとの連携でアプリ開発 5. まとめ
0.講師自己紹介 3 ◼ 名前 有本 史紀(ありもとふみのり) • クラウドインテグレーション事業部 ソリューション開発セクション •
過去3社ほどWebエンジニアとして活動 • 2020年5月アイレット 入社 • 主にLAMP環境でのアプリケーション開発に従事、アイレットではそれに加え てLambdaやECSでのアプリケーション開発、Redshiftを使ったDWH開発な どを行なっている • 過去に「AWS App Runner に Laravel をデプロイして LINEBot を作ってみ よう」という資料も公開しているのでそちらもご覧下さい。
1. AWS AppSyncとは 4
1. AWS AppSyncとは 5 ◼ 概要 • AWS AppSync は、サーバーレスの
GraphQL および Pub/Sub API を作成し、単一のエ ンドポイントを通じて安全にデータの照会、更新、公開を行うことで、アプリケーション の開発を簡素化します。 • https://aws.amazon.com/jp/appsync/
1. AWS AppSyncとは 6 ◼ 仕組み AWS AppSync は、主に4つの要素で構成されている。 クエリ
アプリ側からコールされるGraphQLなどのこと スキーマ データの定義 リゾルバ リクエストに対し実際にデータ操作を行う部分 リソース データベースのこと。DynamoDB以外にもAurora なども指定可能
1. AWS AppSyncとは 7 ◼ 仕組み クエリ スキーマ リゾルバ リソース
2. GraphQLとは 8
2.GraphQLとは 9 ◼ 概要 https://graphql.org/ • GraphQLとはAPI向けの言語規格です。 一般的にGraphQLはHTTP上で使用され、その重 要なコンセプトは、異なるリソースに対して異なるHTTPのエンドポイントを充てるのでは なく、
HTTPエンドポイントに「クエリ」を POST する点です。 • REST API は、 1URLに対し1つのAPIや情報を提供できるのに対し、GraphQLは単一のエ ンドポイントに欲しいデータをクエリとして発行するとObject形式でレスポンスを得るこ とができます。 ◼ Query、Mutation、Subscriptionがある Query データ取得(REST APIのGET) Mutation データ追加、更新、削除を担当 (REST APIのPOST, PATCH, DELETE) Subscription イベント監視(プッシュ通知などに使用)
3. GraphQLを試してみる 10
3. GraphQLを試してみる 11 ◼ AWS AppSyncでのAPIの作成方法 • AWSのコンソール画面から作成する • AWS
Amplifyを使用して作成する(後述)
3. GraphQLを試してみる 12 ◼ コンソール画面から作成するには
3. GraphQLを試してみる 13 ◼ コンソール画面から作成するには
3. GraphQLを試してみる 14 ◼ コンソール画面から作成するには 「DynamoDBテーブルを使用する タイプを今すぐ作成」を選択
3. GraphQLを試してみる 15 ◼ コンソール画面から作成するには スキーマの定義が 作成されている
3. GraphQLを試してみる 16 ◼ コンソール画面から作成するには ベーシックなqueryやmutations が作成されていてすぐに実行できる
3. GraphQLを試してみる 17 ◼ コンソール画面から試してみる(query) 今回はAmplifyを使って作成できるAPIのデフォルトの「Todoスキーマ」を利用しました。 データ一覧を取得する query MyQuery {
listTodos(limit:10) { items { description name createdAt } } }
3. GraphQLを試してみる 18 ◼ コンソール画面から試してみる(query) データ取得できている
3. GraphQLを試してみる 19 ◼ コンソール画面から試してみる(Mutation) データを作成する mutation MyMutation { createTodo(
input: { description: "雲勉のテストデータです。" name: "雲勉" }) { id name } }
3. GraphQLを試してみる 20 ◼ コンソール画面から試してみる(Mutation)
3. GraphQLを試してみる 21 ◼ コンソール画面から試してみる(Mutation) DynamoDBに データが登録されている
3. GraphQLを試してみる 22 ◼ コンソール画面から試してみる(Mutation) データを更新する mutation UpdateMutetion { updateTodo(
input: { id: "c7429136-dfdd-4db3-a1ed-efd6a60b0210", description: "テストです。更新後のデータです。よろしくお願いします。" } ) { id, description } }
3. GraphQLを試してみる 23 ◼ コンソール画面から試してみる(Mutation)
3. GraphQLを試してみる 24 ◼ コンソール画面から試してみる(Mutation) DynamoDBで データが更新されている
3. GraphQLを試してみる 25 ◼ コンソール画面から試してみる(Mutation) データを削除する mutation DeleteMutetion { deleteTodo(
input: { id: "c7429136-dfdd-4db3-a1ed-efd6a60b0210" } ) { id, description } }
3. GraphQLを試してみる 26 ◼ コンソール画面から試してみる(Mutation)
3. GraphQLを試してみる 27 ◼ コンソール画面から試してみる(Mutation) 削除前
3. GraphQLを試してみる 28 ◼ コンソール画面から試してみる(Mutation) 削除 されている
3. GraphQLを試してみる 29 ◼ コンソール画面から試してみる(Subscription) AppSyncのSubscriptionは、ミューテーションに対する応答として呼び出される スキーマのミューテーションを指定すると、AppSyncでリアルタイムにSubscriptionを起動させることがで きる subscription MySubscription
{ onCreateTodo { id name description } }
30
3. GraphQLを試してみる 31 ◼ データ項目追加する場合 スキーマを調整 input CreateTodoInput { id:
ID name: String! description: String user: String } type Todo { id: ID! name: String! description: String user: String createdAt: AWSDateTime! updatedAt: AWSDateTime! }
3. GraphQLを試してみる 32 ◼ データ項目追加する場合
3. GraphQLを試してみる 33 ◼ データ項目追加する場合 項目が追加 されている
4. AWS Amplifyとは 34
4. AWS Amplifyとは 35 ◼ 概要 • AWSのクラウドサービス上に対話形式でAPI作成できる便利な機能 • AppSyncをサポートしてくれている
• Cognitoなどの認証周りも設定できる
4. AWS Amplifyとは 36 ◼ amplify configre コマンド
4. AWS Amplifyとは 37 ◼ amplify init コマンド
4. AWS Amplifyとは 38 ◼ AmplifyとAppSyncで簡易チャットアプリ作ってみた GraphQLで連携
4. AWS Amplifyとは 39 ◼ Cognitoの設定 amplify auth add amplify
auth push
4. AWS Amplifyとは 40 const gqlParams: string = ` mutation
put { createChatMessage( input: { user_id: "${VueStore.state.displayName}", message_body: "${this.messageBody}", } ) { ${chatMassageItems} } } ◼ mutationの実装例 ◼ JSのaws-amplifyライブラリでGraphQLがサポートされている!
4. AWS Amplifyとは 41 private async getMessages() { const gqlParams:
string = ` query list { listChatMessages(limit: 1000) { items { ${chatMassageItems} } } } `; ◼ queryの実装例
4. AWS Amplifyとは 42 const gqlParams: string = ` subscription
subCreateChatMessage { onCreateChatMessage { ${chatMassageItems} } } ◼ subscrictionの実装例
43
5. まとめ 44
5. まとめ 45 ◼ メリット Amplifyを使うことで短時間でバックエンドのAPIをデプロイできる。 特にsubscriptionで手軽にプッシュ通知を体験できるのはすばらしい。 チャットアプリ、Web上のリアルタイム通知などに利活用できそう。 ◼ デメリット
GraphQLの学習コストがかかる リゾルバ部分をカスタマイズしようとしていくとVTL等の知識が必要になりハードルが上がる 印象
ありがとうございました。 46