この記事で解決すること
「環境構築で半日溶けた」
「新しいPCに移行したらまた環境作り直し」
「"私の環境では動くんですけど..."」
こういう問題、Dev Containerで全部解決できます。
Dev Containerとは
VS Code（またはCursor）の機能で、Dockerコンテナ内に開発環境を丸ごと構築できる仕組みです。
リポジトリをclone
↓
VS Codeで開く
↓
「Reopen in Container」をクリック
↓
完璧な開発環境が立ち上がる
Node.jsのバージョン、データベース、各種ツール、VS Codeの拡張機能まで、全部コードで定義できます。
最小構成で始める
ファイル構成
your-project/
├── .devcontainer/
│ └── devcontainer.json
├── src/
└── ...
devcontainer.json（最小）
{
"name": "My Project",
"image": "mcr.microsoft.com/devcontainers/typescript-node:20",
"postCreateCommand": "npm install"
}
たったこれだけで、Node.js 20の開発環境が手に入ります。
実践的な構成
実際のプロジェクトでは、DB、Redis、メールサーバーなども必要ですよね。
ファイル構成
your-project/
├── .devcontainer/
│ ├── devcontainer.json
│ └── docker-compose.yml
├── src/
└── ...
devcontainer.json
{
"name": "Full Stack Dev",
"dockerComposeFile": "docker-compose.yml",
"service": "app",
"workspaceFolder": "/workspace",
"features": {
"ghcr.io/devcontainers/features/git:1": {},
"ghcr.io/devcontainers/features/github-cli:1": {}
},
"customizations": {
"vscode": {
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"prisma.prisma",
"bradlc.vscode-tailwindcss"
],
"settings": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
},
"postCreateCommand": "npm install && npx prisma generate",
"forwardPorts": [3000, 5432, 6379],
"remoteUser": "node"
}
docker-compose.yml
services:
app:
image: mcr.microsoft.com/devcontainers/typescript-node:20
volumes:
- ../:/workspace:cached
command: sleep infinity
depends_on:
- db
- redis
- mailhog
db:
image: postgres:16
restart: unless-stopped
environment:
POSTGRES_USER: dev
POSTGRES_PASSWORD: dev
POSTGRES_DB: myapp
volumes:
- postgres-data:/var/lib/postgresql/data
redis:
image: redis:7-alpine
restart: unless-stopped
mailhog:
image: mailhog/mailhog
ports:
- "8025:8025"
volumes:
postgres-data:
何が嬉しいか
1. 環境構築が一瞬
git clone git@github.com:you/project.git
code project # VS Codeで開く
# 「Reopen in Container」をクリック
# 数分待つだけ
新メンバーのオンボーディングが劇的に楽になります。「READMEの手順通りにやったけど動かない」がなくなる。
2. 環境の差異がなくなる
全員が同じDockerイメージを使うので、
- Node.jsのバージョン違い
- OSの違い（Mac/Windows/Linux）
- グローバルにインストールしたツールの有無
こういった「環境差異バグ」が消えます。
3. PCを変えても即復帰
新しいPCに移行しても、Docker DesktopとVS Codeさえ入れれば、あとはcloneするだけ。環境構築のやり直しは不要。
4. プロジェクトごとに環境を分離
Node.js 18のプロジェクトと20のプロジェクトを同時に開発できる。ホストマシンを汚さない。
Tips
featuresで追加ツールを簡単導入
{
"features": {
"ghcr.io/devcontainers/features/aws-cli:1": {},
"ghcr.io/devcontainers/features/terraform:1": {},
"ghcr.io/devcontainers/features/docker-in-docker:2": {}
}
}
AWS CLI、Terraform、Docker-in-Dockerなど、よく使うツールはfeaturesで一発導入できます。
環境変数の管理
{
"containerEnv": {
"DATABASE_URL": "postgresql://dev:dev@db:5432/myapp",
"REDIS_URL": "redis://redis:6379"
}
}
開発用の環境変数はdevcontainer.jsonに書いておくと楽です。
postCreateCommandの使い分け
| コマンド | 実行タイミング |
|---|---|
| postCreateCommand | コンテナ作成後に1回だけ |
| postStartCommand | コンテナ起動のたびに |
| postAttachCommand | VS Codeがアタッチするたびに |
npm installはpostCreateCommand、開発サーバー起動はpostStartCommandで分けるのがおすすめ。
よくある疑問
Q: パフォーマンスは大丈夫？
MacでDocker使うと遅い問題はありますが、最近はかなり改善されています。cachedマウントを使う、node_modulesをボリュームに逃がす、などの工夫で実用レベルになります。
Q: オフラインで使える？
一度イメージをpullしておけば、オフラインでも起動できます。出先でネットがなくても開発可能。
Q: Cursorでも使える？
使えます。VS Code互換なので、同じdevcontainer.jsonがそのまま動きます。
まとめ
- Dev Containerで「clone即開発」を実現できる
- Docker Compose連携でDB/Redis/メールサーバーも一発起動
- 環境差異バグが消える
- PC移行も怖くない
一度設定してしまえば、その後の開発体験が劇的に変わります。まだ使っていないなら、ぜひ試してみてください。