Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Road to migrate JP Web as a microservice
Search
Sota Sugiura
August 06, 2018
Technology
4
1.6k
Road to migrate JP Web as a microservice
Mercari Tech Meetup #1 〜 Microservices 始めました! 〜 にて発表しました
https://techplay.jp/event/687031
Sota Sugiura
August 06, 2018
Tweet
Share
More Decks by Sota Sugiura
See All by Sota Sugiura
内製したSlack Appで頑張るIncident Response@Waroom Meetup #1 / Incident Response with Slack App in 10X
sota1235
0
1.3k
20220926_セキュリティチームの今_for_Drs._Prime_公開用.pdf
sota1235
0
97
再発防止策を考える技術 / #phpconsen
sota1235
10
3.8k
How to choose the best npm module for your team?
sota1235
9
570
Realtime Database for high traffic production application
sota1235
7
3.9k
インターフェース再入門 / Think Interface again
sota1235
6
10k
再発防止策を考える技術 #phpconfuk_rej
sota1235
1
1.2k
Update around Firebase #io18
sota1235
3
4.3k
Introduction for sonarwhal
sota1235
0
560
Other Decks in Technology
See All in Technology
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
240
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
1.3k
Larkご案内資料
customercloud
PRO
0
650
N=1から解き明かすAWS ソリューションアーキテクトの魅力
kiiwami
0
120
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
2k
AndroidデバイスにFTPサーバを建立する
e10dokup
0
250
Platform Engineeringは自由のめまい
nwiizo
4
2.1k
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
8
1.4k
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
240
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
130
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
330
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
13
5.1k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Optimizing for Happiness
mojombo
376
70k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Unsuck your backbone
ammeep
669
57k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
320
The Language of Interfaces
destraynor
156
24k
Statistics for Hackers
jakevdp
797
220k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
410
Transcript
Road to migrate JP web as microservices @sota1235 2018/8/6 Mercari
Tech Meetup #1
console.log(me); • Sota Sugiura(きりん) • @sota1235 • Web Rearchitect, Tech
Lead • 将来の夢はJavaScript になることです
Webの話をします
Agenda • メルカリWebについて • JP Web Rearchitectについて • Rearchitectの道のり
メルカリWebについて
おかげさまで5周年 https://about.mercari.com/press/news/article/20180702_mercarinumbers/
⼀⽅のWeb https://speakerdeck.com/yuisakamoto/apurihuasutofalseying-dewan-zhang-ruwebfalsehua
これまでのメルカリの事業 • ⾮連続な成⻑のための開発スピード • スマートフォンで売る/買うという体験 • 選択と集中による開発リソースの配分
これまでのメルカリWeb • 新たな顧客層へのサービス提供 • SNSシェアやSEO等、Webへの展開 • ⼀部、WebViewとブラウザで両⽴するページ の展開
現状のメルカリWebの課題
アプリとの機能差分 アーキテクチャ
アプリとの機能差分 アーキテクチャ アプリとの機能差分
アプリとの機能差 • Webは必要最低限の機能のみ実装されている • 購⼊/出品/検索 • いくつかの機能はアプリへ誘導している • 配送機能(⼀部)、オファー、フォロー etc…
全部コピー、が正解ではない • アプリ、Webそれぞれ良さがある • Webで活きるものは実装したい • 逆にWebだけの機能があってもいい
アプリとの機能差分 アーキテクチャ アーキテクチャ
アーキテクチャ • Monolithicな構成になっている • フロントエンドエンジニアが触りづらい • BackendのMicroservices化についていくのが 難しい
アーキテクチャ • dietcube(hosted by PHP 7.1) • jQuery • React
• ⼤抵のviewはTwigでrenderingされる
このままでよいのか
よくない • Webもメルカリの重要なファクター • ブラウザ上でのお客さまの体験の最適化 • AMP化によるアクセスの爆増や細かい改修に よる売上の向上等、まだまだポテンシャルを 秘めている
JP Web Rearchitect team
JP Web Rearchitectについて
Goal
新アーキテクチャの構築
新アーキテクチャの⽬的 • 今後のメルカリWebの進化を促進する • 数多くのチーム、エンジニアの協調
進化の促進 • やりたいことは⼭程ある • 新しい技術的チャレンジをする⼟壌を整える • PWA化や新ライブラリの積極的な導⼊ • 新しいWebサービスの展開
エンジニアの協調 • フロントエンドとバックエンドの関⼼事を分 離する • 100⼈のフロントエンドエンジニア、10個の Webチームがあっても成り⽴つアーキテクチャ
Rearchitectの道のり
テーマ Monolithic to Microservices
なぜか • フロントエンドとバックエンドを分離する • 多サービスが協調して1ドメイン下のサービス 開発をできる基盤を整える
今 ϝϧΧϦ ϝϧΧϦ ϘοΫε ϝϧΧϦ ΨΠυ Ωϟϯϖʔϯ ϖʔδ #BDLFOE 'SPOUFOE
#BDLFOE 'SPOUFOE #BDLFOE 'SPOUFOE #BDLFOE 'SPOUFOE single repository
今 • Webのすべての機能が1リポジトリに • 担当チームという概念が無く、Ownershipを 持ちづらい構造 • BackendとFrontendも同じリポジトリにあり、 責務分離がきれいにされていない
未来 (SBQI2- 443 ϝϧΧϦ 3&45"1* 'SPOUFOE ϝϧΧϦϘοΫε #BDLFOE4FSWFS ϝϧΧϦΨΠυ
未来 • 1つのサービスに1つのチームが責任を持つ • それぞれが技術選定を⾃由にできるように • デプロイ、開発すべてを⾃治する
今と未来のギャップを埋める
[WIP]初期フェーズの計画
[WIP]初期フェーズの計画 • BFF + Frontend • Web Gateway • Session
Consistency
BFF + Frontend
なぜBFFを選択するか • 新アーキテクチャの⽬標の1つとして「フロン トエンドエンジニアの⽣産性を極限まで上げ る」 • これから複雑化していくBackendを隠蔽する ⼿段としてBFFという考え⽅を取り⼊れた
BFF + Frontend • Next.jsでSSR + SPA 構成に • Data
resourceは GraphQLサーバ • SSR Serverより先を BFFと定義
責務の分離 • Frontendエンジニア はSSR Server • Backendエンジニア はGraphQL Server
Web Gateway
Web Microservices • 同⼀ドメイン下に複数のServiceを展開したい • その際RoutingやBalancingが必要になる • また、初期は新しいWebへのMigrationが必要
Migration • 新アーキテクチャへのMigrationはページ単位 で⾏う • Web Gatewayを⽴てて、Migrationをシーム レスに⾏えるようにする
None
特定のパスは新しい⽅方へ
移⾏行行前のものは すべてそのままパスする
Session Consistency
Session Consistency • Microservices間でStorageやデータの共有は ⾏わない • SessionをそれぞれのServiceで扱うことにな る
Spec • ログイン/アウト状態の同期 • 強制ログアウトの同期 • Be secure • 現在のWebとのセッション同期
Session Service • Webのセッションを管理するMicroserviceを ⽴てる • 各WebのMicroserviceはここと通信する
初期フェーズ
新しいServiceも ここを使う
実際にどう 設計を進めているのか
現場の進め⽅ • チーム内で設計、壁打ち • Microservices Platformチームに相談 • Tech lead間で相談
まとめ
メルカリWebは進化します • まずはMonolithic to Microservicesを達成す るべく既に動き出しています • また、その先の未来を⾒据えたアーキテクチャ を設計し実装しています
乞うご期待 • 直近は⼤規模なリプレースでなく部分的な Migrationを⾏う • ⼩さい成功を積み重ね、理想の世界とのギャッ プを少しずつ埋めていく
https://twitter.com/sota1235/status/934336948885381121
Thank you