社内CSサービスを支えるGraphQLについて.pdf

Transcript

1. 1 社内CSサービスを支えるGraphQLについて Mercari CS/CRE Tech Talk #1 @Peranikov

2. 2 @Peranikov
 
 2018年11月にメルカリ、CSTool teamに入社
 
 ~ 3月: CRE CSTool

   Team
 Software Engineer/Tech Lead
 
 4月~ : CRE
 Engineering Manager
 
 松久保 敬人 / Yuto Matsukubo
 自己紹介

3. 3 本日話さないこと ❌ GraphQLの基礎的な知識

4. 4 CRE CSTool Team について Agenda 社内CSサービスにおけるGraphQLの活用 GraphQLでの開発 02 03

   01

5. 5 CRE CSTool Team について

6. 6 このチームの活動を一言で言うと... あんしん・あんぜんなメルカリのマーケット づくりを技術でサポートする CRE CSTool Team について

7. 7 CRE CSTool Team について 現在このチームがサポートしているサービス - Moderation-tool（商品通報対応） - Authorization-tool（社内権限管理）

   - admin-graphql（社内向けGraphQLサーバ） - CSTool（モノリシックな旧CSツール）

8. 8 • 違反出品と思われる商品の 通報をCSメンバーが目視で 確認するサービス • 流入元の通報を徐々に移行 中（キーワード検知、 MachineLearning検知 など）

   Moderation-tool

9. 9 • 社内の情報・オペレーション を扱える権限を管理する サービス Authorization-tool

10. 10 admin-graphql • 社内サービスから各マイクロ サービスにアクセスするため のハブとなるGraphQLサー バ • 既に2年以上運用している •

    今回はここの話をします

11. 11 社内CSサービスにおける GraphQLの活用

12. 12 社内サービスはadmin-graphqlを通して 各microservicesにアクセスしている admin-graphql Other microservices mod backend contact backend

    contact frontend mod frontend CSTool（一部API） Monolith API admin-gateway 認証とGraphQLへ のルーティング

13. 13 なぜGraphQLか? 大きい理由として • フロントエンドのためのBFFとしての価値 • Schemaがそのままドキュメントとして活用できる

14. 14 • フロントエンドが欲しいデータを統一されたエンドポイントでアクセスすることがで きる • どのデータがどのサービスにあるかということを意識する必要がない • 欲しいデータを単一のクエリにまとめることができる フロントエンドのためのBFFとしての価値

15. 15 クエリに内包されるAPIの例

16. 16 クエリに内包されるAPIの例 mod-service.GetItemCase item-service.Get user-service.Get mod-service.ListReports

17. 17 • フロントエンドから各マイクロサービスへリクエストを送る際に必ず通過する admin-gatewayが存在する • 認証の他にも各マイクロサービスのgRPCエンドポイントにRESTでアクセスする 機能がある • ただしこの方法はフロントエンドに多段的なリクエストが必要になるため積極的 には使用していない

    別のアプローチも存在している Admin-gateway (REST)

18. 18 • 複数チーム跨いだ開発においてはGraphQLでどのデータを取得できるかを共 有する必要が出てくる • Schemaに説明となるコメントを残しそのままドキュメントとして活用する Schemaがそのままドキュメントとして活用できる

19. 19 Playgroundの活用 Schemaをそのままド キュメントとして Playground上で確認 できる

20. 20 GraphQLでの開発

21. 21 • サーバーサイド ◦ Go ◦ gqlgen • フロントエンド ◦

    TypeScript ◦ React ◦ @apollo/client ▪ GraphQL client ◦ graphql-codegen ▪ GraphQL Schemaから型定義を生成するツール ◦ Graphql-tag ▪ GraphQL queryをパースしてくれるリテラルを提供してくれる GraphQLでの開発

22. 22 • 社内のmicroservice platform teamが提供してくれているmicroservice向 けのライブラリがほぼGoライブラリで提供されている • mercari tech conf

    2018のイベント用アプリでgqlgenが採用されており、 gqlgenコミッターがいるなど社内にノウハウがあった ◦ https://github.com/mercari/mtc2018-web/tree/develop/server • 当時gqlgenはサポートされているGraphQLの機能が他のGoライブラリと比 較して多く、開発も活発だったので安心感があった なぜサーバーサイドでGoを選択したか?

23. 23 チームを跨いだ開発体制 admin-graphql CStool team ・develop ・on-call ・code review other

    teams ・開発依頼 CX-Platform team ・Pull Request

24. 24 • CSTool teamがオーナーとしてCode Reviewを担っているため他チームの開 発のボトルネックとなる可能性がある • Schema設計はドメイン設計とも密接に関係してくるので、CSTool teamがレ ビューするために他チームのプロダクトのドメイン知識をある程度知っておく必

    要があるがそれも限界がある • 各チームにGraphQLサーバーを設置するのはエンドポイントが分かれるので フロントエンド側の利便性が下がる 開発体制への課題感

25. 25 ❗まだデザインフェーズで実装されていません • 複数のGraphQLサーバーを統括するGraphQLサーバーを立て、Schema情 報を集約する • フロントエンドからはあたかもひとつのGraphQLサーバーにアクセスしているよ うに見える • 参考:

    https://www.graphql-tools.com/docs/schema-stitching/ IDEA: Schema Stitching

26. 26 新しい開発体制 admin-graphql- gateway CStool team ・develop ・on-call CX-Platform team

    cx-platform- graphql ・develop ・on-call ・code review admin-graphql ・develop ・on-call ・code review stitching stitching

27. 27 • 複数のフロントエンドから各マイクロサービスへのアクセスを統合的に扱うため にGraphQLサーバーが存在する • 複数チームでの開発による課題と、Schema Stitchingによる解決の期待 • CSTool teamではGraphQLやReactを駆使してサーバーサイドからフロント

    エンドまで開発してみたいエンジニアを募集しています！ まとめ