第150回 雲勉 AWS AppSyncではじめるGraphQL体験

下記、勉強会での資料です。
https://youtu.be/esZjRHXupLU

1. 第150回 雲勉 AWS AppSyncではじめる GraphQL体験
2. アジェンダ 2 0. 自己紹介 1. AWS AppSyncとは 2. GraphQLとは 3. GraphQLを試してみる 4. AWS Amplifyとの連携でアプリ開発 5. まとめ
3. ０．講師自己紹介 3 ◼ 名前 有本 史紀（ありもとふみのり） • クラウドインテグレーション事業部 ソリューション開発セクション • 過去３社ほどWebエンジニアとして活動 • 2020年5月アイレット 入社 • 主にLAMP環境でのアプリケーション開発に従事、アイレットではそれに加え てLambdaやECSでのアプリケーション開発、Redshiftを使ったDWH開発な どを行なっている • 過去に「AWS App Runner に Laravel をデプロイして LINEBot を作ってみ よう」という資料も公開しているのでそちらもご覧下さい。
4. 1. AWS AppSyncとは 4
5. 1． AWS AppSyncとは 5 ◼ 概要 • AWS AppSync は、サーバーレスの GraphQL および Pub/Sub API を作成し、単一のエ ンドポイントを通じて安全にデータの照会、更新、公開を行うことで、アプリケーション の開発を簡素化します。 • https://aws.amazon.com/jp/appsync/
6. 1． AWS AppSyncとは 6 ◼ 仕組み AWS AppSync は、主に４つの要素で構成されている。 クエリ アプリ側からコールされるGraphQLなどのこと スキーマ データの定義 リゾルバ リクエストに対し実際にデータ操作を行う部分 リソース データベースのこと。DynamoDB以外にもAurora なども指定可能
7. 1． AWS AppSyncとは 7 ◼ 仕組み クエリ スキーマ リゾルバ リソース
8. 2. GraphQLとは 8
9. 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 イベント監視（プッシュ通知などに使用）
10. 3. GraphQLを試してみる 10
11. 3． GraphQLを試してみる 11 ◼ AWS AppSyncでのAPIの作成方法 • AWSのコンソール画面から作成する • AWS Amplifyを使用して作成する（後述）
12. 3． GraphQLを試してみる 12 ◼ コンソール画面から作成するには
13. 3． GraphQLを試してみる 13 ◼ コンソール画面から作成するには
14. 3． GraphQLを試してみる 14 ◼ コンソール画面から作成するには 「DynamoDBテーブルを使用する タイプを今すぐ作成」を選択
15. 3． GraphQLを試してみる 15 ◼ コンソール画面から作成するには スキーマの定義が 作成されている
16. 3． GraphQLを試してみる 16 ◼ コンソール画面から作成するには ベーシックなqueryやmutations が作成されていてすぐに実行できる
17. 3． GraphQLを試してみる 17 ◼ コンソール画面から試してみる（query） 今回はAmplifyを使って作成できるAPIのデフォルトの「Todoスキーマ」を利用しました。 データ一覧を取得する query MyQuery { listTodos(limit:10) { items { description name createdAt } } }
18. 3． GraphQLを試してみる 18 ◼ コンソール画面から試してみる(query) データ取得できている
19. 3． GraphQLを試してみる 19 ◼ コンソール画面から試してみる（Mutation） データを作成する mutation MyMutation { createTodo( input: { description: "雲勉のテストデータです。" name: "雲勉" }) { id name } }
20. 3． GraphQLを試してみる 20 ◼ コンソール画面から試してみる(Mutation)
21. 3． GraphQLを試してみる 21 ◼ コンソール画面から試してみる(Mutation) DynamoDBに データが登録されている
22. 3． GraphQLを試してみる 22 ◼ コンソール画面から試してみる（Mutation） データを更新する mutation UpdateMutetion { updateTodo( input: { id: "c7429136-dfdd-4db3-a1ed-efd6a60b0210", description: "テストです。更新後のデータです。よろしくお願いします。" } ) { id, description } }
23. 3． GraphQLを試してみる 23 ◼ コンソール画面から試してみる(Mutation)
24. 3． GraphQLを試してみる 24 ◼ コンソール画面から試してみる(Mutation) DynamoDBで データが更新されている
25. 3． GraphQLを試してみる 25 ◼ コンソール画面から試してみる（Mutation） データを削除する mutation DeleteMutetion { deleteTodo( input: { id: "c7429136-dfdd-4db3-a1ed-efd6a60b0210" } ) { id, description } }
26. 3． GraphQLを試してみる 26 ◼ コンソール画面から試してみる(Mutation)
27. 3． GraphQLを試してみる 27 ◼ コンソール画面から試してみる(Mutation) 削除前
28. 3． GraphQLを試してみる 28 ◼ コンソール画面から試してみる(Mutation) 削除 されている
29. 3． GraphQLを試してみる 29 ◼ コンソール画面から試してみる（Subscription） AppSyncのSubscriptionは、ミューテーションに対する応答として呼び出される スキーマのミューテーションを指定すると、AppSyncでリアルタイムにSubscriptionを起動させることがで きる subscription MySubscription { onCreateTodo { id name description } }
31. 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! }
32. 3． GraphQLを試してみる 32 ◼ データ項目追加する場合
33. 3． GraphQLを試してみる 33 ◼ データ項目追加する場合 項目が追加 されている
34. 4. AWS Amplifyとは 34
35. 4． AWS Amplifyとは 35 ◼ 概要 • AWSのクラウドサービス上に対話形式でAPI作成できる便利な機能 • AppSyncをサポートしてくれている • Cognitoなどの認証周りも設定できる
36. 4． AWS Amplifyとは 36 ◼ amplify configre コマンド
37. 4． AWS Amplifyとは 37 ◼ amplify init コマンド
38. 4． AWS Amplifyとは 38 ◼ AmplifyとAppSyncで簡易チャットアプリ作ってみた GraphQLで連携
39. 4． AWS Amplifyとは 39 ◼ Cognitoの設定 amplify auth add amplify auth push
40. 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がサポートされている！
41. 4． AWS Amplifyとは 41 private async getMessages() { const gqlParams: string = ` query list { listChatMessages(limit: 1000) { items { ${chatMassageItems} } } } `; ◼ queryの実装例
42. 4． AWS Amplifyとは 42 const gqlParams: string = ` subscription subCreateChatMessage { onCreateChatMessage { ${chatMassageItems} } } ◼ subscrictionの実装例
44. 5. まとめ 44
45. 5. まとめ 45 ◼ メリット Amplifyを使うことで短時間でバックエンドのAPIをデプロイできる。 特にsubscriptionで手軽にプッシュ通知を体験できるのはすばらしい。 チャットアプリ、Web上のリアルタイム通知などに利活用できそう。 ◼ デメリット GraphQLの学習コストがかかる リゾルバ部分をカスタマイズしようとしていくとVTL等の知識が必要になりハードルが上がる 印象
46. ありがとうございました。 46