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

Mercari CS/CRE Tech Talk #1

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を駆使してサーバーサイドからフロント エンドまで開発してみたいエンジニアを募集しています！ まとめ