ZOZOTOWNの裏側に迫る！
 Javaで作られたBFFの開発事例を紹介
 2023-03-23 ZOZO Tech Meetup〜Java活用事例紹介〜
 株式会社ZOZO
 ZOZOTOWN開発本部 ZOZOTOWNWEB部 バックエンド1ブロック
 小川 雄太郎
 Copyright © ZOZO, Inc. 1

© ZOZO, Inc. 2 小川 雄太郎（ゆうたろう）
 経歴
 2021年、株式会社ZOZO（旧：株式会社ZOZOテクノロジーズ）に新卒入社し、現在は ZOZOTOWN開発本部ZOZOTOWNWEB部バックエンド1ブロックに在籍中。
 
 近況
 VBScriptで書かれた既存のZOZOTOWNの運用・保守を行いつつ、Javaのフレームワークであ るSpringBootを利用した新しいZOZOTOWNへのリプレイスを進行中。
 主に、BFFアーキテクチャに基づいて構築されたAPIの開発に着手している。
 GitHub 
 Twitter


© ZOZO, Inc. アジェンダ
 ● BFFの概要説明
 ● BFFのプロジェクトの構成や設計について
 ● 直近での利用例
 ● まとめ
 3

© ZOZO, Inc. 4 BFFの概要説明


© ZOZO, Inc. 5 BFF(Backends for Frontends)とは
 BFFとは、Backends for Frontendsの略で、UIやユースケースに合わせてデータの加工をおこなう中間層の こと。WebやモバイルアプリケーションなどのUIと各マイクロサービス間のやりとりを仲介し、UIの要件に合わ せたデータ整形や集約を担当する。


© ZOZO, Inc. リプレイス開始前
 ● 全てのロジックをWebサーバとストアドで保持
 ● ClassicASPやVBScript、独自に開発したライブラリなどを利用して開発
 ● オンプレミス環境でIISを使用して稼働
 6 ZOZOTOWNのリプレイス①


© ZOZO, Inc. 7 ZOZOTOWNのリプレイス②
 リプレイス開始当初
 ● 一部のストアドで保持していたロジックをAPI化
 ● クラウド環境でコンテナによってマイクロサービスを実行
 ● DB内の一部のデータをクラウドに同期


© ZOZO, Inc. 8 ZOZOTOWNのリプレイス③
 現在
 ● レンダリングを目的とした新たなWebサーバを構築し、一部のフロントエンド領域をリプレイス
 ● データの整形や集約を担当するBFFサーバを構築
 ● 現在、3つのアーキテクチャが共存している


© ZOZO, Inc. 9 BFF導入によるメリット
 ● クライアントの実装が簡潔になる
 ● クライアント・サーバ間の通信量を削減できる
 ● マイクロサービス側の変更によるクライアントへの影響が減少する
 ● アプリケーションを分離することで責務が明確になり、開発効率の向上が期待できる


© ZOZO, Inc. 10 BFFのプロジェクトの構成や設計について


© ZOZO, Inc. 11 DDDアーキテクチャの採用とレイヤー分担
 ZOZOTOWNにおけるBFFはDDD(Domain-Driven Design)に基づいたアーキテクチャを採用しており、各レイ ヤーの役割分担が明確になっている。


© ZOZO, Inc. 12 ● プログラム言語
 ○ Java
 ○ Groovy
 ● フレームワーク
 ○ Spring Boot
 ● ライブラリ
 ○ Lombok
 ● テストフレームワーク
 ○ Spock
 ● ビルドツール
 ○ Gradle
 ● API仕様
 ○ OpenAPI
 ● モック用Webサーバ
 ○ nginx
 ● ツール
 ○ OpenAPI Generator
 etc.
 技術スタック


© ZOZO, Inc. 13 直近での利用例


© ZOZO, Inc. 14 ZOZOTOWN
 ホーム
 elove by ZOZO
 (エラブ バイ ゾゾ)
 ページ上部に表示されるバ ナー一覧、およびページ中 央に表示されるパーソナライ ズされたモジュール一覧を BFFを介してデータ取得して いる。
 CMSを利用した施策ペー ジ。ページング機能を搭載し た記事一覧のモジュールを BFFを介してデータ取得して いる。
 https://zozo.jp/
 https://zozo.jp/elove/


© ZOZO, Inc. ● 現在ZOZOTOWNでは、VBScriptで実装されたレガシーなアプリケーションをJavaやSpringBootを用いた モダンなアプリケーションへとリプレイスしている。
 ● BFFの導入により、複数のマイクロサービスから必要なデータを収集し、一つのエンドポイントからレスポ ンスを返すことができるようになった。
 ● BFFの導入により、クライアント側の実装が簡素化され、通信量も削減された。また、クライアント側がマ イクロサービス側の変更に影響を受けずにBFF側で修正を完結できるため、今後の開発効率の向上も 見込める。
 ● BFFへのリプレイスは現在進行中で、まだ一部のみの実施となっている。今後も随時リプレイスを進め、 全体の更新を目指している。
 15 まとめ


© ZOZO, Inc. 16 BFFを駆使したZOZOTOWNのバックエンド開発に携わりませんか？
 募集職種名
 ZOZOTOWN バックエンドエンジニア
 業務内容
 
 
 ファッションEC「ZOZOTOWN」の新規機能から既存機能のバックエンド分野の開発
 ○ Webアプリケーションの設計/開発/運用
 ○ ネイティブアプリ用のAPIの設計/開発/運用
 ○ DBまわりのテーブル設計やチューニング
 備考
 ○ フルフレックス制
 ○ 全国どこでも勤務可能


No content