Slide 1

Slide 1 text

ZOZOTOWNトップページの裏側
 ZOZO Tech Meetup
 〜マイクロサービス化に取り組む、16年目のZOZOTOWN〜
 株式会社ZOZOテクノロジーズ
 EC基盤本部/ECプラットフォーム部
 カート決済チーム
 高橋 和太郎
 Copyright © ZOZO Technologies, Inc.

Slide 2

Slide 2 text

© ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ
 EC基盤本部/ECプラットフォーム部
 カート決済チーム 高橋 和太郎
 2016年10月にスタートトゥデイ工務店(現ZOZOテクノロジー ズ)に中途入社。2019年よりZOZOTOWNリプレイスプロジェ クトに従事。趣味は猫と遊ぶこと。
 2

Slide 3

Slide 3 text

© ZOZO Technologies, Inc. https://zozo.jp/
 ● 日本最大級のファッション通販サイト
 ● 1,400以上のショップ、8,200以上のブランドの取り扱い(ともに2021年3月 末時点)
 ● 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品 を掲載
 ● コスメ専門モール「ZOZOCOSME」や靴の専門モール
 「ZOZOSHOES」、ラグジュアリー&デザイナーズゾーン
 「ZOZOVILLA」を展開
 ● 即日配送サービス
 ● ギフトラッピングサービス
 ● ツケ払い など
 3

Slide 4

Slide 4 text

© ZOZO Technologies, Inc. アジェンダ
 ● ZOZOTOWNトップページの裏側を支えるAPI
 ● 構成
 ● 処理の流れ
 ● まとめ
 4

Slide 5

Slide 5 text

© ZOZO Technologies, Inc. 5 ZOZOTOWNトップページ の裏側を支えるAPI

Slide 6

Slide 6 text

© ZOZO Technologies, Inc. 6 2021/3/18にZOZOTOWNはリニューアルしました。
 
 


Slide 7

Slide 7 text

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


Slide 8

Slide 8 text

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


Slide 9

Slide 9 text

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


Slide 10

Slide 10 text

© ZOZO Technologies, Inc. 10 構成

Slide 11

Slide 11 text

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


Slide 12

Slide 12 text

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


Slide 13

Slide 13 text

© ZOZO Technologies, Inc. リニューアルの過程で苦労したこと(開発体制 -before-)
 13

Slide 14

Slide 14 text

© ZOZO Technologies, Inc. リニューアルの過程で苦労したこと(開発体制 -after-)
 14

Slide 15

Slide 15 text

© ZOZO Technologies, Inc. Aggregation APIを中心とした構成(開発当初)
 15

Slide 16

Slide 16 text

© ZOZO Technologies, Inc. Aggregation APIを中心とした構成(負荷試験実施時)
 16

Slide 17

Slide 17 text

© ZOZO Technologies, Inc. 負荷試験の障害の原因
 17

Slide 18

Slide 18 text

© ZOZO Technologies, Inc. Aggregation APIを中心とした構成(キャッシュ導入後)
 
 18

Slide 19

Slide 19 text

© ZOZO Technologies, Inc. キャッシュスタンピード対策について
 
 19 ZOZOTOWNリニューアルで 実 施 した Cache Stampede対策
 https://techblog.zozo.com/entry/zozotown-cache-stampede


Slide 20

Slide 20 text

© ZOZO Technologies, Inc. 20 処理の流れ

Slide 21

Slide 21 text

© ZOZO Technologies, Inc. Aggregation APIの処理の流れ(全体)
 21

Slide 22

Slide 22 text

© ZOZO Technologies, Inc. Aggregation APIの処理の流れ(モジュール管理情報取得)
 22

Slide 23

Slide 23 text

© ZOZO Technologies, Inc. Aggregation APIの処理の流れ(モジュール管理情報取得)
 23 ZOZOTOWNのTOPページに必要な情報を取得 ● モジュールのタイトル ● モジュール内の情報取得条件

Slide 24

Slide 24 text

© ZOZO Technologies, Inc. Aggregation APIの処理の流れ(各モジュール情報取得)
 24

Slide 25

Slide 25 text

© ZOZO Technologies, Inc. Aggregation APIの処理の流れ(各モジュール情報取得)
 25

Slide 26

Slide 26 text

© ZOZO Technologies, Inc. 26 全体レスポンス { "result": [ { モジュールAレスポンス }, { モジュールBレスポンス }, { モジュールCレスポンス }, { モジュールDレスポンス } ] }
 Aggregation APIのレスポンス


Slide 27

Slide 27 text

© 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 }, { : }, ] } モジュールの共通情報 モジュール情報

Slide 28

Slide 28 text

© ZOZO Technologies, Inc. 28 Aggregation APIのダウン
  = ZOZOTOWNのトップページが見れない


Slide 29

Slide 29 text

© ZOZO Technologies, Inc. Aggregation APIの処理の流れ(障害発生時)
 29

Slide 30

Slide 30 text

© ZOZO Technologies, Inc. Aggregation APIの処理の流れ(障害発生時)
 30

Slide 31

Slide 31 text

© ZOZO Technologies, Inc. Aggregation APIの処理の流れ(障害発生時)
 31 ● Aggregation API内部に保持している固定のjsonを読む

Slide 32

Slide 32 text

© ZOZO Technologies, Inc. Aggregation APIの処理の流れ(障害発生時)
 32

Slide 33

Slide 33 text

© ZOZO Technologies, Inc. 33 まとめ

Slide 34

Slide 34 text

© ZOZO Technologies, Inc. ● BFFとしてはクライアントと1対1とすべき
 ○ Web : Web用API、App:App用API
 ● 多くのチームとのコミュニケーションが取れた
 34 Aggregation APIを構築して得られたこと


Slide 35

Slide 35 text

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


Slide 36

Slide 36 text

No content