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
個別リポジトリから Full Stack TypeScript の モノレポ(Nx)に移行した話
Search
mokoshi
June 04, 2024
Programming
0
480
個別リポジトリから Full Stack TypeScript の モノレポ(Nx)に移行した話
TSKaigi 2024 After Talk
mokoshi
June 04, 2024
Tweet
Share
More Decks by mokoshi
See All by mokoshi
ReactNativeでスケジュール帳を作っている話
mokoshi
0
330
Other Decks in Programming
See All in Programming
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
Select API from Kotlin Coroutine
jmatsu
1
230
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
520
Discover Metal 4
rei315
2
120
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
680
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
140
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
14k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
500
ニーリーにおけるプロダクトエンジニア
nealle
0
780
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Making Projects Easy
brettharned
116
6.3k
Building an army of robots
kneath
306
45k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Transcript
個別リポジトリから Full Stack TypeScript の モノレポ(Nx)に移行した話 TSKaigi 2024 After Talk
溝口 晃 @mok_oshi
自己紹介 名前 溝口 晃 (もこし) X: @mok_oshi 所属 techners株式会社 やってること
美容サロン向けの顧客・予約管理システム KaruteKun 技術 TypeScript / ReactNative / Next.js / Node / express ... など
None
• フル TypeScript で構築(Node.js / React / React Native) •
バックエンド、アプリ、 Web、など7個ほどのアプリケーションが存在 • これらを個別リポジトリからモノレポに統合した話をします!
API サーバー (Node.js) モノレポ移行前 • 複数のアプリケーションを個別のリポジトリで管理 • テスト・デプロイフローも別々に作成 ◦ CI/CD
は GitHub Actions で構築 Webアプリ (React) ネイティブアプリ (React Native) 社内ツール (React) … CI/CD CI/CD CI/CD CI/CD …
API サーバー (Node.js) モノレポ移行前の課題感 • 開発効率の悪さ ◦ あるフィーチャーを実装するときに ... ▪
リポジトリAで PR を作成してマージ → デプロイ ▪ リポジトリBで RP を作成してマージ → デプロイ ▪ … • 重複コードがコピペで量産される ◦ 特に Web アプリとネイティブアプリは機能がかぶることも 多く、重複コードが乱立 ◦ 言語は TypeScript で統一されていたので、コードの共有 はずっとやりたかった Webアプリ (React) ネイティブアプリ (React Native) 社内ツール (React) … CI/CD CI/CD CI/CD CI/CD …
モノレポ移行を決断(2021年) • 当時はまだチームに知見がなかったが、えいやで決断 ◦ 手探りで技術調査... ◦ 新興で勢いがありそうに見えた Nx を選定 ▪
(turborepo は当時まだなかったはず) • Nx では大まかに2種類の構成がある (package-based と integrated) ◦ integrated の形式で移行
Nx の package-based と integrated の補足 package-based • パッケージマネージャで提供されているワークスペースの拡張 •
package.json を介して他モジュールを参照 integrated • TypeScript の path alias で他モジュールを参照 • 一つの package.json で依存関係を管理(Single Version Policy)
Nx の package-based と integrated package-based • パッケージマネージャで提供されているワークスペースの拡張 • package.json
を介して他モジュールを参照 integrated • TypeScript の path alias で他モジュールを参照 • 一つの package.json で依存関係を管理(Single Version Policy)
Nx の package-based と integrated package-based • パッケージマネージャで提供されているワークスペースの拡張 • package.json
を介して他モジュールを参照 integrated • TypeScript の path alias で他モジュールを参照 • 一つの package.json で依存関係を管理(Single Version Policy)
Nx の package-based と integrated package-based • パッケージマネージャで提供されているワークスペースの拡張 • package.json
を介して他モジュールを参照 integrated • TypeScript の path alias で他モジュールを参照 • 一つの package.json で依存関係を管理(Single Version Policy) Nx-way に乗るためにこちらを選択
移行作業(リポジトリの新設) • 新しいリポジトリを作成し、既存リポジトリのコード をディレクトリに分けて移植 ◦ (コミットログは維持する形で移行) apps/ server/ app/ web/
ope/ … API サーバー (Node.js) Webアプリ (React) ネイティブアプリ (React Native) 社内ツール (React) …
移行作業(依存関係) • プロジェクト横断で一つの package.jsonに なる • 各リポジトリの package.json を 一つに
マージ • lock ファイルは作り直し...! → ライブラリのバージョンを揃えつつ、古いもの は一気にアップデート apps/ server/ app/ web/ ope/ … API サーバー Webアプリ ネイティブアプリ 社内ツール … package.json - yarn.lock package.json - yarn.lock package.json - yarn.lock package.json - yarn.lock package.json yarn.lock [NEW]
移行作業 • テスト・ビルドなどのコマンド整備 • デプロイワークフローの整備 apps/ server/ app/ web/ ope/
… package.json yarn.lock Lint $ nx lint server Format $ nx fmt server Test $ nx test server Build $ nx build server Build $ nx build web …
移行してみて • 開発者体験が良くなった! ◦ 開発時のスイッチングコストの減少(異なるリポジトリ間を移動して開発したり...レビューのため に異なるリポジトリを交互に確認したり...) ◦ 環境構築が容易に • 少しずつ共通コードを切り出してモジュール化している
◦ 責務を意識。コードの依存関係が少しずつクリーンになっていく ▪ グラフ化もできる ◦ Nx の差分検知(affected)やキャッシュ機能によってテストの効率化 • tRPCが導入できた!(意図せぬ恩恵でした) • Nx の変更に追従するのが大変...