Kappa5400's homepage

CS大学院生英語バイリンガル開発者

Read in English

MERNスタック チェスアプリ 概要

リンク:

https://chesspuzzlekappa54.me/

Githubリンク:

https://github.com/Kappa5400/mern_chess

イントロダクション

本プロジェクトは、Digital Oceanにデプロイされたチェスアプリのリポジトリです。UIの構築だけでなく、実用的なCI/CDパイプラインを構築している点が特徴です。

GitHubへプッシュするたびに、コードのテストと静的解析（Lint）が自動実行され、フロントエンドとバックエンドのDockerイメージが生成されます。その後、サーバー側のセルフホスト型GitHub Runnerがイメージをプルし、デプロイまでを自動で行います。

テストに関しては、サービスレイヤーの各ユニットテスト（正常系・異常系）および全APIエンドポイントの結合テストを実装しています。

主な機能：

このアプリは、私のソフトウェアエンジニアとしてのスキルを証明するために開発しました。詳細は以下の通りです。

データベース
DB Architecture
体系
System Architecture

プロジェクト詳細：システムアーキテクチャ

本アプリは、フロントエンドとバックエンドを完全に分離したクライアント・サーバーアーキテクチャで構築されています。

バックエンドにはMongoDBを採用し、サービスレイヤーとルーティングレイヤーで構成されています。また、データバリデーションや認証のためのミドルウェア、テスト環境、ロギングユーティリティ、自動スクリプトを含んでいます。

フロントエンドからはReact Hooksまたはコンポーネント経由でAPIハンドラー層にアクセスします。また、認証コンテキストを使用してトークン管理を行っています。

使用パッケージ

パッケージ解説

セキュリティ

ユーティリティ

テスト

フロントエンド

ファイル構成

バックエンド

mern_chess/chess/src/
├── __tests__/      # ユニットテストおよび結合テスト
├── db/             # DB初期化スクリプトとモデル定義
├── middleware/     # joiバリデーションとJWT認証
├── routes/         # ルーティングロジック
├── service/        # ビジネスロジック
│   └── jobs/       # cronジョブスクリプト
├── swagger/        # Swagger API定義ファイル
├── tests/          # テストのセットアップおよび破棄設定
├── utils/          # Winstonロギング設定
├── app.js          # エントリーポイント
└── server.js       # サーバー設定

フロントエンド
```text
mern_chess/chess/frontend/src/
├── api/            # API通信の定義
├── components/     # Reactコンポーネント
├── contexts/       # 認証などのコンテキスト
├── hooks/          # API呼び出し等のカスタムフック
├── pages/          # ページテンプレート
├── App.jsx         # ルーティング設定
└── main.jsx        # エントリーポイント

バックエンド詳細

バックエンドは「DBモデル ⇄ サービス ⇄ ルート」の標準的なパターンに従い、バリデーションとロギングのミドルウェアを組み込んでいます。ロジックは、ユーザー認証、パズル取得、ユーザー作成パズルの3つに分割して管理。

ユーザー作成パズルについてはCRUD機能を備えており、認証済みユーザーは自身のパズルの作成・削除が可能です（閲覧は未認証でも可能）。DBサイズを適切に保つため、古いパズルを自動削除する仕組みも導入しています。

セキュリティ

JWTを用いてセッション中のトークンを追跡し、認証が必要なアクションを制御しています。パスワードはDB保存前にハッシュ化。ユーザーからの入力はすべてサニタイズ（無害化）され、joiスキーマによって型と形式が厳密に検証されます。Webサイトとして期待される標準的なセキュリティ対策を実装しています。

フロントエンド詳細

Reactのコンポーネントベースの構造を採用し、「Pages ⇄ Components ⇄ Hooks ⇄ API」という明確なデータフローを構築しました。

チェスのロジックにはChess.jsとreact-chessboardを使用していますが、パズル作成時の位置情報入力などの独自ロジックは自前で実装しています。ログイン状態に応じた動的なUI変更（作成ボタンの表示・非表示など）や、スコアボード表示機能を備えています。

テスト、CI/CD、デプロイ

テスト

Jestを用いてユニットテストと結合テストを実施しています。ビジネスロジックの各関数に対して正常・異常の両パターンをテストし、APIエンドポイントが正しくデータを送受信できることを保証しています。これにより、コード変更時のデグレ（不具合の再発）を最小限に抑えています。

CI/CD

GitHub Actionsを利用し、プッシュごとに自動テストとリントを実行。テスト通過後にDockerイメージをビルドし、サーバー側のGitHub Runner経由で自動デプロイされるパイプラインを構築しました。この一連の流れにより、摩擦のない継続的デリバリー（Frictionless CI/CD）を実現しています。

デプロイ

Digital OceanのDroplet上でホスト。CloudflareによるIP秘匿化とDigital Oceanのファイアウォールを組み合わせることで、外部攻撃（DDoS等）から保護された安全な環境を構築しています。