プロジェクト概要
UI デザイナーと 2 人で取り組んでいる side project です（2026 年 2 月開始、現在は Stage 環境にデプロイ済み）。プロダクトの構想と UI デザインはデザイナーが担当し、エンジニアリング部分は私が一人で担当しています。具体的には、データベースのモデリング、バックエンド API、フロントエンドと共通 UI コンポーネントライブラリ、画像処理サービス、AWS インフラ、CI/CD です。
このプラットフォームは会場の SVG 座席表をインデックスとして使い、公演を観た人が自分の座った席から実際に撮影した視界の写真と観覧体験（満足度、視界の遮りの有無、退場にかかる時間、冷房の強さなど）を投稿できます。後からチケットを購入する人は、座席表をクリックするだけでその位置からの実際の見え方を確認できます。
主な貢献
デザイナーと協力し、フロントエンド・バックエンド、データベース設計、インフラアーキテクチャにわたるシステム全体を一人で設計・開発
技術的なポイント
- 01
AWS Serverless アーキテクチャ
Next.js を Docker image としてパッケージ化し、Lambda Web Adapter を介して AWS Lambda 上で実行。静的アセットは S3 + CloudFront から配信し、トラフィックがないときの計算コストをほぼゼロに
- 02
バックエンドのレイヤー構成と依存性注入
NestJS に着想を得て、各業務モジュールを Route → Controller → Service の 3 層で構成し、コンストラクタインジェクションで依存性注入を実現。単体テスト時に依存を差し替えやすい設計
- 03
Zod による DTO の単一定義
Zod で同一の schema からさまざまな DTO を派生させ、1 つの定義をフロントエンド・バックエンドとデータ検証で共有する設計を実現。リクエストの検証、レスポンスのフィールド絞り込み、フロントエンド・バックエンド間の型共有に活用
- 04
チェーン型 middleware に対応した Next.js Proxy
Next.js の proxy を改修し、ジェネリックな
chain()で複数のルートガードを Chain of Responsibility として組み合わせ。ルールの追加は factory を 1 つ増やすだけで完結 - 05
独立した画像処理サービス
透かしとサムネイル生成を独立した image-processor Lambda に切り出し、S3 イベントと CDN リクエストをトリガーに実行。画像のアップロードと処理はメインアプリを一切経由せず、メインアプリの負荷を軽減
- 06
オンデマンドのリサイズと不正利用対策
CloudFront から API Gateway を経由して
/resize/*を Lambda に渡し、その場でリサイズ。200／400／800 の幅のホワイトリストで、意図的に cache miss を発生させるコスト型攻撃を防止 - 07
Monorepo によるエンジニアリング基盤
pnpm Workspaces + Turborepo で 3 つのモジュールを管理し、共通 UI コンポーネントライブラリは tsup でパッケージ化して Storybook を単独でデプロイ