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
41
第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
第154回 雲勉 AWS Codeシリーズ盛り上げ隊 ~ Codeシリーズは砕けない ~
iret
0
34
第153回 雲勉 トラシューが秒で終わる新機能 Amazon Q Developer operational investigations
iret
0
50
第151回 雲勉 プロジェクトのドキュメントにおける課題をAmazon Bedrockで解決してみる
iret
0
58
第152回 雲勉 シームレスなマルチリージョンへの移行と検討 ~Amazon EKSとAWS Global Acceleratorを使用した環境〜
iret
0
52
第149回 雲勉 AWS ベストプラクティスの最新と実際 AWS Well-Architected
iret
0
84
第148回 雲勉 Web アプリケーションセキュリティ
iret
0
49
第147回 雲勉 Amazon CloudWatchをウォッチ!
iret
0
64
第146回 雲勉 BLEAを眺めてCDKの書き方について学ぶ
iret
1
70
第145回 雲勉 Amazon ECSでサービス間通信する方法を調べてみよう
iret
0
73
Other Decks in Technology
See All in Technology
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
250
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
130
RSNA2024振り返り
nanachi
0
620
2.5Dモデルのすべて
yu4u
2
930
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
240
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
260
Share my, our lessons from the road to re:Invent
naospon
0
100
表現を育てる
kiyou77
1
220
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
120
ソフトウェアエンジニアと仕事するときに知っておいたほうが良いこと / Key points for working with software engineers
pinkumohikan
1
130
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
140
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Embracing the Ebb and Flow
colly
84
4.6k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Thoughts on Productivity
jonyablonski
69
4.5k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Building Applications with DynamoDB
mza
93
6.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Designing for humans not robots
tammielis
250
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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