AWS Expert Online appsyncを使ったServerlessアーキテクチャ

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
Specialist Solutions Architect Tsukagoshi Keisuke
2019/07/04
appsyncを使った
Serverlessアーキテクチャ
AWS Expert Online

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
Who am I ?
塚越啓介（つかごしけいすけ）
Solution Architect Modern App Development
@Amazon Web Services Japan
Mobile / DevOps / Serverless / Microservices
Background : アプリケーション開発
Webサービスの開発・運用
リアクティブプログラミング
Agile開発のコンサルティング
好きなサービス： AWS AppSync
好きなトレーニング：懸垂
ベンチプレス
80kg
スクワット
90kg
デッドリフト
130kg

AppSync とは

AppSync とは
• マネージド GraphQL gateway
• GraphQL schema definition language (SDL) による API 定義
• AWS リソースをデータソースとして利用
• リアルタイムデータブローカー
• データの更新情報をサブスクライブ
• MQTT over WebSocketでのリアルタイムデータの送信

AWS AppSync 概要
Http
Query / mutation
subscription

GraphQL とは
• GraphQL、はAPI 用のクエリ言語であり、TypeSystem を使用してクエリ
を実行するためのサーバー側のランタイムです。
• GraphQLは、クライアントがサーバーからデータを取得、
変更、購読できるようにするためのデータ言語です。
{
"id": "1",
"name": "Get Milk",
" priority": "1"
},
{
"id": “2",
"name": “Go to gym",
"priority": “5"
},…
type Query {
getTodos: [Todo]
}
type Todo {
id: ID!
name: String
description: String
priority: Int
duedate: String
}
query {
getTodos {
id
name
priority
}
}

なぜ GraphQL なのか
• REST API の開発者、利用者間の課題
• API 仕様のドキュメント管理/ 仕様の理解が大変
• API のドキュメントと実装がずれててケンカ
• クライアント開発者からの不満
• １ページを表示するのに何個も API を叩かなければならない
• せっかくイベントドリブンに作っていてもサーバーとの接続は結局
Request / Responseの形がのこる

なぜGraphQLが注目されているか – GraphQL の特徴-
A) 型指定されたスキーマ
• APIドキュメントを手動で記述する必要がなくなり、APIを定義し
たスキーマをベースに自動生成できる
B) クライアントからのレスポンス形式の指定
• クライアントからレスポンスの形式を指定できる。これにより
オーバーフェッチ、アンダーフェッチがなくなる
C) サブスクリプションを利用したリアルタイム処理
• クライアントはデータをサブスクライブすることで、イベントド
リブンに処理を実装することができる

A) スキーマ定義
type Todo {
id: ID!
name: String
description: String
status: TodoStatus
}
type Query {
getTodos: [Todo]
}
enum TodoStatus {
done
pending
}
スカラー型、オブジェクト型、
列挙型などを利用可能
Not Nullは感嘆符で表現
ID!
リストは角カッコで表現
[String!]

A) ドキュメントを自動生成

A) Queryの実行環境

B) クライアントがレスポンスの形式を指定
{
"id": "1",
"name": "Get Milk",
" priority": "1"
},
{
"id": “2",
"name": “Go to gym",
"priority": “5"
},…
type Query {
getTodos: [Todo]
}
type Todo {
id: ID!
name: String
description: String
priority: Int
duedate: String
}
query {
getTodos {
id
name
priority
}
}
アプリのスキーマと
モデルデータ
クライアントが必要
なものだけをリクエ
スト
リクエストしたデー
タだけが返される

B) クリーンなインターフェース
オープンで宣言的なデータ取得の仕様
!= Graph database
NoSQL, Relational, HTTP, etc.
従来のデータフェッチ GraphQL
/posts
/postInfo
/postJustTitle
/postsByAuthor
/postNameStartsWithX
/commentsOnPost

C) GraphQL Subscription
ほぼリアルタイムでのデータを購読
Mutationをトリガーにしたイベントベースモード
- スケーラブルによくあるユースケースを想定して設計
mutation addPost( id:123
title: "New post!"
author: "Nadia"){
id
title
author
}
data: [{
id:123,
title:"New Post!"
author:"Nadia"
}]

