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
48
第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
第155回 雲勉 サーバレスアーキテクチャを 用いたコスト重視 AI サービス
iret
0
45
第154回 雲勉 AWS Codeシリーズ盛り上げ隊 ~ Codeシリーズは砕けない ~
iret
0
43
第153回 雲勉 トラシューが秒で終わる新機能 Amazon Q Developer operational investigations
iret
0
56
第151回 雲勉 プロジェクトのドキュメントにおける課題をAmazon Bedrockで解決してみる
iret
0
62
第152回 雲勉 シームレスなマルチリージョンへの移行と検討 ~Amazon EKSとAWS Global Acceleratorを使用した環境〜
iret
0
60
第149回 雲勉 AWS ベストプラクティスの最新と実際 AWS Well-Architected
iret
0
93
第148回 雲勉 Web アプリケーションセキュリティ
iret
0
56
第147回 雲勉 Amazon CloudWatchをウォッチ!
iret
0
69
第146回 雲勉 BLEAを眺めてCDKの書き方について学ぶ
iret
1
77
Other Decks in Technology
See All in Technology
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
2
200
Linuxのブートプロセス
sat
PRO
6
100
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
8
1.1k
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
180
【Forkwell】「正しく」失敗できるチームを作る──現場のリーダーのための恐怖と不安を乗り越える技術 - FL#83 / A team that can fail correctly by forkwell
i35_267
2
150
OSSの実装を参考にBedrockエージェントを作る
moritalous
2
130
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
330
Охота на косуль у древних
ashapiro
0
140
User Story Mapping + Inclusive Team
kawaguti
PRO
3
570
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
180
アジリティを高めるテストマネジメント #QiitaQualityForward
makky_tyuyan
1
520
ライフステージの変化を乗り越える 探索型のキャリア選択
tenshoku_draft
2
320
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1369
200k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
We Have a Design System, Now What?
morganepeng
51
7.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Become a Pro
speakerdeck
PRO
26
5.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
Documentation Writing (for coders)
carmenintech
69
4.6k
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