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
11k
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
840
How fast "dev.to" is?
tanakaworld
2
560
Replace View of Backbone with Vue
tanakaworld
2
2.2k
Other Decks in Technology
See All in Technology
4/16/25 - SFJug - Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
2
120
Dynamic Reteaming And Self Organization
miholovesq
3
620
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
780
【Oracle Cloud ウェビナー】ご希望のクラウドでOracle Databaseを実行〜マルチクラウド・ソリューション徹底解説〜
oracle4engineer
PRO
1
100
Linuxのパッケージ管理とアップデート基礎知識
go_nishimoto
0
430
AWSの新機能検証をやる時こそ、Amazon Qでプロンプトエンジニアリングを駆使しよう
duelist2020jp
1
270
技術者はかっこいいものだ!!~キルラキルから学んだエンジニアの生き方~
masakiokuda
2
280
AIと共に乗り越える、 入社後2ヶ月の苦労と学習の軌跡
sai_kaneko
0
100
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
13
4.2k
より良い開発者体験を実現するために~開発初心者が感じた生成AIの可能性~
masakiokuda
0
210
YOLOv10~v12
tenten0727
4
970
コスト最適重視でAurora PostgreSQLのログ分析基盤を作ってみた #jawsug_tokyo
non97
1
580
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
The Pragmatic Product Professional
lauravandoore
33
6.6k
GraphQLとの向き合い方2022年版
quramy
46
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Optimizing for Happiness
mojombo
377
70k
Speed Design
sergeychernyshev
29
900
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Bash Introduction
62gerente
611
210k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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