サーバーサイドもTSにしたらモノレポになった.pdf

Transcript

1. サーバーサイドもTSにしたら モノレポになった 営業製作所 白石 卓馬
2. 会社紹介：営業製作所 ・設立 2020年4月 ・本社 大阪 (肥後橋駅 徒歩3分) ・従業員数 150名弱 (2024年4月時点) ・目的 日本の製造業を支える ・特徴 泥臭い中にこそ本質がある
3. 自己紹介 ・なまえ 白石 卓馬 (gizm000) ・出身地 大阪 ・職種 ソフトウェアエンジニア ・経歴 SIer → 受託 → SaaS
4. 営業製作所のざっくり技術スタック ・フロントエンド：Next.js ・サーバーサイド：NestJS ・IasC：Terraform (CDKじゃないヨ) 業務で使う80%以上がTypeScript
5. サーバーサイドで TS書いてる人？
6. プラクティス不足し ていませんか？
7. 弊社で採用してい る手法を紹介させ てもらいます！
8. インフラ紹介(一部)
9. インフラ紹介(一部) ・複数アプリケーションが存在
10. インフラ紹介(一部) ・複数アプリケーションが存在 ・データベースはひとつ
11. インフラ紹介(一部) ・複数アプリケーションが存在 ・データベースはひとつ 処理を共通化したい
12. npm workspace ・ほぼ設定いらずでモノレポが作れる ・パッケージ間での相互参照が簡単にできる ・npm package 作るとかめんどくさいので助かる ✨ ・ビルドの依存関係ガーとか細かいことはそんなにできない ・裏を返すと引き剥がしやすい ・大きくなったらTurboとかにお引越しも検討 🚚
13. npm workspace product ┗ node_modules ┗ packages ┗ frontend ┗ backend ┗ schema ┗ and more
14. npm workspace product ┗ node_modules ┗ packages ┗ frontend ┗ backend ┗ schema ┗ and more ← node_modulesに各パッケージへの シンボリックリンクが生成される
15. npm workspace product ┗ node_modules ┗ packages ┗ frontend ┗ backend ┗ schema ┗ and more ← node_modulesに各パッケージへの シンボリックリンクが生成される `import { hoge } from @product/schema` これで他パッケージから参照可能 ✨
16. npm workspace product ┗ node_modules ┗ packages ┗ validators ┗ utilities ┗ tsconfig ┗ eslint ← zodで記述した共通バリデーション frontend/backendで共通利用
17. npm workspace product ┗ node_modules ┗ packages ┗ validators ┗ utilities ┗ tsconfig ┗ eslint ← 各種パッケージで共通のtsconfigを用意 front, back間で共通はさせない方がよいかも...
18. NestJS モノレポモード ・NestJSではモノレポモードというものがある ・複数のアプリケーションを構築できる e.g. GraphQL Server, REST API Server, Queue worker, etc…. ・共通処理(ユーティリティ、ドメインロジック)を再利用しやすい
19. NestJS モノレポモード product ┗ node_modules ┗ packages ┗ frontend ┗ backend ┗ schema ┗ and more
20. NestJS モノレポモード product ┗ node_modules ┗ packages ┗ frontend ┗ backend ┗ schema ┗ and more ← この配下でネストさせられる 👀
21. NestJS モノレポモード backend ┗ apps ┗ main ┗ worker ┗ other ┗ shared ┗ core ┗ infrastructure ┗ utils
22. NestJS モノレポモード backend ┗ apps ┗ main ┗ worker ┗ other ┗ shared ┗ core ┗ infrastructure ┗ utils ← ひとつのNestJSプロジェクトに格納可能
23. NestJS モノレポモード backend ┗ apps ┗ main ┗ worker ┗ other ┗ shared ┗ core ┗ infrastructure ┗ utils ← appsで共通利用可能なドメインロジック
24. NestJS モノレポモード backend ┗ apps ┗ main ┗ worker ┗ other ┗ shared ┗ core ┗ infrastructure ┗ utils ← AWSクライアントなどのインフラ層
25. NestJS モノレポモード backend ┗ apps ┗ main ┗ worker ┗ other ┗ shared ┗ core ┗ infrastructure ┗ utils ← ドメインの関係ないユーティリティ
26. NestJS モノレポモード backend ┗ apps ┗ main ┗ worker ┗ other ┗ shared ┗ core ┗ infrastructure ┗ utils ← ドメインの関係ないユーティリティ npm workspaceでも 同じことできそう 🤔
27. NestJS モノレポモード ・npm workspace との違いは？ ・NestJS モノレポモードではnpm packageの単位として同一になる ・つまり package.jsonは共有 　→ package.jsonを分離したいなら分けた方がよい ・何が嬉しい？ ・npm workspaceで複数のNestJSアプリを作らなくてよい 　→ 認知負荷の軽減
28. まとめ 📚 ・サーバーサイドをTSにしたときのプラクティスがもっと欲しい！ Ruby, Java, PHP のように枯れていない・・・ ・営業製作所では以下を使って構成している ・npm workspace ・モジュラーモノリスのような構成が作りやすい ・NestJS モノレポモード ・NestJSに閉じるなら、npm workspaceよりカンタン
29. さいごに ・他企業との合同勉強会を企画したい ❗ → X, LinkedIn などで気軽にご連絡ください ・絶賛採用活動中です❗ → X, LinkedIn, Green, LAPRAS, … 　ご応募お待ちしております 😆