Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Ec2568783e5ea4ecd0d68e1f22291eb8?s=128

TakahashiKazutaro

July 29, 2021
Tweet

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としてはクライアントと1対1とすべき
 ◦ Web : Web用API、App:App用API


    • 多くのチームとのコミュニケーションが取れた
 34 Aggregation APIを構築して得られたこと

  35. © ZOZO Technologies, Inc. • ZOZO Aggregation APIを実装
 • 各マイクロサービスとの通信をまとめる役割


    • 一部のマイクロサービスとの通信でエラーでも大丈夫
 35 まとめ

  36. None