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
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.3k
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
710
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.2k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
840
プロセス改善による品質向上事例
tomasagi
1
1.5k
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
220
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
710
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
350
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
490
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Why Our Code Smells
bkeepers
PRO
335
57k
How STYLIGHT went responsive
nonsquared
98
5.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Code Reviewing Like a Champion
maltzj
521
39k
Building Your Own Lightsaber
phodgson
104
6.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
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