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 Microservice to 3 Microservices
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.2k
Replace wicked_pdf with puppeteer
tanakaworld
1
730
How fast "dev.to" is?
tanakaworld
2
490
Replace View of Backbone with Vue
tanakaworld
2
2k
Other Decks in Technology
See All in Technology
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Embracing the Ebb and Flow
colly
81
4.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
The Language of Interfaces
destraynor
151
23k
A better future with KSS
kneath
231
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Atom: Resistance is Futile
akmur
261
25k
Fireside Chat
paigeccino
25
2.8k
Scaling GitHub
holman
458
140k
What's new in Ruby 2.0
geeforr
338
31k
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