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

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

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

Yutaro Ogawa

March 27, 2023
Tweet

Other Decks in Technology

Transcript

  1. ZOZOTOWNの裏側に迫る!

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

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

    株式会社ZOZO

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

    小川 雄太郎

    Copyright © ZOZO, Inc.
    1

    View full-size slide

  2. © ZOZO, Inc.
    2
    小川 雄太郎(ゆうたろう)

    経歴

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


    近況

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

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

    GitHub 

    Twitter


    View full-size slide

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

    ● BFFの概要説明

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

    ● 直近での利用例

    ● まとめ

    3

    View full-size slide

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


    View full-size slide

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

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


    View full-size slide

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

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

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

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

    6
    ZOZOTOWNのリプレイス①


    View full-size slide

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

    リプレイス開始当初

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

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

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


    View full-size slide

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

    現在

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

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

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


    View full-size slide

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

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

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

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

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


    View full-size slide

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


    View full-size slide

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

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


    View full-size slide

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

    ○ Java

    ○ Groovy

    ● フレームワーク

    ○ Spring Boot

    ● ライブラリ

    ○ Lombok

    ● テストフレームワーク

    ○ Spock

    ● ビルドツール

    ○ Gradle

    ● API仕様

    ○ OpenAPI

    ● モック用Webサーバ

    ○ nginx

    ● ツール

    ○ OpenAPI Generator

    etc.

    技術スタック


    View full-size slide

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


    View full-size slide

  14. © ZOZO, Inc.
    14
    ZOZOTOWN

    ホーム

    elove by ZOZO

    (エラブ バイ ゾゾ)

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

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

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


    View full-size slide

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

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

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

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

    15
    まとめ


    View full-size slide

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

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

    業務内容



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

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

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

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

    備考
 ○ フルフレックス制

    ○ 全国どこでも勤務可能


    View full-size slide