キレイなReact開発環境を作るのに結構調べるのが大変だったのでメモです。
Windows 10
環境構築と開発に必要なものをインストール
- Gitをインストール
https://git-scm.com/download/win - VSCodeをインストール
https://code.visualstudio.com/docs/setup/windows - WSL（Ubuntu）をインストール
https://learn.microsoft.com/ja-jp/windows/wsl/install - WSLにDocker Engineをインストール
https://docs.docker.com/engine/install/ubuntu/ - VSCodeの拡張機能パック「Remote Development」をインストール
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack
任意のGitリポジトリ内のDockerfileを使ってコンテナを立ち上げる（以下はviteで構築されたReact開発環境を想定）
- VSCode内のターミナルでWSL内の任意のディレクトリにGitリポジトリ（ルートディレクトリにDockerfileあり）を
git clone* - cloneして作成されたディレクトリをVSCodeで開く
- VSCodeで「Reopen in Container」を実行してDockerコンテナを起動・接続（「Remote Development」内の拡張機能「Dev Containers」を使用）
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers - 作業したいブランチに移動
- ターミナルで
yarn installを実行してmoduleをインストール - ターミナルで
yarn devを実行して開発環境をビルド - http://localhost:5173/ を開く
*: Windows上のディレクトリに配置されたプロジェクトからDockerを立ち上げるとビルドとホットリロードに時間がかかるのとCPUの利用率が高くなるためWSL内にプロジェクトを配置する（参照：https://vitejs.dev/config/server-options.html#server-watch）