ZOZOTOWNの裏側に迫る！ Javaで作られたBFFの開発事例を紹介

Transcript

1. ZOZOTOWNの裏側に迫る！

   Javaで作られたBFFの開発事例を紹介

   2023-03-23 ZOZO Tech Meetup〜Java活用事例紹介〜

   株式会社ZOZO

   ZOZOTOWN開発本部 ZOZOTOWNWEB部 バックエンド1ブロック

   小川 雄太郎

   Copyright © ZOZO, Inc.
   1
   

   View Slide

2. © ZOZO, Inc.
   2
   小川 雄太郎（ゆうたろう）

   経歴

   2021年、株式会社ZOZO（旧：株式会社ZOZOテクノロジーズ）に新卒入社し、現在は
   ZOZOTOWN開発本部ZOZOTOWNWEB部バックエンド1ブロックに在籍中。

   

   近況

   VBScriptで書かれた既存のZOZOTOWNの運用・保守を行いつつ、Javaのフレームワークであ
   るSpringBootを利用した新しいZOZOTOWNへのリプレイスを進行中。

   主に、BFFアーキテクチャに基づいて構築されたAPIの開発に着手している。

   GitHub 

   Twitter

   

   View Slide

3. © ZOZO, Inc.
   アジェンダ

   ● BFFの概要説明

   ● BFFのプロジェクトの構成や設計について

   ● 直近での利用例

   ● まとめ

   3
   

   View Slide

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

   

   View Slide

5. © ZOZO, Inc.
   5
   BFF(Backends for Frontends)とは

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

   

   View Slide

6. © ZOZO, Inc.
   リプレイス開始前

   ● 全てのロジックをWebサーバとストアドで保持

   ● ClassicASPやVBScript、独自に開発したライブラリなどを利用して開発

   ● オンプレミス環境でIISを使用して稼働

   6
   ZOZOTOWNのリプレイス①

   

   View Slide

7. © ZOZO, Inc.
   7
   ZOZOTOWNのリプレイス②

   リプレイス開始当初

   ● 一部のストアドで保持していたロジックをAPI化

   ● クラウド環境でコンテナによってマイクロサービスを実行

   ● DB内の一部のデータをクラウドに同期

   

   View Slide

8. © ZOZO, Inc.
   8
   ZOZOTOWNのリプレイス③

   現在

   ● レンダリングを目的とした新たなWebサーバを構築し、一部のフロントエンド領域をリプレイス

   ● データの整形や集約を担当するBFFサーバを構築

   ● 現在、3つのアーキテクチャが共存している

   

   View Slide

9. © ZOZO, Inc.
   9
   BFF導入によるメリット

   ● クライアントの実装が簡潔になる

   ● クライアント・サーバ間の通信量を削減できる

   ● マイクロサービス側の変更によるクライアントへの影響が減少する

   ● アプリケーションを分離することで責務が明確になり、開発効率の向上が期待できる

   

   View Slide

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

    

    View Slide

11. © ZOZO, Inc.
    11
    DDDアーキテクチャの採用とレイヤー分担

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

    

    View Slide

12. © ZOZO, Inc.
    12
    ● プログラム言語

    ○ Java

    ○ Groovy

    ● フレームワーク

    ○ Spring Boot

    ● ライブラリ

    ○ Lombok

    ● テストフレームワーク

    ○ Spock

    ● ビルドツール

    ○ Gradle

    ● API仕様

    ○ OpenAPI

    ● モック用Webサーバ

    ○ nginx

    ● ツール

    ○ OpenAPI Generator

    etc.

    技術スタック

    

    View Slide

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

    

    View Slide

14. © ZOZO, Inc.
    14
    ZOZOTOWN

    ホーム

    elove by ZOZO

    (エラブ バイ ゾゾ)

    ページ上部に表示されるバ
    ナー一覧、およびページ中
    央に表示されるパーソナライ
    ズされたモジュール一覧を
    BFFを介してデータ取得して
    いる。

    CMSを利用した施策ペー
    ジ。ページング機能を搭載し
    た記事一覧のモジュールを
    BFFを介してデータ取得して
    いる。

    https://zozo.jp/
 https://zozo.jp/elove/

    

    View Slide

15. © ZOZO, Inc.
    ● 現在ZOZOTOWNでは、VBScriptで実装されたレガシーなアプリケーションをJavaやSpringBootを用いた
    モダンなアプリケーションへとリプレイスしている。

    ● BFFの導入により、複数のマイクロサービスから必要なデータを収集し、一つのエンドポイントからレスポ
    ンスを返すことができるようになった。

    ● BFFの導入により、クライアント側の実装が簡素化され、通信量も削減された。また、クライアント側がマ
    イクロサービス側の変更に影響を受けずにBFF側で修正を完結できるため、今後の開発効率の向上も
    見込める。

    ● BFFへのリプレイスは現在進行中で、まだ一部のみの実施となっている。今後も随時リプレイスを進め、
    全体の更新を目指している。

    15
    まとめ

    

    View Slide

16. © ZOZO, Inc.
    16
    BFFを駆使したZOZOTOWNのバックエンド開発に携わりませんか？

    募集職種名
 ZOZOTOWN バックエンドエンジニア

    業務内容

    

    

    ファッションEC「ZOZOTOWN」の新規機能から既存機能のバックエンド分野の開発

    ○ Webアプリケーションの設計/開発/運用

    ○ ネイティブアプリ用のAPIの設計/開発/運用

    ○ DBまわりのテーブル設計やチューニング

    備考
 ○ フルフレックス制

    ○ 全国どこでも勤務可能

    

    View Slide

17. View Slide