MTC2018 - Web Application as a Microservice

Speaker: 杉浦 颯太

メルカリWebはメルカリの成長を支える一角として開発され、約2年間メルカリと共に成長してきました。このメルカリWebをWebにまつわる技術の進化や拡大するフロントエンドチームといった変化に強くするためにJP Web Rearchitectチームが誕生しました。このトークではJP Web Rearchitectで実現する新たなアーキテクチャとその詳細、そしてそれを実現した先にある未来についてお話します。

Transcript

1. Web Application as a Microservice 杉浦 颯太 Tech Lead (Backend)
2. Tech Lead Backend Sota Sugiura
3. https://www.mercari.com/jp/
4. JP Web Re-architect
5. Goal 変更に強い柔軟なアーキテクチャ 1 2 開発チームのスケーラビリティの向上
6. 変更に強い柔軟なアーキテクチャ • トレンドへの追従 • Scrap and Build
8. 開発チームのスケーラビリティの向上 • エンジニアの増加に耐えるアーキテクチャ • 各チームの技術選定を自由に
9. Single PHP Server Te m ar Te m ar Box Te m ar G i 現実 Mercari Mercari Box Mercari Guide
10. SSR GraphQL SPA REST API Simple HTTP server Mic r i s Te m ar Mic r i s Te m ar Box Mic r i s Te m ar G i 理想
11. How to Re-architect?
12. 1 Monolithic Service to 4 Microservices
13. Wait, can you migrate all features from Monolithic Service at once? :P
14. 1 Monolithic Service to with 4 Microservices
15. Monolithic Service Feature ・ ・ ・ Monolithic Service Feature ・ ・ ・ Microservice Microservice Microservice Microservice Microservice Microservice
16. Why? • RenewalでなくRe-architect • 小さいスコープで移行を行う • まずは小さなチャレンジと失敗を積み重ねる
17. 必要最小スコープの移行
18. Monolithic Service Feature ・ ・ ・ /jp/*
19. Monolithic Service Feature ・ ・ ・ Microservice Microservice /jp/* /jp/top
20. 移行順の決め方 • 難易度 • 他改修とのバッティング • 充分なトラフィックがあるか
21. Challenges
22. Challenges Monolithic Service + Microservices 1 2 FrontendとBackendの分離 3 セッション同期
23. GraphQL SSR mercari-web mercari-api Web Gateway Session service CDN
24. GraphQL SSR mercari-web mercari-api Web Gateway Session service CDN 1 2 3
25. GraphQL SSR mercari-web mercari-api Web Gateway Session service CDN 1 2 3
26. Web Gateway • 各ServiceへのBalancingを行う • 初期は新旧アーキテクチャ共存のため • 将来はWeb Microservicesのため
27. • パスによる制御 • 公開範囲の制御 • Session persistence Web Gateway mercari-web Mercari Mercari Box /hoge /moge /others CDN
28. • パスによる制御 • 公開範囲の制御 • Session persistence Web Gateway mercari-web Mercari /hoge /moge /others CDN /hoge=”Mercari” /moge=”Mercari Box” Mercari Box
29. • パスによる制御 • 公開範囲の制御 • Session persistence Web Gateway mercari-web Mercari /hoge /moge /others 0% 100% WI Mercari Box
30. • パスによる制御 • 公開範囲の制御 • Session persistence Web Gateway mercari-web Mercari /hoge /moge /others 10% 90% WI Mercari Box
31. • パスによる制御 • 公開範囲の制御 • Session persistence Web Gateway mercari-web Mercari /hoge /moge /others 100% 0% WI Mercari Box
32. • パスによる制御 • 公開範囲の制御 • Session persistence Web Gateway mercari-web Mercari /hoge /moge /others 10% 90% A B WI Mercari Box
33. • パスによる制御 • 公開範囲の制御 • Session persistence Web Gateway mercari-web Mercari /hoge /moge /others 10% 90% A B WI Mercari Box
34. • パスによる制御 • 公開範囲の制御 • Session persistence Web Gateway mercari-web Mercari /hoge /moge /others 10% 90% A WI Mercari Box B
35. • パスによる制御 • 公開範囲の制御 • Session persistence Web Gateway mercari-web Mercari /hoge /moge /others 10% 90% A WI Mercari Box B
36. GraphQL SSR mercari-web mercari-api Web Gateway Session service CDN 1 2 3
37. BackendのMicroservices化は フロントエンドにとってどのような意味があるのか
38. mercari-web mercari-api JSON over HTTPs
39. mercari-web mercari-api JSON over HTTPs SSR JSON over HTTPs New!
40. mercari-web mercari-api JSON over HTTPs SSR Offer service JSON over HTTPs gRPC New!
41. mercari-web mercari-api JSON over HTTPs SSR Offer service JSON over HTTPs gRPC Listing service gRPC New!
42. mercari-web mercari-api JSON over HTTPs SSR Offer service JSON over HTTPs gRPC Listing service gRPC New! Buying service New! Live service New! User service
43. mercari-web mercari-api JSON over HTTPs SSR Offer service JSON over HTTPs gRPC Listing service gRPC New! Buying service New! Live service New! User service • 日々増えるMicroservicesの仕様の把握 • パフォーマンスを意識したコーディング
44. mercari-web mercari-api JSON over HTTPs BFF Listing Service JSON over HTTPs gRPC Offer Service gRPC Our strategy SSR
45. mercari-web mercari-api JSON over HTTPs BFF Listing Service JSON over HTTPs gRPC Offer Service gRPC Our strategy SSR Frontend Engineer Backend Engineer
46. BFFとして何を実装するか • SPAと相性のよいGraphQLを採用 • a を使用
47. GraphQL SSR mercari-web mercari-api Web Gateway Session service CDN 1 2 3
48. セッション同期問題 • いくつかのMicroservicesは同ドメインに展開 • Monolithic Serviceとログイン状態の一貫性を保つ 必要がある
49. mercari-web 未ログインユーザ SSR server
50. mercari-web 未ログインユーザ POST /login SSR server
51. mercari-web ログインユーザ Success! SSR server
52. mercari-web ログインユーザ GET / SSR server
53. mercari-web ログインユーザ ログイン済みページを 返すべき SSR server
54. Microservice for managing session • Session管理を行うMicroserviceを立てる • セッション整合性、データ保存等を隠蔽 • 他のMicroserviceからも使うことを想定
55. どのように同期するのか
56. mercari-web Session service Request Call to get session every time Response Session data SSR server
57. mercari-web Session service Request Call to get session every time Response Session data SSR server
58. https://gist.github.com/jboner/2841832 Latency Numbers Every Programmer Should Know
59. mercari-web Session service Q. この間の距離は？ SSR server
60. 約800km ※だいたいです
61. 北海道と東京での通信 • GKEは東京Regionを使用 • 既存のMonolithic Serviceは北海道で動く • Latencyを意識した設計を行う必要がある
62. • Storageを前段に • 日本縦断回数を抑える mercari-web Session service New! Cache storage
63. mercari-web Session service New! Cache storage • gRPC via Node.js • チームとの相性を意識
64. mercari-web Session service mercari-api Cache storage SSR server
65. mercari-web Session service mercari-api Cache storage まずは手元のCache, DBを見て セッションの有無を確かめる SSR server
66. mercari-web Session service mercari-api Cache storage 手元にない場合、 Monolithic Serviceにセッション有無を 問い合わせる SSR server
67. mercari-web Session service mercari-api Cache storage 得たセッション情報から Monolithic APIへ認証情報を問い合わせる SSR server
68. mercari-web Session service mercari-api Cache storage セッション情報を保存する SSR server
69. シンプルに保つ • 手元にあれば使う、無ければ取りに行く • 北海道から東京へのアクセスはしない • セキュリティ/整合性は担保しつつ
70. Conclusion
71. 今はいわば種まき • まずは最高のアーキテクチャを実現する • そして爆発的なスピードで開発をできる世界へ • そして最高の開発体験を実現する
72. So many challenges! • 技術スタック • アーキテクチャ刷新 • 開発体制の進化、スケール
73. Al or One 全ては最高のWebのために
74. Thank you :) Feel free to ask me any questions at the “Ask the speaker” booth