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
100
第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
第174回 雲勉 Google Agentspace × ADK Vertex AI Agent Engineにデプロイしたエージェントを呼び出す
iret
0
21
第173回 雲勉 ノーコードで生成 AI アプリを構築!Google Cloud AI Applications(旧 Vertex AI Agent Builder)入門
iret
0
48
第170回 雲勉 Lyria が切り拓く音楽制作の未来
iret
1
27
第169回 雲勉 AWS WAF 構築 RTA
iret
0
35
第168回 雲勉 JITNAの使い方とハマったポイントについて語る回
iret
0
39
第167回 雲勉 エージェント開発を加速する Agent Development Kit 入門
iret
1
52
第166回 雲勉 コードを読んで理解する AWS Amplify Gen2 Backend
iret
0
45
第165回 雲勉 Google Agentspace について
iret
0
65
第164回 雲勉 Agent Development Kit と MCP Toolbox for Databases で MCP 連携してみた
iret
1
130
Other Decks in Technology
See All in Technology
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
300
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3k
研究開発と製品開発、両利きのロボティクス
youtalk
1
520
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
210
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
140
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
290
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
260
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
370
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
750
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
110
Featured
See All Featured
Balancing Empowerment & Direction
lara
3
620
A Modern Web Designer's Workflow
chriscoyier
696
190k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fireside Chat
paigeccino
39
3.6k
Faster Mobile Websites
deanohume
309
31k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
The Invisible Side of Design
smashingmag
301
51k
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