Tweet
Tweet

Slide 1

Slide 1 text

Road to migrate JP web as microservices @sota1235 2018/8/6 Mercari Tech Meetup #1

Slide 2

Slide 2 text

console.log(me); • Sota Sugiura(きりん) • @sota1235 • Web Rearchitect, Tech Lead • 将来の夢はJavaScript になることです

Slide 3

Slide 3 text

Webの話をします

Slide 4

Slide 4 text

Agenda • メルカリWebについて • JP Web Rearchitectについて • Rearchitectの道のり

Slide 5

Slide 5 text

メルカリWebについて

Slide 6

Slide 6 text

おかげさまで5周年 https://about.mercari.com/press/news/article/20180702_mercarinumbers/

Slide 7

Slide 7 text

⼀⽅のWeb https://speakerdeck.com/yuisakamoto/apurihuasutofalseying-dewan-zhang-ruwebfalsehua

Slide 8

Slide 8 text

これまでのメルカリの事業 • ⾮連続な成⻑のための開発スピード • スマートフォンで売る/買うという体験 • 選択と集中による開発リソースの配分

Slide 9

Slide 9 text

これまでのメルカリWeb • 新たな顧客層へのサービス提供 • SNSシェアやSEO等、Webへの展開 • ⼀部、WebViewとブラウザで両⽴するページ の展開

Slide 10

Slide 10 text

現状のメルカリWebの課題

Slide 11

Slide 11 text

アプリとの機能差分 アーキテクチャ

Slide 12

Slide 12 text

アプリとの機能差分 アーキテクチャ アプリとの機能差分

Slide 13

Slide 13 text

アプリとの機能差 • Webは必要最低限の機能のみ実装されている • 購⼊/出品/検索 • いくつかの機能はアプリへ誘導している • 配送機能(⼀部)、オファー、フォロー etc…

Slide 14

Slide 14 text

全部コピー、が正解ではない • アプリ、Webそれぞれ良さがある • Webで活きるものは実装したい • 逆にWebだけの機能があってもいい

Slide 15

Slide 15 text

アプリとの機能差分 アーキテクチャ アーキテクチャ

Slide 16

Slide 16 text

アーキテクチャ • Monolithicな構成になっている • フロントエンドエンジニアが触りづらい • BackendのMicroservices化についていくのが 難しい

Slide 17

Slide 17 text

アーキテクチャ • dietcube(hosted by PHP 7.1) • jQuery • React • ⼤抵のviewはTwigでrenderingされる

Slide 18

Slide 18 text

このままでよいのか

Slide 19

Slide 19 text

よくない • Webもメルカリの重要なファクター • ブラウザ上でのお客さまの体験の最適化 • AMP化によるアクセスの爆増や細かい改修に よる売上の向上等、まだまだポテンシャルを 秘めている

Slide 20

Slide 20 text

JP Web Rearchitect team

Slide 21

Slide 21 text

JP Web Rearchitectについて

Slide 22

Slide 22 text

Goal

Slide 23

Slide 23 text

新アーキテクチャの構築

Slide 24

Slide 24 text

新アーキテクチャの⽬的 • 今後のメルカリWebの進化を促進する • 数多くのチーム、エンジニアの協調

Slide 25

Slide 25 text

進化の促進 • やりたいことは⼭程ある • 新しい技術的チャレンジをする⼟壌を整える • PWA化や新ライブラリの積極的な導⼊ • 新しいWebサービスの展開

Slide 26

Slide 26 text

エンジニアの協調 • フロントエンドとバックエンドの関⼼事を分 離する • 100⼈のフロントエンドエンジニア、10個の Webチームがあっても成り⽴つアーキテクチャ

Slide 27

Slide 27 text

Rearchitectの道のり

Slide 28

Slide 28 text

テーマ Monolithic to Microservices

Slide 29

Slide 29 text

なぜか • フロントエンドとバックエンドを分離する • 多サービスが協調して1ドメイン下のサービス 開発をできる基盤を整える

Slide 30

Slide 30 text

