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
490
個別リポジトリから 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
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1.1k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
210
AIともっと楽するE2Eテスト
myohei
8
3k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
410
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building Applications with DynamoDB
mza
95
6.5k
The Invisible Side of Design
smashingmag
301
51k
Agile that works and the tools we love
rasmusluckow
329
21k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Bash Introduction
62gerente
613
210k
Music & Morning Musume
bryan
46
6.7k
Embracing the Ebb and Flow
colly
86
4.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 の変更に追従するのが大変...