SaaSのフロントエンドをモノレポ化した話

Transcript

1. © 2023 Anti-Pattern Inc. All rights reserved. SaaSのフロントエンドをモノレポ化した話 2023/02/22 株式会社アンチパターン 守安勇⼈
2. ⾃⼰紹介 守安勇⼈(Yuto MORIYASU) 株式会社アンチパターン 役割︓SaaSus Platformのフロントエンド、バックエンドエンジニア 経歴︓2021年より株式会社アンチパターンでインターンシップ 2022年より、同社のSaaSus Platformの開発に参加 現在はリードフロントエンドエンジニアとして開発・マネジメントに従事 ⼤学3年⽣。映画が好きです。
3. © 2023 Anti-Pattern Inc. All rights reserved. SaaSus Platform 概要 SaaSus Platform SaaS の開発と運⽤のサポートをする SaaS 2022年12⽉に正式版リリース SaaSに共通で必要なテナント管理、認証・認可、 請求などの機能を提供 SaaSus Platform利⽤者はSaaSの価値に直結する開 発に集中できる
4. © 2023 Anti-Pattern Inc. All rights reserved. モノレポ化の背景
5. © 2023 Anti-Pattern Inc. All rights reserved. SaaSのフロント事情 SaaSって、複数の種類の画⾯(フロントエンド)がありますよね︖ たとえば、 • ユーザーが操作する画⾯(これがメイン) • ユーザーの管理者(テナント管理者)だけが操作する画⾯ • SaaS事業者の管理者(カスタマーサポートなど)向け画⾯ • 場合によっては、 SaaS事業者のエンジニア向け画⾯ などなど
6. © 2023 Anti-Pattern Inc. All rights reserved. モノレポ化の背景 SaaSus Platformのこれまでの画⾯とリポジトリ構成 • SaaS共通画⾯（Next.js, MUI） • SaaS開発コンソール（Next.js, MUI） • SaaS運⽤コンソール（Next.js, MUI） • UIライブラリ開発⽤モノレポ • UIライブラリ （Next.js, MUIでnpmパッケージっぽく） • デザインドキュメント （Next.js, MUI） SaaS開発コンソール SaaS運⽤コンソール
7. © 2023 Anti-Pattern Inc. All rights reserved. モノレポ化の背景 複数のリポジトリを管理する際の問題点 • 変更の反映が⾯倒 • APIの変更 • API定義が変わったら、2つのリポジトリにPRを出す • 共有UIライブラリの変更 • 2つのリポジトリでUIライブラリをアップデート • E2Eテストの変更 • こちらも2つのリポジトリでPRを出す • ISSUEとPRの量が増える • ISSUEとPRが 1対1 になるようにしているため • ⼀貫性が取れなくなる
8. © 2023 Anti-Pattern Inc. All rights reserved. リポジトリの変更を容易にしたい
9. © 2023 Anti-Pattern Inc. All rights reserved. モノレポ化の⽬的 リポジトリを⼀つにまとめると… • APIや共有UIライブラリの変更を⼀気に反映できる • ISSUEやPRが⼀つにまとまる • 共通部分が⾒えやすくなる んじゃないか︖ そして、DX (Developer Experience) を向上させたい…! その結果、開発スピードが上がり、さらなる価値を提供できるのでは
10. © 2023 Anti-Pattern Inc. All rights reserved. モノレポ化への道のり
11. © 2023 Anti-Pattern Inc. All rights reserved. モノレポ化への道のり モノレポ管理ツールには Lerna を採⽤（https://lerna.js.org/） • 共有のUIライブラリは Lerna をすでに使っていた • npm パッケージの開発に向いているツール • UIライブラリは元々 npm パッケージっぽく作っていた • 複数の npm スクリプトを⼀回で実⾏できる • 複数の Next.js プロジェクトを⼀気に⽴ち上げたい
12. © 2023 Anti-Pattern Inc. All rights reserved. モノレポ化への道のり これからのフロントエンドの構成 • フロントエンドモノレポ • SaaS開発コンソール（Next.js, MUI） • SaaS運⽤コンソール（Next.js, MUI） • 共有UIライブラリ（Next.js, MUI） • デザインドキュメント（Next.js, MUI） • E2Eテスト⽤パッケージ（Cypress） これまでフロントエンドの構成 • SaaS開発コンソール（Next.js, MUI） • SaaS運⽤コンソール（Next.js, MUI） • UIライブラリ開発⽤モノレポ • UIライブラリ （Next.js, MUIでnpmパッケージっぽく） • デザインドキュメント （Next.js, MUI）
13. モノレポ化への道のり モノレポ化の際に考慮したこと • tsconfig の統⼀ • Linter の設定の統⼀ • CI/CD の調整 • npm スクリプトの整理 • Node バージョン管理（Volta）
14. モノレポ化への道のり tsconfig の統⼀ • ルートに tsconfig.base.json を作成して共通部分をまとめる • 各パッケージの tsconfig.json でルートの tsconfig.base.json を extends • 個別の設定は各パッケージで上書き root/tsconfig.base.json root/packages/hoge/tsconfig.json ベースのtsconfigを参照
15. モノレポ化への道のり Linter の統⼀ • ESLint, Prettier を使⽤ • ルートに .eslintrc.json を配置して、各パッケージで extends • VSCode の設定は “eslint.workingDirectories”: [{“mode”: “auto”}], とすることで、各パッケージの .eslintrc.json を参照。 root/.eslintrc.json root/packages/hoge/.eslintrc.json ルートのeslintrcを参照
16. モノレポ化への道のり CI/CD の調整 • CI/CD には GitHub Actions を使⽤している • ユニットテスト • ワークフローのトリガーに paths を指定することで、 特定のパッケージに変更があったときのみ実⾏ • E2Eテスト • E2Eテスト⽤のパッケージを作成して cron で定期実⾏ • デプロイ • パッケージごとにワークフローを作成
17. モノレポ化への道のり npm スクリプトの整理 • ルートの package.json に lerna run コマンドを集約 • ルートで yarn dev や yarn test が実⾏できる • lerna run dev --stream --parallel とすると、 全パッケージの dev コマンドが実⾏される • ディレクトリの移動が無くなり、CI/CDも書きやすくなる
18. © 2023 Anti-Pattern Inc. All rights reserved. モノレポ化の結果…
19. モノレポ化の結果 • 変更の反映がしやすくなった • TSやLinterの設定が統⼀できた • ISSUEやPRの数が減ってスッキリ 結果的に開発スピードも上がる予定!! モノレポへの移⾏は近⽇完了予定
20. モノレポ化の結果 今後の課題点 • 共通化できていないところがまだある • Next.js や TypeScript, React などのバージョンを合わせる • パッケージのバージョン管理 開発者からのフィードバックも受けながら改善していく!!
21. © 2023 Anti-Pattern Inc. All rights reserved. “⽇本のソフトウェアエンジニアを 憧れの職業へ” ご清聴ありがとうございました。