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
Nuxt マイクロサービスを 3つに分割した話 / Split A Nuxt Microser...
Search
tanakaworld
August 26, 2019
Technology
3
12k
Nuxt マイクロサービスを 3つに分割した話 / Split A Nuxt Microservice to 3 Microservices
NuxtMeetUp#9 オールスターズ
https://nuxt-meetup.connpass.com/event/135514
#nuxtmeetup
tanakaworld
August 26, 2019
Tweet
Share
More Decks by tanakaworld
See All by tanakaworld
Automatic Code Generation for SPA
tanakaworld
2
1.3k
Replace wicked_pdf with puppeteer
tanakaworld
1
890
How fast "dev.to" is?
tanakaworld
2
580
Replace View of Backbone with Vue
tanakaworld
2
2.3k
Other Decks in Technology
See All in Technology
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
220
事業特性から逆算したインフラ設計
upsider_tech
0
220
o11yツールを乗り換えた話
tak0x00
2
1.6k
メルカリIBIS:AIが拓く次世代インシデント対応
0gm
2
440
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
hachi_eiji
0
260
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
kmiya84377
1
160
MCPサーバーを活用したAWSコスト管理
arie0703
0
120
JAWS-UG のイベントで使うハンズオンシナリオを Amazon Q Developer for CLI で作ってみた話
kazzpapa3
0
120
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
vaaaaanquish
34
16k
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
650
生成AI活用のROI、どう測る? DMM.com 開発責任者から学ぶ「AI効果検証のノウハウ」 / ROI of AI
i35_267
3
120
信頼できる開発プラットフォームをどう作るか?-Governance as Codeと継続的監視/フィードバックが導くPlatform Engineeringの進め方
yuriemori
1
120
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Fireside Chat
paigeccino
39
3.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Rails Girls Zürich Keynote
gr2m
95
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Invisible Side of Design
smashingmag
301
51k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
A Modern Web Designer's Workflow
chriscoyier
695
190k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
For a Future-Friendly Web
brad_frost
179
9.9k
Transcript
Nuxt マイクロサービスを 3つに分割した話 NuxtMeetUp#9 オールスターズ 2019/08/26 @_tanakaworld
About Me • Twitter: @_tanakaworld • GitHub: tanakaworld • Software
Engineer (Frontend) ◦ CSTool ◦ MSTool
マイクロサービスを3つに分割した話 共通化 分割
1つのアプリケーションを分割するための コンポーネント管理方法 共通化 http://bit.ly/2zkXMU1
1. メルペイの管理画面 2. 背景 3. 方針 4. 配信環境のポイント 5. まとめ
今日は分割について話します 分割
メルペイの管理画面
メルペイの管理画面 CSTool MSTool Settings • Customer Support • お客さまの管理機能 •
登録情報 • 取引情報 • あと払い • クーポン • Merchant Support • 加盟店さまの管理機能 • 審査機能 • 店舗情報 • 取引情報 • オペレータ管理 • 権限
メルペイの管理画面 CSTool MSTool Settings • Customer Support • お客さまの管理機能 •
登録情報 • 取引情報 • あと払い • クーポン • Merchant Support • 加盟店さまの管理機能 • 審査機能 • 店舗情報 • 取引情報 • オペレータ管理 • 権限
初期のアーキテクチャ API Gateway https://admin.xxx.com Nuxt (SSR) Nginx
デプロイフロー ••• ••• Build + Push Docker Image Deploy by
Spinnaker GitHub Repository Nginx Nuxt (SSR) GKE Nginx Node.js
分割に至る背景
プロダクトチームが2つに分離された • 当初は1つのプロダクトチームだった • CSTool、MSTool でプロダクトチームが分離された • 異なる PdM、Operation •
やりたいこと・時期、プロジェクトの進め方が異なる
様々な課題 • 一つのアプリケーションに複数チームからの要望が来る • 変更が互いに影響してしまう • 複数の機能開発が並行して進み、feature ブランチが混在 • Conflict
してマージできなくなる(機能を隠すフラグまみれ) • 毎週1・2回リリース • QAコスト増大 • スケジュール調整が手間 •••
分割の方針
前提条件 • 独立した開発・リリースが行えること • メルペイ全体で技術的負債解消の時間を確保する方針に • 対応期間は2ヶ月 制約 • デザインは共通
→ 共通 Component リポジトリを使う • 配信ドメインは変更しない • GCP Project は共通
プロダクトチーム軸 + 機能軸で分割 CSTool MSTool Common
分割後のアーキテクチャ API Gateway https://admin.xxx.com /cs /ms other CS MS Common
request path でサービスを分岐 • SSR リクエスト /cs → CS /ms
→ MS / → Common • Assets 取得リクエスト /cs/assets → CS /ms/assets → MS /common/assets → Common
1. pages に階層構造をつくる • e.g. https://admin.xxx.com/cs • 各 Nuxt アプリは他の
Nuxt アプリと prefix が被らないようにする
2. publicPath を変更 • https://nuxtjs.org/api/configuration-build/#publicpath • /_nuxt/aaaaa.js → /cs/assets/aaaaa.js //
nuxt.config.ts if (process.env.NODE_ENV === 'production') { // default: '/_nuxt' config.build.publicPath = '/cs/assets/'; }
/cs でリクエストされた結果の HTML
配信環境のポイント
2段階リリース • Step1: Nginx で routing ◦ 新 Nuxt *
3、新 Nginx * 3 ◦ いつ API Gateway がリリースされてもいい状態にする • Step2: API Gateway で routing ◦ Step1 でリリースされた 新 Nginx に接続してもらう
Step1: Nginx で routing
Canary Release • ダウンタイムを極力短くするため • routing 設定に注意が必要 • SSR 時のリクエストと
assets 取得の リクエストが同じ Nginx を通過すると は限らないので、それらを考慮する Old CS MS Common ••• /cs /ms Canary other
server { location /_nuxt/ { try_files $uri $uri/ @node; }
location /cs { try_files $uri $uri/ @node-cs; } location /ms { try_files $uri $uri/ @node-ms; } location / { try_files $uri $uri/ @node-common; } } 新 Nginx の routing • SSR はすべて新 Nuxt へ routing • 旧 Nuxt の assets リクエストも routing する Old CS MS Common •••
server { location /cs/assets { try_files $uri $uri/ @node-cs; }
location /ms/assets { try_files $uri $uri/ @node-ms; } location /common/assets { try_files $uri $uri/ @node-common; } location / { try_files $uri $uri/ @node; } } 旧 Nginx の routing • SSR は旧 Nuxt にのみ routing • 新 Nuxt の assets リクエストも routing する Old CS MS Common •••
完了したら古い環境は停止 API Gateway Old CS MS Common ••• /cs /ms
Canary other
Step2: API Gateway で routing
API Gateway のリリース API Gateway CS MS Common /cs /ms
other
旧 Nginx は停止 API Gateway CS MS Common /cs /ms
other
まとめ
• プロダクトチームの粒度にあわせてマイクロサービスを分割 • request path に応じてマイクロサービスを分岐 まとめ API Gateway /cs
/ms other
• Pros ◦ 独立して開発・運用・リリースができるようになった ◦ 同じドメインで複数 Nuxt アプリ ▪ 新しいマイクロサービスに横展開
▪ 肥大化した機能を切り出す • Cons ◦ 共通化できていない対象の更新が 3倍 Pros / Cons
Thanks