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
100
個別リポジトリから 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
190
Other Decks in Programming
See All in Programming
Androidアプリのテスト駆動開発入門
tonionagauzzi
0
150
凝集性から考えるLaravelのmiddleware、routingに書くか? Policyに書くか?
newnomad
1
110
あらゆるアプリをCompose Multiplatformで書きたい! -ネイティブアプリの「あの機能」を私たちはどう作るか-
subroh0508
1
660
日付と闘う-和暦は難しい / vs Dates - Japanese Chronology is Difficult
wkwkhautbois
0
200
Towards Structured Data: LLMs from Prototype to Production
inesmontani
PRO
1
160
エンジニア向け 株式会社バックテック 会社紹介資料 / for Engineers
backtech
1
620
Kotlin Collection関数をマスター
masayukisuda
0
2k
Google I/O 2024 Android 開発ツールの新機能
tonionagauzzi
0
190
スタートアップ企業が実践する「身の丈スクラム」の現在地 / Current State of 'Right-Sized Scrum' Practices in Startups
ar_tama
11
3.4k
2024/7/11発刊!開発生産性の教科書がざっとわかるスライド 2024/06/20 / A Brief Overview of the Textbook on Development Productivity
ma3tk
0
110
過去や未来を扱うのは難しい? 過去と未来に立ち向かうための勘所
shinpeim
2
350
マイクロサービス基盤にフルマネージドサービスではなくKubernetesを選択する理由
bgpat
8
1.9k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
423
64k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.8k
Six Lessons from altMBA
skipperchong
22
3.2k
Raft: Consensus for Rubyists
vanstee
133
6.4k
Ruby is Unlike a Banana
tanoku
96
10k
How to Ace a Technical Interview
jacobian
273
22k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Designing for humans not robots
tammielis
247
25k
It's Worth the Effort
3n
180
27k
Rails Girls Zürich Keynote
gr2m
91
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
119
18k
Become a Pro
speakerdeck
PRO
14
4.7k
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 の変更に追従するのが大変...