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
57
第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
第158回 雲勉 AWS CDK 入門 ~ プログラミング言語で書くインフラ Python 編 ~
iret
0
30
第157回 雲勉 AWSインフラ監視をNew Relicで行う際の個人的Tips
iret
0
36
第156回 雲勉 AWS on Windows入門
iret
0
70
第155回 雲勉 サーバレスアーキテクチャを 用いたコスト重視 AI サービス
iret
0
51
第154回 雲勉 AWS Codeシリーズ盛り上げ隊 ~ Codeシリーズは砕けない ~
iret
0
54
第153回 雲勉 トラシューが秒で終わる新機能 Amazon Q Developer operational investigations
iret
0
65
第151回 雲勉 プロジェクトのドキュメントにおける課題をAmazon Bedrockで解決してみる
iret
0
71
第152回 雲勉 シームレスなマルチリージョンへの移行と検討 ~Amazon EKSとAWS Global Acceleratorを使用した環境〜
iret
0
77
第149回 雲勉 AWS ベストプラクティスの最新と実際 AWS Well-Architected
iret
0
97
Other Decks in Technology
See All in Technology
モジュラーモノリスでスケーラブルなシステムを作る - BASE のリアーキテクチャのいま
panda_program
7
2k
IAMのマニアックな話 2025 ~40分バージョン ~
nrinetcom
PRO
8
890
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
初めてのPostgreSQLメジャーバージョンアップ
kkato1
0
390
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
3
1.3k
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
240
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
140
パスキーでのログインを 実装してみよう!
hibiki_cube
0
620
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
410
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
140
Engineering Managementのグローバルトレンド #emoasis / Engineering Management Global Trend
kyonmm
PRO
6
980
20250326_管理ツールの権限管理で改善したこと
sasata299
1
360
Featured
See All Featured
Optimizing for Happiness
mojombo
377
70k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why Our Code Smells
bkeepers
PRO
336
57k
Designing for Performance
lara
606
69k
Bash Introduction
62gerente
611
210k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Facilitating Awesome Meetings
lara
53
6.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
A Philosophy of Restraint
colly
203
16k
Designing for humans not robots
tammielis
250
25k
Faster Mobile Websites
deanohume
306
31k
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