diff --git a/Dockerfile b/Dockerfile index b0d6233..d47710f 100644 --- a/Dockerfile +++ b/Dockerfile @@ -27,8 +27,8 @@ RUN pnpm --filter server build # 5. 開発用ライブラリを削除（本番に必要なものだけ残す） -# ENV CI=true -# RUN pnpm prune --prod +ENV CI=true +RUN pnpm prune --prod # ================================================================ # Stage 2: Runner (実行専用の軽量環境) diff --git "a/docs/01_Env/ENV_02_\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206\346\233\270.txt" "b/docs/01_Env/ENV_02_\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206\346\233\270.txt" index f0678f1..62ab9d2 100644 --- "a/docs/01_Env/ENV_02_\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206\346\233\270.txt" +++ "b/docs/01_Env/ENV_02_\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206\346\233\270.txt" @@ -1,277 +1,61 @@ ======================================================================== -Pixel Paint War - 環境構築ガイド (Environment Setup Guide) +Pixel Paint War - 開発環境利用ガイド (Development Environment Guide) ======================================================================== 1. 事前準備 (Prerequisites) ------------------------------------------------------------------------ -1-0. 目的 - 本ドキュメントは，「Pixel Paint War」のMonorepo構成による開発環境を構築 - するための手順書である． - ※ 本プロジェクトは Node.js v20 LTS 以上を必須とする． +1-1. 目的 + 本ドキュメントは，「Pixel Paint War」の開発に参加する全メンバー向けの + 環境構築および利用ガイドである． + Monorepo構成とDocker(Dev Containers)を使用し，迅速に開発を開始する手順を記す． -1-1. 必須ツールのインストール - 開発を開始する前に，以下のツールをインストールしバージョンを確認する． +1-2. 【全員必須】 共通ツールのインストール + 開発メンバー全員（管理者・参加者問わず）が以下のツールをインストールする． - 1. Node.js (v20.x LTS) - ・Nodesource リポジトリを使用してインストールする． - # リポジトリのセットアップとインストール - $ curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - - $ sudo apt-get install -y nodejs - - ・確認コマンド: - $ node -v # v20.x.x と表示されること - - 2. pnpm (Package Manager) - ・Node.js 標準の npm ではなく pnpm を使用する． - ・Corepack (Node.js同梱) を有効化してインストールする． - $ sudo corepack enable - $ corepack prepare pnpm@latest --activate - - ・確認コマンド: - $ pnpm -v - - -2. プロジェクト初期化 (Project Initialization) ------------------------------------------------------------------------- - -2-1. ディレクトリ作成と初期化 - 1. プロジェクトルートの作成 - 任意の場所にプロジェクトフォルダを作成し，移動する． - $ mkdir SkillSemiWebGame - $ cd SkillSemiWebGame - - 2. Gitの初期化 - $ git init - - 3. pnpm の初期化 - $ pnpm init - -2-2. ワークスペース設定 (Monorepo Setup) - ルートディレクトリに以下の設定ファイルを作成し，モノレポ構成を定義する． - - 1. pnpm-workspace.yaml - ・packages/shared を共通ライブラリとし，apps 配下にアプリを配置する． - ・内容: - packages: - - 'apps/*' - - 'packages/*' - - 2. .npmrc - ・依存関係解決の設定を行う (shamefully-hoist=true 推奨)． - ・内容: - shamefully-hoist=true - -2-3. ディレクトリ構造の構築 - 以下の構成になるようにディレクトリを作成する． - - root/ - ├── apps/ - │ ├── client/ # フロントエンド (Browser) - │ └── server/ # バックエンド (Node.js) - └── packages/ - └── shared/ # 共通ロジック (Shared Library) - - ・作成コマンド例: - $ mkdir -p apps/client apps/server packages/shared - -2-4. Git除外設定 (Git Ignore Setup) - 不要なファイル（依存ライブラリやビルド成果物）がGit管理下に置かれないよう， - 除外設定を行う． - - 1. 設定ファイルの作成 - プロジェクトルートディレクトリに `.gitignore` ファイルを作成する． - $ touch .gitignore - - 2. 除外ルールの記述 - 以下の内容をファイルに記述し保存する． - ・node_modules: 依存ライブラリフォルダ． - ・dist, build: ビルド生成物． - ・.env: 環境変数ファイル（セキュリティ保持のため）． - - # Dependencies - node_modules/ - .pnpm-store/ - - # Build Outputs - dist/ - build/ - out/ - - # Logs - *.log - npm-debug.log* - pnpm-debug.log* - - # Environment Variables - .env - .env.local - .env.*.local - - # Editor / OS - .vscode/* - !.vscode/extensions.json - !.vscode/settings.json - !.vscode/launch.json - .idea/ - .DS_Store - Thumbs.db - - # Testing - coverage/ - - # Unignore packages (Fix for parent gitignore) - !packages/ - - 3. 設定の反映確認 - Gitのステータスを確認し，`node_modules/` 等が含まれていないことを確認する． - $ git status - -2-5. 初回コミット (Initial Commit) - 環境構築の区切りとして，現在の状態をリポジトリに保存する． - - 1. ステータス確認 - `.gitignore` が正しく適用されているか確認する． - $ git status - ※ `node_modules/` が表示されていないことを確認する． - - 2. ステージング - 変更された全てのファイルをコミット対象に追加する． - $ git add . - - 3. コミット実行 - 構築内容を示すメッセージを付与してコミットする． - $ git commit -m "chore: Project initialization (Monorepo, pnpm, Vite)" - -3. パッケージ・ライブラリ導入 (Dependency Installation) ------------------------------------------------------------------------- - -3-1. 共通ライブラリ (packages/shared) - 共通ロジック用のパッケージ設定を行う． - - 1. 初期化とビルドツール導入 - $ cd packages/shared - $ pnpm init - $ pnpm add -D typescript tsup - - 2. 設定ファイルの調整 (package.json) - ・name: "@repo/shared" と命名する（推奨）． - ・main: "./dist/index.js", types: "./dist/index.d.ts" を指定する． - ・scripts: "build": "tsup src/index.ts --format cjs,esm --dts" を追加する． - - 3. エントリーポイントの作成 - tsupがビルド対象とするファイルを作成する． - - $ mkdir src - $ touch src/index.ts + 1. Docker Desktop (または Docker Engine) + ・開発環境の実体（コンテナ）を動かすために必須である． + ・Windowsの場合は WSL2 (Windows Subsystem for Linux 2) の設定も行うこと． - ※ 現時点では空ファイルでよいが，将来的に constants.ts 等を export する記述を行う． - (例: export * from './constants';) + ・確認コマンド: + $ docker -v + # Docker version 20.x.x 等と表示されること - 4. TypeScript設定ファイルの作成 (tsconfig.json) - ビルドと型定義生成のための設定ファイルを作成する． - ・ファイル: packages/shared/tsconfig.json - ・内容: - { - "compilerOptions": { - "target": "ES2020", - "module": "ESNext", - "moduleResolution": "Bundler", - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "declaration": true, - "declarationMap": true, - "sourceMap": true, - "outDir": "./dist", - "rootDir": "./src", - "strict": true, - "esModuleInterop": true, - "skipLibCheck": true, - "forceConsistentCasingInFileNames": true - }, - "include": ["src/**/*"], - "exclude": ["node_modules", "dist"] - } + 2. VS Code (Visual Studio Code) + ・メインのエディタとして使用する．最新版をインストールすること． -3-2. フロントエンド (apps/client) - Vite プロジェクトとして初期化を行う． - - 1. プロジェクト作成 - $ cd ../../apps/client - $ pnpm create vite . --template preact-ts - ※ 実行中に表示される選択肢には以下のように回答すること: - ? Use rolldown-vite (Experimental)? » No - ? Install with pnpm and start now? » No - - 2. 依存ライブラリのインストール - ・Pixi.js (描画エンジン) を追加する． - ・共通ライブラリへの依存を追加する． - $ pnpm add pixi.js - $ pnpm add @repo/shared --workspace - -3-3. バックエンド (apps/server) - Node.js アプリケーションとして初期化を行う． - - 1. 初期化 - $ cd ../../apps/server - $ pnpm init - - 2. 依存ライブラリのインストール - ・ws (WebSocket) を追加する． - ・開発用ツール (tsx, typescript, @types/node, @types/ws) を追加する． - ・共通ライブラリへの依存を追加する． - $ pnpm add ws - $ pnpm add -D tsx typescript @types/node @types/ws - $ pnpm add @repo/shared --workspace - - 3. サーバー用ディレクトリとファイルの作成 - tsxが実行対象とするエントリーポイントを作成する． - $ mkdir src - $ touch src/index.ts - - 4. 実行スクリプトの定義 - package.json にサーバー起動用のコマンドを追加する． - ・編集ファイル: apps/server/package.json - ・内容: - "scripts": { - "dev": "tsx watch src/index.ts" - } - - 5. TypeScript設定ファイルの作成 (tsconfig.json) - 開発時の実行環境とパス解決のための設定ファイルを作成する． - ・ファイル: apps/server/tsconfig.json - ・内容: - { - "compilerOptions": { - "target": "ES2022", - "module": "NodeNext", - "moduleResolution": "NodeNext", - "lib": ["ES2022"], - "strict": true, - "noEmit": true, - "esModuleInterop": true, - "skipLibCheck": true, - "forceConsistentCasingInFileNames": true, - "baseUrl": ".", - "paths": { - "@repo/shared": ["../../packages/shared/src/index.ts"] - } - }, - "include": ["src/**/*"], - "exclude": ["node_modules"] - } + 3. VS Code 拡張機能: "Dev Containers" + ・ID: ms-vscode-remote.remote-containers + ・拡張機能マーケットプレイスで検索し、インストールする． + ・これを入れることで、Dockerコンテナ内でVS Codeを開くことが可能になる． -4. Docker環境での開発開始 (推奨手順) +2. 環境セットアップ (Setup) ------------------------------------------------------------------------ -本プロジェクトは VS Code の Dev Containers 機能を使用する． -これにより Node.js, pnpm, ESLint 等の環境が自動構築される． + + ■ リポジトリのクローン + 1. ソースコードの取得 + 任意のディレクトリで以下のコマンドを実行する． + $ git clone + + 2. ディレクトリ移動 + $ cd SkillSemiWebGame -4-1. プロジェクトを開く + 3. 完了 + これだけで準備は完了である． + パッケージのインストール等はDocker起動時に自動で行われるため、 + 手動での `pnpm install` 等は不要である． + + +3. 開発環境(Dev Container)の起動 (Launch) +------------------------------------------------------------------------ + +3-1. プロジェクトを開く 1. VS Codeを起動し，「ファイル > フォルダを開く」からプロジェクトルートを選択する． -4-2. コンテナでの再起動 (Reopen in Container) +3-2. コンテナでの再起動 (Reopen in Container) 以下のいずれかの方法で，開発環境をコンテナ内に移行する． - + 【方法A: ステータスバーから】 1. ウィンドウ左下の緑色(または青色)の「><」アイコンをクリックする． 2. 表示されるメニューから「Reopen in Container」を選択する． @@ -280,15 +64,14 @@ 1. [F1] または [Ctrl+Shift+P] を押下する． 2. "Reopen" と入力し，「Dev Containers: Reopen in Container」を選択する． -4-3. 初回ビルドの待機 +3-3. 初回ビルドの待機 1. 初回起動時は Dockerイメージのビルドと npmパッケージのインストールが行われる． (数分〜十数分かかる場合がある) 2. 右下に "Starting Dev Container" 等の通知が表示されている間は待機する． -4-4. 起動確認 +3-4. 起動確認 1. 左下のアイコンが「Dev Container: Pixel Paint War Dev」と表示されていることを確認する． 2. VS Codeのターミナルを開き (`Ctrl + @`)，パスを確認する． - 成功例: node@...:/workspace$ (Windowsのパス C:\Users... ではなく Linux形式になっていれば成功) @@ -298,37 +81,34 @@ ブラウザで http://localhost:5173 にアクセスし，画面が表示されれば環境構築完了である． -5. 開発ツールの確認 (Tools Verification) +4. 開発ツールの確認 (Tools Verification) ------------------------------------------------------------------------ Dockerコンテナ起動完了後、定義済みのツールが正しく自動導入されているか確認する． ※ 手動でのインストールは不要である． -5-1. VS Code 拡張機能 +4-1. VS Code 拡張機能 拡張機能サイドバーを開き、"Dev Container: Pixel Paint War Dev" セクションに 以下がインストール済みであることを確認する． - ・ESLint ・Prettier - Code formatter ・EditorConfig for VS Code ・Hex Editor ・GitHub Copilot -5-2. AI アシスタント設定 +4-2. AI アシスタント設定 GitHub Copilot Pro - VS Code 右下のアイコンから、GitHubアカウントへのログイン状態を確認する． -6. 構成確認 (Configuration Check) +5. 構成確認 (Project Structure) ------------------------------------------------------------------------ -6-1. 最終ディレクトリ構成 - 構築完了時点で，以下のディレクトリおよびファイルが存在することを確認する． +5-1. ディレクトリ構成 + コンテナ内で以下のディレクトリ構造が見えていることを確認する． SkillSemiWebGame/ <-- プロジェクトルート - ├── .devcontainer/ <-- 【重要】Docker設定 - │ └── devcontainer.json - ├── .git/ <-- git init で作成 - ├── .gitignore <-- Git除外設定 + ├── .devcontainer/ <-- Docker設定 + ├── .git/ ├── docker-compose.yml <-- Docker構成 ├── package.json <-- ルート定義 ├── pnpm-workspace.yaml <-- ワークスペース定義 @@ -336,70 +116,41 @@ │ ├── apps/ <-- アプリケーション格納用 │ ├── client/ <-- フロントエンド (Vite + Preact) - │ │ ├── node_modules/ │ │ ├── src/ - │ │ │ ├── main.tsx (または index.tsx) - │ │ │ └── ... (Viteテンプレートファイル群) - │ │ ├── index.html + │ │ │ ├── main.tsx + │ │ │ └── ... │ │ ├── package.json <-- pixi.js, @repo/shared 依存あり - │ │ ├── tsconfig.json │ │ └── vite.config.ts │ │ │ └── server/ <-- バックエンド (Node.js) - │ ├── node_modules/ │ ├── src/ │ │ └── index.ts <-- エントリーポイント - │ ├── package.json <-- ws, @repo/shared 依存あり - │ └── tsconfig.json <-- pnpm init 等で生成（または要作成） + │ └── package.json <-- ws, @repo/shared 依存あり │ └── packages/ <-- 共通パッケージ格納用 └── shared/ <-- 共通ロジック - ├── node_modules/ - ├── dist/ <-- ビルド後に生成される (index.js, index.d.ts) + ├── dist/ <-- ビルド成果物 ├── src/ - │ └── index.ts <-- 空または定数export用 - ├── package.json <-- buildスクリプト定義あり - └── tsconfig.json <-- tsup/typescript設定用 + │ └── index.ts + └── package.json -6-2. 重要ファイル設定確認 - 各パッケージの連携設定が正しいか確認する． - - ■ root/pnpm-workspace.yaml - packages: - - 'apps/*' - - 'packages/*' - - ■ packages/shared/package.json - ・name: "@repo/shared" - ・main: "./dist/index.js" - ・types: "./dist/index.d.ts" - - ■ apps/client/package.json - ・dependencies: - "@repo/shared": "workspace:*" - - ■ apps/server/package.json - ・dependencies: - "@repo/shared": "workspace:*" - - -7. 動作確認 (Verification) +6. 動作確認 (Verification) ------------------------------------------------------------------------ -7-1. ビルド確認 +6-1. ビルド確認 ※ 注意: 以下のコマンドは全て「Dev Container内のターミナル」で実行すること． $ pnpm --filter @repo/shared build ※ shared のビルドが成功することを確認する． -7-2. 開発サーバー起動 +6-2. 開発サーバー起動 モノレポ構成のため，個別のディレクトリに移動せず，プロジェクトルートから --filter オプションを使用して各アプリを起動する． ※ ターミナルを2つ開き，両方を同時に起動した状態で開発を進めることを推奨． - + 1．Client (フロントエンド) の動作確認 ・ルートディレクトリにて以下のコマンドを実行する． - $ pnpm --filter client dev + $ pnpm --filter client dev ・ブラウザでの確認: ターミナルに「➜ Local: http://localhost:5173/」と表示されたら， @@ -408,7 +159,7 @@ ・正常動作の判断基準: 画面に「Vite + Preact」のロゴと「Vite + Preact + TypeScript」といった テキストが表示されていれば，フロントエンドの環境構築は成功である． - + 2. Server (バックエンド) の動作確認 ・テスト用コードの作成: 動作確認用のエントリーポイントを作成する． @@ -426,43 +177,32 @@ 3．終了方法 (重要) ・動作確認を終了し，開発サーバーを停止させる場合は，ターミナル上で 「Ctrl + C」を押下する． - ・停止後はブラウザでURLにアクセスしても接続不可となるが，再度起動 - コマンドを実行すればいつでも再開可能である． -8. 本番デプロイ手順 (Production Deployment) +7. (応用) 本番ビルドの動作確認 (Production Build Check) ------------------------------------------------------------------------ -本番環境（サーバー）へのデプロイは，Dockerを使用して最適化されたイメージを作成して行う． +開発環境(Dev Container)ではなく，本番環境と同様のDockerイメージを作成し， +正しくビルド・起動できるかを確認する手順である． +「機能開発が終わった後」や「プルリクエストを出す前」に実施することを推奨する． -8-1. -構成ファイルの準備 - プロジェクトルートに以下のファイルが存在することを確認する． - 1. Dockerfile (Multi-stage build構成) - - `pnpm prune` 後の `node_modules` コピー処理が含まれていること． - 2. docker-compose.prod.yml (本番起動用) - - ポート設定: "3001:3000" (ホスト側3001番 -> コンテナ側3000番) +7-1. 準備 + Dev Containerを閉じ，ホストOS（Windows/Mac）のターミナルを開く． + ※ Dev Container内からはDockerコマンドが使用できない場合があるため． -8-2. -ローカルでの本番稼働テスト - 開発環境(Dev Container)と同時に起動する場合，ポート衝突を避けるために - ホスト側のポートをずらして起動する． +7-2. ビルドと起動 + プロジェクトルートで以下のコマンドを実行する． - 1. ビルドと起動 (WSL/ホスト側のターミナルで実行) - $ docker compose -f docker-compose.prod.yml up -d --build + $ docker compose -f docker-compose.prod.yml up -d --build - 2. 稼働確認 - $ docker compose -f docker-compose.prod.yml ps - ・Stateが "Up" であり，"Restarting" を繰り返していないことを確認する． +7-3. 動作確認 + 1. ログ確認 + $ docker compose -f docker-compose.prod.yml logs -f + Serverが起動していることを確認する． - 3. ログ確認 - $ docker compose -f docker-compose.prod.yml logs -f - ・"Pixel Paint War Server started on port 3000" と表示されれば成功． + 2. ブラウザ確認 + http://localhost:3001 + ※ ポート番号が開発用(3000/5173)と異なり 3001 に設定されている点に注意． - 4. ブラウザ接続確認 - ・URL: http://localhost:3001 - ・表示: "Upgrade Required" と表示されれば，WebSocketサーバーとして正常に稼働している． - -8-3. -停止と削除 - テストが終了したらリソースを解放する． +7-4. 終了と削除 + 確認が終わったら必ず環境を停止・削除する． $ docker compose -f docker-compose.prod.yml down \ No newline at end of file diff --git "a/docs/01_Env/ENV_06_\347\256\241\347\220\206\350\200\205\347\224\250\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206.txt" "b/docs/01_Env/ENV_06_\347\256\241\347\220\206\350\200\205\347\224\250\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206.txt" new file mode 100644 index 0000000..88c814f --- /dev/null +++ "b/docs/01_Env/ENV_06_\347\256\241\347\220\206\350\200\205\347\224\250\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206.txt" @@ -0,0 +1,306 @@ +======================================================================== +Pixel Paint War - 管理者用環境構築手順 (Admin Setup Guide) +======================================================================== + +1. はじめに (Introduction) +------------------------------------------------------------------------ + 本ドキュメントは，プロジェクトを「ゼロから新規作成・再構築する管理者」向けの + Monorepo構成およびDocker環境の構築ログである． + ※ 一般の開発メンバー（Git Cloneして参加する人）は本ドキュメントを実施不要である． + +2. 管理者用事前準備 (Prerequisites for Admin) +------------------------------------------------------------------------ + +2-1. プロジェクト作成用ツールのインストール + 1. Node.js (v20.x LTS) + ・Nodesource リポジトリを使用してインストールする． + + # リポジトリのセットアップとインストール + $ curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - + $ sudo apt-get install -y nodejs + + ・確認コマンド: + $ node -v # v20.x.x と表示されること + + 2. pnpm (Package Manager) + ・Node.js 標準の npm ではなく pnpm を使用する． + ・Corepack (Node.js同梱) を有効化してインストールする． + $ sudo corepack enable + $ corepack prepare pnpm@latest --activate + + ・確認コマンド: + $ pnpm -v + + +3. 新規プロジェクト構築 (Project Initialization) +------------------------------------------------------------------------ + +3-1. プロジェクト初期化 + 1. ディレクトリ作成 + $ mkdir SkillSemiWebGame + $ cd SkillSemiWebGame + + 2. Git/pnpm 初期化 + $ git init + $ pnpm init + +3-2. Monorepo構成設定 + 1. pnpm-workspace.yaml 作成 + ルート直下に作成し、以下を記述する． + packages: + - 'apps/*' + - 'packages/*' + + 2. .npmrc 作成 + ルート直下に作成し、以下を記述する． + shamefully-hoist=true + +3-3. ディレクトリ構造の構築 + 以下の構成になるようにディレクトリを作成する． + + root/ + ├── apps/ + │ ├── client/ # フロントエンド (Browser) + │ └── server/ # バックエンド (Node.js) + └── packages/ + └── shared/ # 共通ロジック (Shared Library) + + ・作成コマンド例: + $ mkdir -p apps/client apps/server packages/shared + +3-4. Git除外設定 (.gitignore) + ルート直下に `.gitignore` を作成し、以下を記述する． + + node_modules/ + .pnpm-store/ + dist/ + build/ + .env + .DS_Store + .vscode/* + !.vscode/extensions.json + !.vscode/launch.json + coverage/ + !packages/ + + +4. アプリケーション雛形の作成 (Scaffolding) +------------------------------------------------------------------------ + +4-1. 共通ライブラリ (packages/shared) + 1. 初期化とビルドツール導入 + $ cd packages/shared + $ pnpm init + $ pnpm add -D typescript tsup + + 2. 設定ファイルの調整 (package.json) + ・name: "@repo/shared" と命名する（推奨）． + ・main: "./dist/index.js", types: "./dist/index.d.ts" を指定する． + ・scripts: "build": "tsup src/index.ts --format cjs,esm --dts" を追加する． + + 3. エントリーポイントの作成 + $ mkdir src + $ touch src/index.ts + ※ (例: export * from './constants';) + + 4. TypeScript設定ファイルの作成 (tsconfig.json) + ・ファイル: packages/shared/tsconfig.json + ・内容: + { + "compilerOptions": { + "target": "ES2020", + "module": "ESNext", + "moduleResolution": "Bundler", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "declaration": true, + "declarationMap": true, + "sourceMap": true, + "outDir": "./dist", + "rootDir": "./src", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true + }, + "include": ["src/**/*"], + "exclude": ["node_modules", "dist"] + } + +4-2. フロントエンド (apps/client) + 1. プロジェクト作成 + $ cd ../../apps/client + $ pnpm create vite . --template preact-ts + ※ Use rolldown-vite? » No + ※ Install with pnpm and start now? » No + + 2. 依存ライブラリのインストール + $ pnpm add pixi.js + $ pnpm add @repo/shared --workspace + +4-3. バックエンド (apps/server) + 1. 初期化 + $ cd ../../apps/server + $ pnpm init + + 2. 依存ライブラリのインストール + $ pnpm add ws + $ pnpm add -D tsx typescript @types/node @types/ws + $ pnpm add @repo/shared --workspace + + 3. サーバー用ディレクトリとファイルの作成 + $ mkdir src + $ touch src/index.ts + + 4. 実行スクリプトの定義 (package.json) + "scripts": { + "dev": "tsx watch src/index.ts" + } + + 5. TypeScript設定ファイルの作成 (tsconfig.json) + ・ファイル: apps/server/tsconfig.json + ・内容: + { + "compilerOptions": { + "target": "ES2022", + "module": "NodeNext", + "moduleResolution": "NodeNext", + "lib": ["ES2022"], + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "baseUrl": ".", + "paths": { + "@repo/shared": ["../../packages/shared/src/index.ts"] + } + }, + "include": ["src/**/*"], + "exclude": ["node_modules"] + } + +4-4. 初回コミット (Initial Commit) + 1. ルートに戻る + $ cd ../.. + 2. ステータスの確認 (node_modulesが含まれていないこと) + $ git status + 3. Gitへ保存 + $ git add . + $ git commit -m "chore: Initialize project structure and dependencies" + + +5. Docker環境定義ファイルの作成 (Configuration) +------------------------------------------------------------------------ + +5-1. Dockerfile の作成 + プロジェクトルートに `Dockerfile` を作成する． + ※ Node.js v20 をベースとし，pnpm を有効化した開発用イメージ定義． + + FROM node:20-slim + + # pnpmの準備 + ENV PNPM_HOME="/pnpm" + ENV PATH="$PNPM_HOME:$PATH" + RUN corepack enable + + # 作業ディレクトリ設定 + WORKDIR /workspace + + # 依存関係のコピーとインストール (キャッシュ活用) + COPY . . + RUN pnpm install + + # ポート公開 (Vite:5173, Server:3000) + EXPOSE 5173 3000 + + # デフォルトコマンド (docker-composeで上書きするため待機) + CMD ["sleep", "infinity"] + +5-2. docker-compose.yml の作成 (開発用) + プロジェクトルートに `docker-compose.yml` を作成する． + ※ ローカルのソースコードをコンテナにマウントする設定． + + services: + app: + build: . + volumes: + - .:/workspace + - node_modules:/workspace/node_modules + ports: + - "5173:5173" + - "3000:3000" + command: sleep infinity + tty: true + + volumes: + node_modules: + +5-3. .devcontainer 設定の作成 + 1. ディレクトリ作成 + $ mkdir .devcontainer + + 2. .devcontainer/devcontainer.json 作成 + VS Codeがコンテナを認識するための設定． + + { + "name": "Pixel Paint War Dev", + "dockerComposeFile": "../docker-compose.yml", + "service": "app", + "workspaceFolder": "/workspace", + "customizations": { + "vscode": { + "extensions": [ + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "editorconfig.editorconfig", + "ms-vscode.hexeditor", + "github.copilot", + "github.copilot-chat" + ] + } + } + } + +5-4. docker-compose.prod.yml の作成 (本番確認用) + プロジェクトルートに `docker-compose.prod.yml` を作成する． + ※ 本番ビルド確認用にポートをずらし、ビルドコマンドを実行する設定． + + services: + app: + build: . + ports: + - "3001:3000" + environment: + - NODE_ENV=production + command: pnpm start + + +6. 本番デプロイ構成の補足 (Deployment Config) +------------------------------------------------------------------------ +本番環境へデプロイする際は，上記 `Dockerfile` をマルチステージビルドに修正し， +軽量化を図ることが推奨される． + +6-1. Dockerfile (本番用最適化例) + ※ 必要に応じて `Dockerfile.prod` として作成する． + + FROM node:20-slim AS base + ENV PNPM_HOME="/pnpm" + ENV PATH="$PNPM_HOME:$PATH" + RUN corepack enable + COPY . /app + WORKDIR /app + + FROM base AS prod-deps + RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile + + FROM base AS build + RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile + RUN pnpm run build + + FROM base + COPY --from=prod-deps /app/node_modules /app/node_modules + COPY --from=build /app/apps/server/dist /app/apps/server/dist + COPY --from=build /app/apps/client/dist /app/apps/client/dist + + EXPOSE 3000 + CMD [ "pnpm", "start" ] \ No newline at end of file