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
110
個別リポジトリから 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
Kotlin Coroutinesで共有リソースに正しくアクセスする
moriatsushi
5
2.2k
JJUG CCC 2024 Spring自動アップグレードを夢見て、Amazon Q Developer使ってみた
toricky6
2
190
IaCにおけるテスト考察 / Tests in IaC
linyows
2
230
C++ MIX #11 これどう読むの...?
5mingame2
0
190
高品質と高スピードを両立させるテストアプローチ/Test Approach that Improves Quality and Agility Together
goyoki
8
2k
良いテストコードのために悪いテストコードを理解する - 不安定なテスト編: iOSアプリ開発ユニットテストの場合
yimajo
19
4.3k
コンテナと文字列の中間インタフェースspanとstring_view
faithandbrave
1
200
ドラ🔵もんでDIを学ぶ
tomo1227
0
4.7k
技術サポートでよく見かけるパターンと便利な活用方法
tamai_63
0
170
Androidアプリのテスト駆動開発入門
tonionagauzzi
0
160
GoogleI/O2024 LT報告会資料
shinsukefujita1126
0
190
プログラミングスクールのつながりがキャリアにつながるのかもしれない話 / Connections at programming schools may lead to a career
aiandrox
0
290
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
10
3.7k
The Cult of Friendly URLs
andyhume
74
5.8k
What's new in Ruby 2.0
geeforr
338
31k
StorybookのUI Testing Handbookを読んだ
zakiyama
14
4.8k
The Power of CSS Pseudo Elements
geoffreycrofte
63
5.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
15
1.6k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.8k
How to name files
jennybc
66
95k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Practical Orchestrator
shlominoach
184
9.9k
Speed Design
sergeychernyshev
3
150
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 の変更に追従するのが大変...