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.5k
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
910
20220926_セキュリティチームの今_for_Drs._Prime_公開用.pdf
sota1235
0
60
再発防止策を考える技術 / #phpconsen
sota1235
10
3.6k
How to choose the best npm module for your team?
sota1235
9
520
Realtime Database for high traffic production application
sota1235
7
3.8k
インターフェース再入門 / Think Interface again
sota1235
6
10k
再発防止策を考える技術 #phpconfuk_rej
sota1235
1
1.1k
Update around Firebase #io18
sota1235
3
4.2k
Introduction for sonarwhal
sota1235
0
520
Other Decks in Technology
See All in Technology
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1k
株式会社M2X エンジニアチーム紹介資料
m2xsoftware
0
560
強いチームを夢見て-PMからSREに転身して1年の振り返り / 20240906_bengo4_sre
bengo4com
2
820
ロボットアームを遠隔制御の話 & LLMをつかったIoTの話もしたい
soracom
PRO
1
250
すぐに始めるAWSコスト削減。短期でできる改善策と長期的な運用負荷軽減への取り組み方を解説
ncdc
1
540
waitany と waitall を作った話
mrkn
0
120
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
170
効果的なオンコール対応と障害対応
ryuichi1208
4
2.3k
自社開発した大規模言語モデルをどうプロダクションに乗せて運用していくか〜インフラ編〜
pfn
PRO
22
6.5k
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
5
320
LLMに日本語テキストを学習させる意義
ksaito
13
3.7k
四国クラウドお遍路 2024 in 高知 エンディング
yukataoka
0
170
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Writing Fast Ruby
sferik
623
60k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Thoughts on Productivity
jonyablonski
66
4.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
590
The Invisible Customer
myddelton
119
13k
Happy Clients
brianwarren
96
6.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
Into the Great Unknown - MozCon
thekraken
28
1.4k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Done Done
chrislema
180
16k
YesSQL, Process and Tooling at Scale
rocio
167
14k
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