はじめに

私の個人開発環境はすべてDockerで構築しています。
そのため、ローカルには一切開発言語を入れていません。

開発環境構築方法としての良し悪しは分からないですが、個人的にかなり便利だな～と思っているので紹介させてください。
特にノートパソコンを買い替えた時はWSLとVS CodeとDocker Desktopを入れるだけで開発環境を復旧できて便利でした。

最近はReactを勉強中のためNode.jsに絞った話になるかもしれないですがご了承ください。

構築方法（概要）

2種類のコンテナを使い分けて開発環境を構築しています。

Nodeのコンテナ
Reactプロジェクト自体のコンテナ

上記のコンテナを使って、以下の手順で構築します。

Nodeのコンテナ用のdevcontainer.jsonを用意する
Nodeのコンテナにリモートアクセスする
Reactプロジェクトを作成する
作成したReactプロジェクト内にdevcontainer.jsonをコピーする
Nodeのコンテナからexitして、そのプロジェクトのコンテナにリモートアクセスする

最終的なディレクトリ構成は以下のようになります。

ディレクトリ構成

./node-container
├── .devcontainer
│    ├── Dockerfile
│    └── devcontainer.json
│
├── react-project-1
│    ├── .devcontainer
│    │    ├── Dockerfile
│    │    └── devcontainer.json
│    ├── node_modules/
│    ├── src/
│    └── package.json
:
:
:
├── react-project-xx
│    ├── .devcontainer
│    │    ├── Dockerfile
│    │    └── devcontainer.json
│    ├── node_modules/
│    ├── src/
│    └── package.json
└── .gitignore

構築方法（詳細）

実際に私が構築するときの手順を書きます。
私の基本的な開発環境は以下の通りです。

OS：Windows 11
VS Code：1.10.1
WSL：Ubuntu-24.04
Docker Desktop：4.34.2 (167172)

各種ディレクトリやファイルの構築はすべてWSL上で行っています。Windows側には一切ファイルを保存していません。

1. Nodeのコンテナ用の`devcontainer.json`を用意する

こちらのコンテナはReactプロジェクトを作るためのコンテナです。

ここでは最小構成のDockerfileとdevcontainer.jsonを例示しています。（devcontainer.jsonのcustomizations以下はおまけです。不要な方は消してください。）

しかし、後述のReactプロジェクトのコンテナ作成時にコピーするため、この時点で自分なりにカスタマイズしておくと便利です。

Node-Containerのディレクトリ構成

.node-container
├── .devcontainer
│    ├── Dockerfile
│    └── devcontainer.json
└── .gitignore

Dockerfile

FROM node:22.4.1-bookworm
EXPOSE 4321


RUN apt-get update \
    && apt-get install -y git vim curl \
    && apt-get clean

devcontainer.json

{
  "name": "NodeContainer",
  "build": {
    "dockerfile": "./Dockerfile"
  },
  "forwardPorts": [4321],
  "workspaceFolder": "/workspace",
  "mounts": [
    {
      "type": "bind",
      "source": ".",
      "target": "/workspace"
    },
    {
      "type": "volume",
      "source": "node_modules",
      "target": "/workspace/node_modules"
    }
  ],
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "stylelint.vscode-stylelint",
        "ritwickdey.LiveServer",
        "dsznajder.es7-react-js-snippets",
        "formulahendry.auto-rename-tag",
        "formulahendry.auto-close-tag",
        "yzhang.markdown-all-in-one"
      ],
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
      }
    }
  }
}

2. Nodeのコンテナにリモートアクセスする

WSL上でNodeのコンテナを格納しているディレクトリにアクセスして、code .でVS Codeを起動します。

$ cd node-container
$ code .

VS Codeが起動すると自動的に右下にコンテナを開くかどうかのオプションが出てくるので、「Reopen in Container」を押下します。

もし出ない場合はCtrl + Shift + pでコマンドパレットを開いて、「Reopen in Container」と入力します。

初回の場合は、このときにDockerfileがビルドされてコンテナが構築されて、VS Codeでコンテナ内にリモートアクセスできます。

3. Reactプロジェクトを作成する