type Subscription {
addedPost: Post
@aws_subscribe(mutations: ["addPost"])
deletedPost: Post
@aws_subscribe(mutations: ["deletePost"])
}
type Mutation {
addPost(id: ID! author: String! title:
String content: String): Post!
deletePost(id: ID!): Post!
}
subscription NewPostSub {
addedPost {
__typename
version
title
content
author
url
}
}
C) スキーマ定義

C) GraphQL Subscription ハンドシェイク
Subscription NewPostSub {
addedPost{…}
}
WebSocket URL and Connection Payload
Secure Websocket Connection (wss://)

const AllPostsWithData = compose(
graphql(AllPostsQuery, { options: { fetchPolicy: 'cache-and-network‘ },
props: (props) => ({
posts: props.data.posts,
subscribeToNewPosts: params => {
props.data.subscribeToMore({
document: NewPostsSubscription,
updateQuery: (prev, { subscriptionData: { newPost } }) => ({
...prev,
posts: [newPost, ...prev.posts.filter(post => post.id !== newPost.id)]
})
});
});
…//more code
C) Subscription Clientからの接続

GraphQL の動向
• GraphQL Foundation が設立
• Facebook 傘下から Linux 傘下に
• GraphQL の Design Pattern が徐々に公開
• Schema Design Pattern
• Data Design Pattern
• Testing Practice
• CI / CD Practice

おすすめ資料
• GraphQL API の設計 Tips GraphQL の設計をやるなら必読
• https://www.slideshare.net/AmazonWebServices/ten-tips-and-tricks-
for-improving-your-graphql-api-with-aws-appsync-mob401-aws-
reinvent-2018
• https://www.youtube.com/watch?v=CwLB0BRwIqE
• 「AppSync Mob401」で検索

AppSync 設計の勘所

バージョン管理
• REST とは別の思想で Versionless API を推奨している
• GraphQL は明示的に要求されたデータのみを返すため、影響を抑えつつ新
しいタイプやフィールドを追加可能
• GraphQL はスキーマの継続的な進化のためのツールを提供することにより、
バージョン管理を避けるという思想
type ExampleType {
newField: String
oldField: String @deprecated(reason: "Use `newField`.")
}

Nullability
• non-null / null をうまく利用した設計がおすすめ
• Not-null推奨のケース
• フィールド引数において、引数がないと意味をなさないようなケー
はNon-null (例 : getRestaurantById(id: ID!) )
• オブジェクトの存在が保証されるフィールドはNon-null
• フロントエンドコードを簡略化する
• Null を許容するのが推奨のケース
• 新規に追加したフィールド引数
• 今までなかったフィールド引数を必須にしてしまうと、後方互換が取れ
なくなってしまう可能性があるため Nullを許容する
• 3rd Party のサービスと連携するようなケース
• Lookup に失敗しうる場合はnull を許可しておく

Authorization
type Query {
posts:[Post!]!
@aws_auth(cognito_groups: ["Bloggers", "Readers"])
}
type Mutation {
addPost(id:ID!, title:String!):Post!
@aws_auth(cognito_groups: ["Bloggers"])
}
Cognito User Group と合わせて使うことで簡単にアクセス制御が可能
Multi Auth によってEndpointごとに認証タイプを変更可能

事例

サンプルアプリケーション
• AWS AppSync GraphQL Photo Sample
• https://github.com/aws-samples/aws-amplify-graphql
• GraphQL starter application
• https://github.com/aws-samples/aws-mobile-appsync-events-starter-
react
• GraphQL starter progressive web application
• https://github.com/aws-samples/aws-mobile-appsync-chat-starter-
angular

まとめ
A) 型指定されたスキーマ
• APIドキュメントを手動で記述する必要がなくなり、APIを定義し
たスキーマをベースに自動生成できる
B) クライアントからのレスポンス形式の指定
• クライアントからレスポンスの形式を指定できる。これにより
オーバーフェッチ、アンダーフェッチがなくなる
C) サブスクリプションを利用したリアルタイム処理
• クライアントはデータをサブスクライブすることで、イベントド
リブンに処理を実装することができる

AWS Expert Online appsyncを使ったServerlessアーキテクチャ

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to AWS Expert Online appsyncを使ったServerlessアーキテクチャ

Similar to AWS Expert Online appsyncを使ったServerlessアーキテクチャ (20)

More from Amazon Web Services Japan

More from Amazon Web Services Japan (20)

Recently uploaded

Recently uploaded (14)

AWS Expert Online appsyncを使ったServerlessアーキテクチャ