diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index fb5e3ae..53a8817 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -4,9 +4,6 @@ "service": "app", "workspaceFolder": "/workspace", - // コンテナ作成時に実行する機能 (Features) - // pnpmがイメージに含まれていない場合の保険として追加推奨ですが、 - // typescript-node:20 イメージには通常含まれています。念のため明示。 "features": { "ghcr.io/devcontainers/features/node:1": { "version": "20", @@ -14,8 +11,6 @@ } }, - // VS Code 拡張機能の自動インストール - // 環境定義書の推奨リストを反映 "customizations": { "vscode": { "extensions": [ @@ -32,11 +27,11 @@ } }, - // コンテナ起動後の初期化コマンド - // 1. 依存関係のインストール (frozen-lockfileなしで柔軟に) - // 2. 共通パッケージ(shared)のビルド - "postCreateCommand": "pnpm install && pnpm --filter @repo/shared build", + // 【修正箇所】 + // 1. sudo chown ... : node_modules の所有権を node ユーザーに強制変更 + // 2. pnpm install : その後、安全にインストールを実行 + // 3. build : 最後にビルド + "postCreateCommand": "sudo chown -R node:node /workspace/node_modules && pnpm install && pnpm --filter @repo/shared build", - // コンテナ内のユーザー "remoteUser": "node" -} \ No newline at end of file +} diff --git a/docker-compose.yml b/docker-compose.yml index 77b6cba..9653f7d 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,16 +1,20 @@ -version: '3.8' +version: "3.8" services: app: container_name: pixel-paint-war-dev # 開発用イメージ: Node.js v20 (定義書準拠) image: mcr.microsoft.com/devcontainers/typescript-node:20 - + # 永続化とボリュームマウント volumes: # カレントディレクトリをコンテナ内の /workspace にマウント - .:/workspace:cached - + + # 【重要】ここを追加してください + # コンテナ内の node_modules をホスト側と切り離して高速化・安定化させる設定 + - node_modules:/workspace/node_modules + # コマンドの上書き (コンテナを常時起動させる) command: sleep infinity @@ -26,4 +30,7 @@ # pnpmのストアをローカルと分離して高速化したい場合は設定推奨（今回はシンプルにします） # ユーザー権限 (Nodeイメージ推奨のユーザー) - user: node \ No newline at end of file + user: node + +volumes: + node_modules: 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 62ab9d2..eb01c3b 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" @@ -13,10 +13,32 @@ 1-2. 【全員必須】 共通ツールのインストール 開発メンバー全員（管理者・参加者問わず）が以下のツールをインストールする． - 1. Docker Desktop (または Docker Engine) + 1. Docker Engine (Linux環境) ・開発環境の実体（コンテナ）を動かすために必須である． - ・Windowsの場合は WSL2 (Windows Subsystem for Linux 2) の設定も行うこと． - + + ・インストール手順 (Ubuntu/Debian系の例): + ターミナルで以下のコマンドを順に実行する． + + # 1. 公式GPG鍵とリポジトリのセットアップ + sudo apt-get update + sudo apt-get install -y ca-certificates curl gnupg + sudo install -m 0755 -d /etc/apt/keyrings + curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg + sudo chmod a+r /etc/apt/keyrings/docker.gpg + + echo \ + "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \ + "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \ + sudo tee /etc/apt/sources.list.d/docker.list > /dev/null + + # 2. パッケージのインストール + sudo apt-get update + sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin + + # 3. ユーザー権限の設定 (重要: VS Codeからsudoなしで利用するために必須) + sudo usermod -aG docker $USER + newgrp docker + ・確認コマンド: $ docker -v # Docker version 20.x.x 等と表示されること @@ -64,6 +86,11 @@ 1. [F1] または [Ctrl+Shift+P] を押下する． 2. "Reopen" と入力し，「Dev Containers: Reopen in Container」を選択する． + ※ トラブルシューティング: + もし起動後に node_modules が見つからない等のエラーが出た場合は， + 「Reopen」ではなく「Dev Containers: Rebuild Container」を選択して + 環境を完全に作り直してください． + 3-3. 初回ビルドの待機 1. 初回起動時は Dockerイメージのビルドと npmパッケージのインストールが行われる． (数分〜十数分かかる場合がある) @@ -72,13 +99,24 @@ 3-4. 起動確認 1. 左下のアイコンが「Dev Container: Pixel Paint War Dev」と表示されていることを確認する． 2. VS Codeのターミナルを開き (`Ctrl + @`)，パスを確認する． - 成功例: node@...:/workspace$ - (Windowsのパス C:\Users... ではなく Linux形式になっていれば成功) + + 成功例: node@...:/workspace$ + (Windowsのパス C:\Users... ではなく Linux形式になっていれば成功) 3. 動作確認コマンドを実行する． - $ pnpm --filter client dev - - ブラウザで http://localhost:5173 にアクセスし，画面が表示されれば環境構築完了である． + $ pnpm --filter client dev + + ※ エラー時の対応: + 「sh: vite: not found」等のエラーが出る場合は，自動インストールが完了していない可能性があります． + ターミナルで `pnpm install` を手動実行するか，上記 3-2 の「Rebuild Container」を試してください． + + ・ブラウザでの確認: + ターミナルに「➜ Local: http://localhost:5173/」と表示されたら， + Google Chrome等のブラウザを開き，アドレスバーに上記URLを貼り付けて実行する． + + ・正常動作の判断基準: + 画面に「Vite + Preact」のロゴと「Vite + Preact + TypeScript」といった + テキストが表示されていれば，フロントエンドの環境構築は成功である． 4. 開発ツールの確認 (Tools Verification) 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" index 88c814f..3b39784 100644 --- "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" @@ -220,33 +220,60 @@ プロジェクトルートに `docker-compose.yml` を作成する． ※ ローカルのソースコードをコンテナにマウントする設定． + version: "3.8" + services: app: - build: . + container_name: pixel-paint-war-dev + # 開発用イメージ: Node.js v20 (定義書準拠) + image: mcr.microsoft.com/devcontainers/typescript-node:20 + + # 永続化とボリュームマウント volumes: - - .:/workspace + # カレントディレクトリをコンテナ内の /workspace にマウント + - .:/workspace:cached + # 【重要】node_modules をホスト側と切り離して高速化・安定化させる設定 - node_modules:/workspace/node_modules + + # コマンドの上書き (コンテナを常時起動させる) + command: sleep infinity + + # ネットワーク設定 + # Client(5173) と Server(3000) のポートを開放 ports: - "5173:5173" - "3000:3000" - command: sleep infinity - tty: true + + # 環境変数 + environment: + - NODE_ENV=development + + # ユーザー権限 (Nodeイメージ推奨のユーザー) + user: node volumes: node_modules: 5-3. .devcontainer 設定の作成 1. ディレクトリ作成 - $ mkdir .devcontainer + $ mkdir .devcontainer 2. .devcontainer/devcontainer.json 作成 - VS Codeがコンテナを認識するための設定． + VS Codeがコンテナを認識するための設定． { "name": "Pixel Paint War Dev", "dockerComposeFile": "../docker-compose.yml", "service": "app", "workspaceFolder": "/workspace", + + "features": { + "ghcr.io/devcontainers/features/node:1": { + "version": "20", + "pnpm": "latest" + } + }, + "customizations": { "vscode": { "extensions": [ @@ -256,9 +283,22 @@ "ms-vscode.hexeditor", "github.copilot", "github.copilot-chat" - ] + ], + "settings": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" + } } - } + }, + + // コンテナ起動後の初期化コマンド + // 1. sudo chown ... : node_modules の所有権を node ユーザーに強制変更 + // 2. pnpm install : その後，安全にインストールを実行 + // 3. build : 最後に共通パッケージをビルド + "postCreateCommand": "sudo chown -R node:node /workspace/node_modules && pnpm install && pnpm --filter @repo/shared build", + + // コンテナ内のユーザー + "remoteUser": "node" } 5-4. docker-compose.prod.yml の作成 (本番確認用)