$30 off During Our Annual Pro Sale. View Details »

実質無料で GraphQL Gateway を手に入れる / low-cost GraphQL Gateway

実質無料で GraphQL Gateway を手に入れる / low-cost GraphQL Gateway

Yuta Wada

March 15, 2023
Tweet

Other Decks in Technology

Transcript

  1. 実質無料で GraphQL Gateway を手に入れる
    GraphQL Gateway を実質無料で手に入れる
    Yuta Wada, 株式会社リクルート
    BuySell Dev Study フロントエンド勉強会

    View Slide

  2. 実質無料で GraphQL Gateway を手に入れる
    自己紹介
    ➔ 和田 祐汰 (@ywada526)
    ➔ Web Engineer at スタディサプリ
    ➔ Typescript / Node.js / Prisma / React / GraphQL あたりの技術を使って
    仕事しています
    2

    View Slide

  3. 実質無料で GraphQL Gateway を手に入れる
    Agenda | 01
    02
    03
    frontend engineer のマイクロサービス疲れの整理
    マイクロサービス疲れを解消する GraphQL Gateway
    GraphQL Gateway 利用したスタディサプリ中学講座の
    アーキテクチャの紹介
    3

    View Slide

  4. 実質無料で GraphQL Gateway を手に入れる
    frontend engineer のマイクロ
    サービス疲れの整理
    01
    4

    View Slide

  5. 実質無料で GraphQL Gateway を手に入れる
    マイクロサービス、好きですか?
    5

    View Slide

  6. 実質無料で GraphQL Gateway を手に入れる
    マイクロサービスに対するそれぞれの視点
    ● backend engineer
    ○ モノリス辛いからマイクロサービスに移行したい
    ○ サービス毎に技術選定できるの good
    ○ マイクロサービス自体にチャレンジしたい
    ● frontend engineer
    ○ どっちにしても UI はモノリシック...
    ○ backend との通信はどうなるんだろう...
    ■ A: 通信は基本的にモノリスより複雑
    6

    View Slide

  7. 実質無料で GraphQL Gateway を手に入れる
    マイクロサービスに対するそれぞれの視点
    ● backend engineer
    ○ モノリス辛いからマイクロサービスに移行したい
    ○ サービス毎に技術選定できるの good
    ○ マイクロサービス自体にチャレンジしたい
    ● frontend engineer
    ○ どっちにしても UI はモノリシック...
    ○ backend との通信はどうなるんだろう...
    ■ A: 通信は基本的にモノリスより複雑
    ➔ frontend engineer としては受ける恩恵があまりない一方で通信が複雑
    になって辛いことが多い
    7

    View Slide

  8. 実質無料で GraphQL Gateway を手に入れる
    マイクロサービスに対するそれぞれの視点
    8
    > A: 通信は基本的にモノリスより複雑
    ここを深堀りたい

    View Slide

  9. 実質無料で GraphQL Gateway を手に入れる
    マイクロサービスの client - server 間通信パターン
    1. 直接通信
    2. Gateway パターン
    3. BFF パターン
    9

    View Slide

  10. 実質無料で GraphQL Gateway を手に入れる
    1. 直接通信
    ➔ client app が直接 backend services と通
    信する
    ➔ 課題
    ◆ backend services が UI と密結合し
    やすい
    ◆ 通信回数が多い
    ◆ 認証などの横断の関心事をどうする

    ◆ client で通信の管理やデータのマー
    ジをする必要がある
    10
    web iOS Android
    backend
    service A
    backend
    service B
    backend
    service C

    View Slide

  11. 実質無料で GraphQL Gateway を手に入れる
    2. Gateway パターン
    ➔ frontend と backend の中間に gateway
    を導入して通信を集約
    ➔ 直接通信パターンの課題を解決できる
    ◆ backend と UI を疎にする
    ◆ 通信回数を集約
    ◆ 認証などの横断の関心事を集約して
    backend を簡素化する
    ➔ 課題
    ◆ client 毎の差分の扱い
    ◆ Gateway に多くのロジックが実装され

    ◆ Gateway 担当チームとの調整コスト
    がある
    11
    web iOS Android
    backend
    service A
    backend
    service B
    backend
    service C
    gateway

    View Slide

  12. 実質無料で GraphQL Gateway を手に入れる
    3. BFF パターン
    ➔ 各 frontend 用の backend (Backend For
    Frontend) を用意して backend との通信を
    集約
    ➔ Gateway パターン課題を解決
    ◆ クライアント毎の差分を BFF が吸収で
    きる
    ◆ 各 frontend の engineer が BFF に
    オーナーシップを持つ
    ➔ 課題
    ◆ client と server (BFF) の両方を開
    発することが負担
    ◆ トータルの実装コスト高い
    12
    web iOS Android
    backend
    service A
    backend
    service B
    backend
    service C
    web BFF iOS BFF
    Android
    BFF

    View Slide

  13. 実質無料で GraphQL Gateway を手に入れる
    どれをとっても辛い...
    ➔ frontend engineer の目線で見ると
    ◆ 直接通信
    ● client で通信の管理やデータのマージをする必要がある
    ◆ Gateway パターン
    ● Gateway 担当チームとの調整コストが発生する
    ◆ BFF パターン
    ● client と server (BFF) の両方を開発することが負担
    13

    View Slide

  14. 実質無料で GraphQL Gateway を手に入れる
    GraphQL Gateway パターン
    14

    View Slide

  15. 実質無料で GraphQL Gateway を手に入れる
    マイクロサービス疲れを解消する
    GraphQL Gateway
    02
    15

    View Slide

  16. 実質無料で GraphQL Gateway を手に入れる
    ● 特徴
    ○ client が欲しいデータの形を決定する
    ● 身近な例では SQL
    ● よいところ
    ○ オーバーフェッチ/アンダーフェッチを回避できる
    GraphQL の特徴
    16

    View Slide

  17. 実質無料で GraphQL Gateway を手に入れる
    GraphQL の仕組み
    ➔ type によって schema を定義
    ➔ schema に対して client が query
    を発行する
    17
    client
    server
    query {
    me {
    name
    posts { title }
    }
    }
    {
    "data": {
    "me": {
    "name": "Yuta Wada",
    "posts": [{ "title": "hi" }]
    }
    }
    }

    View Slide

  18. 実質無料で GraphQL Gateway を手に入れる
    ➔ GraphQL の「client が取得する
    データの形を決定する」という特徴
    を活かしたパターン
    ◆ Gateway パターンの課題
    「client 毎の差分の扱い」を
    解決
    ◆ BFF パターンの課題「実装コ
    スト」を解決
    GraphQL Gateway パターン
    18
    web iOS Android
    backend
    service A
    backend
    service B
    backend
    service C
    GraphQL
    Gateway

    View Slide

  19. 実質無料で GraphQL Gateway を手に入れる
    本当にこれでいいのか?
    19

    View Slide

  20. 実質無料で GraphQL Gateway を手に入れる
    ➔ backend の通信プロトコルが
    REST/gRPC の場合、gateway で
    REST/gRPC から GraphQL への
    変換を実装する必要がある
    GraphQL Gateway パターン
    20
    frontend
    backend
    service A
    backend
    service B
    GraphQL
    Gateway
    GraphQL
    REST/gRPC REST/gRPC

    View Slide

  21. 実質無料で GraphQL Gateway を手に入れる
    ➔ ポイント
    ◆ backend services にも
    GraphQL を採用
    ◆ GraphQL Gateway
    Framework を利用する
    ➔ 結果 aggregation layer の実装コ
    ストがほぼ無料
    GraphQL Gateway パターン (実質無料)
    21
    frontend
    backend
    service A
    backend
    service B
    GraphQL
    Gateway
    GraphQL
    GraphQL GraphQL

    View Slide

  22. 実質無料で GraphQL Gateway を手に入れる
    ● backend services の Schema を合成する
    ● 今回は Schema Stitching を例にどのくらい無料なのかを説明
    ○ 各 backend services で独立した Type の合成
    ○ 各 backend services をまたいだ Type の合成
    GraphQL Gateway Framework とは
    22

    View Slide

  23. 実質無料で GraphQL Gateway を手に入れる
    ケース1: 独立した Type の合成
    23
    frontend
    User
    Service
    Post
    Service
    GraphQL
    Gateway

    View Slide

  24. 実質無料で GraphQL Gateway を手に入れる
    ケース1: 独立した Type の合成
    24

    View Slide

  25. 実質無料で GraphQL Gateway を手に入れる
    ケース1: 独立した Type の合成
    25
    frontend
    User
    Service
    Post
    Service
    GraphQL
    Gateway

    View Slide

  26. 実質無料で GraphQL Gateway を手に入れる
    ケース1: 独立した Type の合成
    26
    frontend
    User
    Service
    Post
    Service
    GraphQL
    Gateway
    query {
    userById(id: "foo") { name }
    postById(id: "bar") { body }
    }

    View Slide

  27. 実質無料で GraphQL Gateway を手に入れる
    ケース1: 独立した Type の合成
    27
    frontend
    User
    Service
    Post
    Service
    GraphQL
    Gateway
    query {
    userById(id: "foo") { name }
    postById(id: "bar") { body }
    }
    query {
    userById(id: "foo") { name }
    }
    query {
    postById(id: "bar") { body }
    }

    View Slide

  28. 実質無料で GraphQL Gateway を手に入れる
    ケース2: service をまたいだ Type の合成
    28
    frontend
    User
    Service
    Post
    Service
    GraphQL
    Gateway
    Post Type に author を追加したい

    View Slide

  29. 実質無料で GraphQL Gateway を手に入れる
    ケース2: service をまたいだ Type の合成
    29
    frontend
    User
    Service
    Post
    Service
    GraphQL
    Gateway

    View Slide

  30. 実質無料で GraphQL Gateway を手に入れる
    ケース2: service をまたいだ Type の合成
    30

    View Slide

  31. 実質無料で GraphQL Gateway を手に入れる
    ケース2: service をまたいだ Type の合成
    31
    frontend
    User
    Service
    Post
    Service
    GraphQL
    Gateway

    View Slide

  32. 実質無料で GraphQL Gateway を手に入れる
    ケース2: service をまたいだ Type の合成
    32
    frontend
    User
    Service
    Post
    Service
    GraphQL
    Gateway
    1.
    query {
    postById(id: "bar") { author { email } }
    }

    View Slide

  33. 実質無料で GraphQL Gateway を手に入れる
    ケース2: service をまたいだ Type の合成
    33
    frontend
    User
    Service
    Post
    Service
    GraphQL
    Gateway
    1.
    query {
    postById(id: "bar") { author { email } }
    }
    2.
    query {
    postById(id: "bar") { author { id } }
    }

    View Slide

  34. 実質無料で GraphQL Gateway を手に入れる
    ケース2: service をまたいだ Type の合成
    34
    frontend
    User
    Service
    Post
    Service
    GraphQL
    Gateway
    3.
    query {
    userById(id: "foo") { email }
    }
    1.
    query {
    postById(id: "bar") { author { email } }
    }
    2.
    query {
    postById(id: "bar") { author { id } }
    }

    View Slide

  35. 実質無料で GraphQL Gateway を手に入れる
    ● REST
    ○ 枯れてる (安定)
    ● gRPC
    ○ パフォーマンス
    ○ schema の強制
    ● GraphQL
    ○ client が response を決定 (= 1 request でデータの過不足がない)
    ○ schema の強制
    internal 通信プロトコルの選定再考
    35

    View Slide

  36. 実質無料で GraphQL Gateway を手に入れる
    ● REST
    ○ 枯れてる (安定)
    ● gRPC
    ○ パフォーマンス
    ○ schema の強制
    ● GraphQL
    ○ client が response を決定 (= 1 request でデータの過不足がない)
    ○ schema の強制
    ○ aggregation layer の実装コスパのよさ
    internal 通信プロトコルの選定再考
    36

    View Slide

  37. 実質無料で GraphQL Gateway を手に入れる
    GraphQL Gateway を利用したス
    タディサプリ中学講座のアーキテク
    チャの紹介
    03
    37

    View Slide

  38. 実質無料で GraphQL Gateway を手に入れる
    スタディサプリ中学講座のアーキテクチャ
    38
    frontend
    (web/iOS/Android)
    main
    content
    monolith
    (legacy)
    gateway auth
    GraphQL
    GraphQL
    GraphQL
    REST
    REST
    GraphQL
    REST
    ➔ 2020年4月から新規サービスとし
    て開発スタート
    ➔ 2022年2月にリリースして現在運
    用中

    View Slide

  39. 実質無料で GraphQL Gateway を手に入れる
    スタディサプリ中学講座のアーキテクチャ
    39
    frontend
    (web/iOS/Android)
    main
    content
    monolith
    (legacy)
    gateway auth
    GraphQL
    GraphQL
    GraphQL
    REST
    REST
    GraphQL
    REST
    ➔ 実質無料 GraphQL Gateway
    ➔ Schema Stitching を利用

    View Slide

  40. 実質無料で GraphQL Gateway を手に入れる
    ➔ だれがオーナーシップを持っているのか?
    ➔ 開発フロー (実際のところどのくらい無料なのか?)
    実質無料 GraphQL Gateway の実態
    40

    View Slide

  41. 実質無料で GraphQL Gateway を手に入れる
    ➔ schema stitching の実装ファイルの commit 数を backend/frontend
    engineer 毎に集計
    ◆ backend: 124
    ◆ frontend: 95
    ● web: 35
    ● iOS: 33
    ● Android: 27
    ➔ プロダクトに関わるエンジニアみんながオーナーシップを持っている
    ◆ 専任チームが発生してボトルネックになっていない
    だれがオーナーシップを持っているのか?
    41

    View Slide

  42. 実質無料で GraphQL Gateway を手に入れる
    1. 既存の schema が利用できる場合
    2. 新たに schema 定義が必要な場合 (service 独立の type)
    3. 新たに schema 定義が必要な場合 (service またぎの type)
    開発フロー (実際のところどのくらい無料なのか?)
    42

    View Slide

  43. 実質無料で GraphQL Gateway を手に入れる
    ➔ 既存の schema に対して query
    を発行すればよい
    ➔ backend および gateway の開発
    が不要
    1. 既存の schema が利用できる場合
    43
    要求整理
    動作確認
    frontend
    開発

    View Slide

  44. 実質無料で GraphQL Gateway を手に入れる
    ➔ schema 定義は
    backend/frontend engineer ど
    ちらが行う場合もある
    ◆ 先に開発に着手する方
    ◆ => "待ち" が発生しない
    ➔ gateway 開発不要
    2. 新たに schema 定義が必要 (service 独立の type)
    44
    要求整理
    動作確認
    schema
    定義
    frontend
    開発
    backend
    開発

    View Slide

  45. 実質無料で GraphQL Gateway を手に入れる
    ➔ この場合のみ gateway の開発が
    必要になる
    ◆ schema stitching の設定の

    3. 新たに schema 定義が必要 (service またぎの type)
    45
    要求整理
    動作確認
    schema
    定義
    frontend
    開発
    backend
    開発
    gateway
    開発

    View Slide

  46. 実質無料で GraphQL Gateway を手に入れる
    まとめ
    ➔ frontend engineer のマイクロサービス疲れを解消するアーキテクチャとし
    て GraphQL Gateway を紹介
    ➔ アーキテクチャによっては実質無料で GraphQL Gateway が手に入る
    ◆ backend services が GraphQL をしゃべる
    ◆ GraphQL Gateway Framework の利用
    ➔ backend services の通信プロトコルの選定では aggregation layer の実
    装コスパにもっと注目したい
    ➔ 個人的な課題: GraphQL Mesh も試してみたい
    ◆ 低コストで REST/gRPC も aggregate できそう
    46

    View Slide

  47. 実質無料で GraphQL Gateway を手に入れる
    We are hiring!
    ➔ frontend engineer 募集しています
    ➔ カジュアル面談歓迎です!
    ➔ 採用ページ: https://brand.studysapuri.jp/career/
    47

    View Slide

  48. 実質無料で GraphQL Gateway を手に入れる
    ご清聴ありがとうございました
    48

    View Slide