ZOZOTOWNトップページの裏側 / Back side of the ZOZOTOWN top page

Transcript

1. ZOZOTOWNトップページの裏側
 ZOZO Tech Meetup
 〜マイクロサービス化に取り組む、16年目のZOZOTOWN〜
 株式会社ZOZOテクノロジーズ
 EC基盤本部/ECプラットフォーム部
 カート決済チーム
 高橋 和太郎
 Copyright © ZOZO Technologies, Inc.
2. © ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ
 EC基盤本部/ECプラットフォーム部
 カート決済チーム 高橋 和太郎
 2016年10月にスタートトゥデイ工務店（現ZOZOテクノロジー ズ）に中途入社。2019年よりZOZOTOWNリプレイスプロジェ クトに従事。趣味は猫と遊ぶこと。
 2
3. © ZOZO Technologies, Inc. https://zozo.jp/
 • 日本最大級のファッション通販サイト
 • 1,400以上のショップ、8,200以上のブランドの取り扱い（ともに2021年3月 末時点）
 • 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品 を掲載
 • コスメ専門モール「ZOZOCOSME」や靴の専門モール
 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン
 「ZOZOVILLA」を展開
 • 即日配送サービス
 • ギフトラッピングサービス
 • ツケ払い など
 3
4. © ZOZO Technologies, Inc. アジェンダ
 • ZOZOTOWNトップページの裏側を支えるAPI
 • 構成
 • 処理の流れ
 • まとめ
 4
5. © ZOZO Technologies, Inc. 5 ZOZOTOWNトップページ の裏側を支えるAPI
6. © ZOZO Technologies, Inc. 6 2021/3/18にZOZOTOWNはリニューアルしました。
 
 

7. © ZOZO Technologies, Inc. 7 今回のZOZOTOWNのリニューアルを機に実装されたAPI
 
 
 ZOZO Aggregation API

8. © ZOZO Technologies, Inc. ZOZO Aggregation APIを実装した目的
 8 • 各マイクロサービスへの通信をまとめる
 • パーソナライズを見据えてモジュールの出し分けをする
 • コンテンツの運用負荷の削減する
 • 表示モジュールのA／Bテストを可能にする

9. © ZOZO Technologies, Inc. モジュールとは
 9 • ZOZOTOWNのトップページに表示されて一 定の目的を持った商品情報の塊のこと
 
 • リニューアル前から現在と同様に情報を表 示する単位でデバイスごとに存在していた
 

10. © ZOZO Technologies, Inc. 10 構成
11. © ZOZO Technologies, Inc. リニューアル前のZOZOTOWNのトップページの構成
 11 • Web、アプリで必要に応じて各APIやオンプレ DB（ストアド）へアクセスしていた
 
 • 今後、マイクロサービスが進むにつれ、アクセ ス対象となるAPIが増え、そのAPIの要件に よっては、クライアントサイドで改修が必要に なる

12. © ZOZO Technologies, Inc. リニューアル後のZOZOTOWNのトップページの構成
 12 • トップページのすべてのアクセスはAPI Gatewayを通してAggregation APIへ 一本化 された
 
 • 今後、マイクロサービスが増えた場合でもクラ イアントから通信を行うのではなく、 Aggregation APIから通信を行う
 

13. © ZOZO Technologies, Inc. リニューアルの過程で苦労したこと（開発体制 -before-）
 13
14. © ZOZO Technologies, Inc. リニューアルの過程で苦労したこと（開発体制 -after-）
 14
15. © ZOZO Technologies, Inc. Aggregation APIを中心とした構成（開発当初）
 15
16. © ZOZO Technologies, Inc. Aggregation APIを中心とした構成（負荷試験実施時）
 16
17. © ZOZO Technologies, Inc. 負荷試験の障害の原因
 17
18. © ZOZO Technologies, Inc. Aggregation APIを中心とした構成（キャッシュ導入後）
 
 18
19. © ZOZO Technologies, Inc. キャッシュスタンピード対策について
 
 19 ZOZOTOWNリニューアルで 実 施 した Cache Stampede対策
 https://techblog.zozo.com/entry/zozotown-cache-stampede

20. © ZOZO Technologies, Inc. 20 処理の流れ
21. © ZOZO Technologies, Inc. Aggregation APIの処理の流れ（全体）
 21
22. © ZOZO Technologies, Inc. Aggregation APIの処理の流れ（モジュール管理情報取得）
 22
23. © ZOZO Technologies, Inc. Aggregation APIの処理の流れ（モジュール管理情報取得）
 23 ZOZOTOWNのTOPページに必要な情報を取得 • モジュールのタイトル • モジュール内の情報取得条件
24. © ZOZO Technologies, Inc. Aggregation APIの処理の流れ（各モジュール情報取得）
 24
25. © ZOZO Technologies, Inc. Aggregation APIの処理の流れ（各モジュール情報取得）
 25
26. © ZOZO Technologies, Inc. 26 全体レスポンス { "result": [ { モジュールAレスポンス }, { モジュールBレスポンス }, { モジュールCレスポンス }, { モジュールDレスポンス } ] }
 Aggregation APIのレスポンス

27. © ZOZO Technologies, Inc. 27 全体レスポンス { "result": [ { モジュールAレスポンス }, { モジュールBレスポンス }, { モジュールCレスポンス }, { モジュールDレスポンス } ] }
 Aggregation APIのレスポンス
 { "common_information": { "title": "モジュールAタイトル", "sub_title": "モジュールAサブタイトル", "module_type": "モジュールA", : }, "module_information": [ { "item_id": 1234567, "item_name": "サンプルA", "price": 5500 }, { : }, ] } モジュールの共通情報 モジュール情報
28. © ZOZO Technologies, Inc. 28 Aggregation APIのダウン
 　＝ ZOZOTOWNのトップページが見れない

29. © ZOZO Technologies, Inc. Aggregation APIの処理の流れ（障害発生時）
 29
30. © ZOZO Technologies, Inc. Aggregation APIの処理の流れ（障害発生時）
 30
31. © ZOZO Technologies, Inc. Aggregation APIの処理の流れ（障害発生時）
 31 • Aggregation API内部に保持している固定のjsonを読む
32. © ZOZO Technologies, Inc. Aggregation APIの処理の流れ（障害発生時）
 32
33. © ZOZO Technologies, Inc. 33 まとめ
34. © ZOZO Technologies, Inc. • BFFとしてはクライアントと１対１とすべき
 ◦ Web : Web用API、App：App用API
 • 多くのチームとのコミュニケーションが取れた
 34 Aggregation APIを構築して得られたこと

35. © ZOZO Technologies, Inc. • ZOZO Aggregation APIを実装
 • 各マイクロサービスとの通信をまとめる役割
 • 一部のマイクロサービスとの通信でエラーでも大丈夫
 35 まとめ