こんにちは。株式会社ビデオリサーチ ITサービス推進ユニットのキクチです。
初回ポストに引き続きまして、この記事では私が開発で携わる「枠ファインダ」のプロジェクトで採用している技術スタックの一例と、どのような理由や基準で技術選定を行ったのかについてご紹介させて頂きます💁♂️
技術スタック
開発言語
TypeScript
開発言語はバックエンド/フロントエンド共通でTypeScriptを採用しています。
バックとフロントの開発言語を統一することによって、学習コストやスイッチングコストを下げ、開発リソースを柔軟に調整できるようにすることが狙いです。
技術的な側面では、ドメイン駆動設計（DDD）との親和性が高い点も理由の一つです。私たちのプロジェクトではDDDを開発手法として採用しており、TypeScriptの型安全性と可読性が非常に有用です。
バックエンド
Node.js / NestJS
Node.jsフレームワークの中でTypeScriptをサポートしているNestJSを採用しています。
対抗馬の筆頭であるExpressが柔軟性に優れたフレームワークである一方、NestJSは事前に用意された構成に従って開発を進めることができ、実装者間でのコーディングの作法の差異を最小限に抑えることができるため、チーム開発における保守性の向上が期待できます。
また、DI（依存性注入）によって依存関係をモックしやすくテストが書きやすい、周辺のモジュールが整っていてコアの開発に集中できる、等の様々なメリットがあります。
MySQL / Type ORM
TypeScript によるインターフェース定義との相性が良く、NestJSからも扱いやすいことからTypeORMを採用しています。
OpenAPI(Swagger)
APIのドキュメンテーションとしてOpenAPI（Swagger）を採用しています。
Controller層からAPIドキュメントを自動生成し、APIのエンドポイント、データ形式、認証、エラーハンドリングなどの情報を宣言的に伝えることができます。
また、ドキュメント上の型定義をTypeScriptの型情報で強制することにより、APIリクエストおよびレスポンスに関する型安全性が保たれます。
Passport.js
後述する、認可のバックエンド実装にnode.jsの認証用ミドルウェアであるPassport.jsを採用しています。
フロントエンド
React
すべてのページをReactのSingle Page Applications(SPA)で開発しています。
Vueも選択肢の候補として挙がりましたが、Reactを採用した理由として、コンポーネント化の容易さ、Virtual DOMの採用による設計と速度の両立などが挙げられます。
MUI (Material-UI)
UIコンポーネントライブラリであるMUI(旧Material-UI)を使用して、スタイリングを行っています。
Reactのコンポーネントライブラリの中で、おそらく最も多くの利用者に支持されており、技術的に確立されています。さらに、代表的なデザインツールであるFigma、Adobe XD、Sketchとの統合ツールも提供されており、導入も容易です。
Figma
画面のデザインおよびプロトタイピングにFigmaを使用しています。
初期の画面設計段階でインタラクティブなプレビューをプロジェクト内で共有し、フィードバックを収集することにより、作業の手戻りリスクを軽減できます。
特に、複雑なインタラクションを伴う画面の開発設計時に非常に有用です。
インフラ
AWS
インフラリソースは全てAWS上に構築しています。ただし、IaCやCI周り等含む全てをAWSにはロックインせず、適宜最適と思われるものを選択するようにしています。
Terraform
Infrastracture as CodeにTerraformを採用しています。
プロジェクトの特性上、異なるプラットフォームのサービスを利用することも考えられるため、マルチクラウドに対応可能なTerraformでインフラリソースを一元管理しています。
認可(Amazon CognitoのMachine-to-Machine(M2M)認証)
APIの認可について、Amazon Cognitoを用いてOAuth 2.0のAuthorization Code Grantに準拠した認証フローを実装しています
CI/CD
GitHub Actions
GitHub Actions を採用しています。
主に各環境のビルド・デプロイ、インフラリソースの作成や、Lint 、テストコードの実行でも利用しています。
また、CI/CDにおける一連のワークフローをすべてGitHub内で完結出来るため、ツール間のスイッチングコストを低減出来ます。
運用監視
Datadog
インフラリソースのモニタリングにDatadogを採用しています。
メトリクスのしきい値を超えたり、エラーログなどのアラートが検出された場合、後述のPagerDutyに通知を送信しています。
また、アプリケーションのパフォーマンス測定にも活用しています。Datadog APMを使用することで、各サービスのパフォーマンスをエンドポイントごとにモニタリングし、リクエストごとのフレームグラフを視覚的に把握できるため、処理のボトルネックを特定するのに非常に便利です。
Sentry
フロントエンドのエラーモニタリングにはSentryを採用しています。
Datadogと同様に、エラーログなどのアラートが検出された場合、後述のPagerDutyに通知を送信しています。
アプリケーションで発生したエラー状況を詳細に収集してくれるため、ユーザー報告以外では気づきにくいバグや、特定の環境下でのみ再現するエラーにも気付くことができ、障害発生時のエラートラッキングに重宝しています。
PagerDuty
サービスで発生したインシデントの管理に利用しています。
DatadogおよびSentryで検出されたアラートは、すべてインシデントとして集約され、一連のインシデント対応オペレーションを全てPagerDuty上で管理しています。
Snyk
アプリケーションの脆弱性検出に利用しています。 ライブラリの脆弱性、コンテナスキャン、ソースコードの静的解析と多岐に渡る脆弱性の検出に対応しており、GitHub Actionsと連携することで手軽にDevSecOpsを実現できます。
Codecov
開発ソースコードのカバレッジ測定に使用しています。
GitHubとの統合により、プルリクエスト時にカバレッジに関するレポートが自動的に生成されるため、テストカバレッジとコードの変更点を容易に確認できます。
おわりに
本記事では「枠ファインダ」の開発現場で採用している技術スタックの一例についてご紹介しました。
ご紹介した技術スタックはあくまで一例であり、随時プロダクトの成長や技術トレンドの変化に応じて、最適な技術構成へのアップデートを行っていく予定です。
また、今回は割愛しましたが、DDDや認可周りに関しての深掘り、フロントエンドの状態管理やエコシステムなど、触れきれなかったトピックについても個別の記事でご紹介する機会があるかもしれませんので、ぜひご期待ください。
ビデオリサーチでは、現在一緒にサービス開発を推進してくれる仲間を大募集しています！
もしビデオリサーチに興味を持っていただいた方は、以下よりお気軽にご応募ください💁♂️