今 ϝϧΧϦ ϝϧΧϦ ϘοΫε ϝϧΧϦ ΨΠυ Ωϟϯϖʔϯ ϖʔδ #BDLFOE 'SPOUFOE #BDLFOE 'SPOUFOE #BDLFOE 'SPOUFOE #BDLFOE 'SPOUFOE single repository

Slide 31

Slide 31 text

今 • Webのすべての機能が1リポジトリに • 担当チームという概念が無く、Ownershipを 持ちづらい構造 • BackendとFrontendも同じリポジトリにあり、 責務分離がきれいにされていない

Slide 32

Slide 32 text

未来 (SBQI2- 443 ϝϧΧϦ 3&45"1* 'SPOUFOE ϝϧΧϦϘοΫε #BDLFOE4FSWFS ϝϧΧϦΨΠυ

Slide 33

Slide 33 text

未来 • 1つのサービスに1つのチームが責任を持つ • それぞれが技術選定を⾃由にできるように • デプロイ、開発すべてを⾃治する

Slide 34

Slide 34 text

今と未来のギャップを埋める

Slide 35

Slide 35 text

[WIP]初期フェーズの計画

Slide 36

Slide 36 text

[WIP]初期フェーズの計画 • BFF + Frontend • Web Gateway • Session Consistency

Slide 37

Slide 37 text

BFF + Frontend

Slide 38

Slide 38 text

なぜBFFを選択するか • 新アーキテクチャの⽬標の1つとして「フロン トエンドエンジニアの⽣産性を極限まで上げ る」 • これから複雑化していくBackendを隠蔽する ⼿段としてBFFという考え⽅を取り⼊れた

Slide 39

Slide 39 text

BFF + Frontend • Next.jsでSSR + SPA 構成に • Data resourceは GraphQLサーバ • SSR Serverより先を BFFと定義

Slide 40

Slide 40 text

責務の分離 • Frontendエンジニア はSSR Server • Backendエンジニア はGraphQL Server

Slide 41

Slide 41 text

Web Gateway

Slide 42

Slide 42 text

Web Microservices • 同⼀ドメイン下に複数のServiceを展開したい • その際RoutingやBalancingが必要になる • また、初期は新しいWebへのMigrationが必要

Slide 43

Slide 43 text

Migration • 新アーキテクチャへのMigrationはページ単位 で⾏う • Web Gatewayを⽴てて、Migrationをシーム レスに⾏えるようにする

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

特定のパスは新しい⽅方へ

Slide 46

Slide 46 text

移⾏行行前のものは すべてそのままパスする

Slide 47

Slide 47 text

Session Consistency

Slide 48

Slide 48 text

Session Consistency • Microservices間でStorageやデータの共有は ⾏わない • SessionをそれぞれのServiceで扱うことにな る

Slide 49

Slide 49 text

Spec • ログイン/アウト状態の同期 • 強制ログアウトの同期 • Be secure • 現在のWebとのセッション同期

Slide 50

Slide 50 text

Session Service • Webのセッションを管理するMicroserviceを ⽴てる • 各WebのMicroserviceはここと通信する

Slide 51

Slide 51 text

初期フェーズ

Slide 52

Slide 52 text

新しいServiceも ここを使う

Slide 53

Slide 53 text

実際にどう 設計を進めているのか

Slide 54

Slide 54 text

現場の進め⽅ • チーム内で設計、壁打ち • Microservices Platformチームに相談 • Tech lead間で相談

Slide 55

Slide 55 text

まとめ

Slide 56

Slide 56 text

メルカリWebは進化します • まずはMonolithic to Microservicesを達成す るべく既に動き出しています • また、その先の未来を⾒据えたアーキテクチャ を設計し実装しています

Slide 57

Slide 57 text

乞うご期待 • 直近は⼤規模なリプレースでなく部分的な Migrationを⾏う • ⼩さい成功を積み重ね、理想の世界とのギャッ プを少しずつ埋めていく

Slide 58

Slide 58 text

https://twitter.com/sota1235/status/934336948885381121

Slide 59

Slide 59 text

Thank you