Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
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