VS Code上はNodeのコンテナにリモートアクセスしているため、nodeやnpm等のコマンドが使用できます。

VS CodeでCtrl + Shift + @ でターミナルを開いて、Reactなどのプロジェクトを作成します。

私はReact x Viteをよく使うので npm create vite@latestでプロジェクトを作成しています。

4. 作成したReactプロジェクト内に`devcontainer.json`をコピーする

この時点では以下のようなディレクト構成になっているかと思います。

ディレクトリ構成

./node-container
├── .devcontainer
│    ├── Dockerfile
│    └── devcontainer.json
│
├── react-project
│    ├── node_modules/
│    ├── src/
│    └── package.json
│
└── .gitignore

ここでreact-project以下に.devcontainerディレクトリをまるっとコピーします。

ディレクトリ構成

./node-container
├── .devcontainer
│    ├── Dockerfile
│    └── devcontainer.json
│
├── react-project
│    ├── .devcontainer
│    │    ├── Dockerfile
│    │    └── devcontainer.json
│    ├── node_modules/
│    ├── src/
│    └── package.json
│
└── .gitignore

この時に、コピーした.devcontainer以下のdevcontainer.jsonをプロジェクトに沿って名前等を変更しておくことをおすすめします。
特にDocker Volumeに指定しているnode_modulesは名前を変えておくと管理しやすいと思います。

devcontainer.json（react-project）

{
  "name": "<任意の文字列>",
  "build": {
    "dockerfile": "./Dockerfile"
  },
  "forwardPorts": [4321],
  "workspaceFolder": "/workspace",
  "mounts": [
    {
      "type": "bind",
      "source": ".",
      "target": "/workspace"
    },
    {
      "type": "volume",
      "source": "node_modules_<任意の文字列>",
      "target": "/workspace/node_modules"
    }
  ],
    （中略）
}

5. Nodeのコンテナからexitして、そのプロジェクトのコンテナにリモートアクセスする

一度VS Codeを閉じて、WSLでカレントディレクトリをReactプロジェクトに移動して、code .でVS Codeを起動します。

$ cd node-container/react-project
$ code .

あとは手順２と同様にコンテナにリモートアクセスすれば、Reactプロジェクトだけのコンテナが構築できます！

余談：.gitignoreについて

手順１で用意したNodeのコンテナディレクトリには以下の内容の.gitignoreを用意しています。

.gitignore

# すべてのファイルとフォルダを無視
/*

# .gitignoreで無視しないようにする
!.gitignore

# .devcontainerフォルダを無視しない
!/.devcontainer

これはNodeのコンテナとその下に作成したReactプロジェクトをそれぞれ別のリポジトリで管理するためです。

Reactプロジェクトは単体でリポジトリを管理しておくと、他サービスへデプロイするときに楽です。

また、プロジェクトルートにReactのソースがあるのもルーティングなどを考えるときに便利かなと思います。
（以前ReactプロジェクトをGitHub Pagesへデプロイしたときにディレクトリ問題でハマりました…）

おまけ

参考までに私が普段使っているdevcontainer.jsonとDockerfileも掲載します。
記事執筆時は公開していますが、もしかしたら突然非公開or削除する可能性があることはご了承ください。

おわりに

今回は普段私が使用している開発環境の構築方法を書いてみました。
ノートパソコンを買い替える前はNodeやらPythonやらをローカルに直接インストールしていましたが、今のノートパソコンでは一切開発言語を入れることなく開発できています！

Dockerめっちゃ便利！Devcontainerもめっちゃ便利！

もしアドバイス等あればコメントいただけると嬉しいです。

はじめに

構築方法（概要）

構築方法（詳細）

1. Nodeのコンテナ用のdevcontainer.jsonを用意する

2. Nodeのコンテナにリモートアクセスする

3. Reactプロジェクトを作成する

4. 作成したReactプロジェクト内にdevcontainer.jsonをコピーする

5. Nodeのコンテナからexitして、そのプロジェクトのコンテナにリモートアクセスする

余談：.gitignoreについて

おまけ

おわりに

1. Nodeのコンテナ用の`devcontainer.json`を用意する

4. 作成したReactプロジェクト内に`devcontainer.json`をコピーする