Dev Container を使ってみた 〜 Next.js の開発環境をコンテナ化する

Dev Containerとは何か

Dev Container は、VS Code が主導し、現在ではオープンソースの Dev Container Specification として策定されているコンテナの中に開発環境を作るための仕様です。

プロジェクトのリポジトリには、.devcontainer/devcontainer.jsonを置き、どの Docker イメージを使うのか、どの VS Code 拡張機能を入れるのか、初回に実行するコマンド（npm install など）等を定義できます。

Dev Containerを使うメリット

1. 一貫した環境で環境差分がなくなる

チーム全員が同じイメージを使うことで、Node のバージョンやツールのバージョンを揃えられます。また、「Windows だと動かない」「Mac だと動く」といった OS 差分もかなり軽減できます。

2. 誰でも即座に開発を始められる

Dev Container 側がイメージの取得や初期コマンドインストールを勝手にやってくれるため、ローカルに Node や npm を入れていなくても、コンテナ内に入れば開発を始められます。

3. ローカル環境をクリーンに保てる

ローカル環境は汚したくない…という場合でもコンテナ内部で必要なツールを入れるため、ローカルに入れる必要はありません。

Dev Container と Docker Compose の違い

個人的に Dev Container と Docker Compose は何が違うのか曖昧になったのでまとめてみました。

• Dev Container: 「開発用の VS Code 環境」を用意するための仕組み
  • エディタ拡張や初回コマンド（npm install など）も含めて「開発体験」を定義する
• Docker Compose: 「アプリケーションを構成する複数コンテナ」をまとめて起動するための仕組み
  • Web アプリ本体 + DB + キャッシュサーバ などをまとめて起動したい

Dev Container を使ってみる

実際に Dev Container を使ってみます。今回は Next.jsプロジェクトで試していきます。

前提

事前に以下がインストールされている前提です。

• VS Code
• Docker Desktop
• VS Code 拡張機能「Dev Containers」

Next.js アプリ用のディレクトリ作成

mkdir sample-nextjs
cd sample-nextjs

Dev Container の設定ファイルを作成する

以下の手順でDev Containerの設定を行う。
※ ベースイメージはnodeのバージョン等は例のため、違うものを選択しても問題ないです。

1. VS Code で sample-nextjs フォルダを開く
2. コマンドパレット（macの場合は ⌘ + Shift + P）を開く
3. Dev Containers: Add Dev Container Configuration Files... を選択する
4. ワークスペースに構成を追加する を選択する
5. ベースイメージとして Node.js & TypeScript を選択する
6. バージョンは22-bookwormを選択
7. OKを選択する

完了すると、以下の devcontainer.json が自動で作成される。

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
	"name": "Node.js & TypeScript",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Next.jsのポート3000をローカルにフォワード
	"forwardPorts": [3000], 

	// コンテナ作成後に自動で実行するコマンド（例：npm install）
	"postCreateCommand": "npm install", 

	// VS Codeの拡張機能（Next.js開発に役立つものを自動でインストール）
	"customizations": {
		"vscode": {
			"extensions": [
				"dbaeumer.vscode-eslint",
				"esbenp.prettier-vscode"
			]
		}
	}

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}

似た名前のコマンドとの違い

これらのコマンドは、すべてdevcontainer.jsonのルートで定義できます。

• postCreateCommand: コンテナ作成直後に一度だけ実行（npm install など重い初期化処理向け）
• postStartCommand: コンテナ起動のたびに実行（docker compose up など毎回必要な処理向け）
• postAttachCommand: VS Code が接続するたびに実行（軽い環境チェックなど）

Dev Container を起動する

VS Codeの左下にあるリモートインジケーターをクリックし、Reopen in Containerを選択する。

コンテナの作成等が行われるため、少し待つとVS Code のターミナルに「node → /workspaces/sample-nextjs」と表示が切り替わる。

※ 事前にDocker Desktopを起動しておく必要あり

ターミナルでnodeやnpmのバージョンを確認すると以下のように出る。

$ node -v
v22.16.0
$ npm -v
10.9.2

Next.jsアプリを作成する

コンテナ内のターミナルで以下を実行する。

Next.jsの設定は好みのものを選択可能。今回はrecommended defaults を選択する。

$ npm create next-app sample

? Would you like to use the recommended Next.js defaults? › - Use arrow-keys. Return to submit.
❯   Yes, use recommended defaults
    TypeScript, ESLint, Tailwind CSS, App Router
    No, reuse previous settings
    No, customize settings

作成が完了したらアプリを起動すると http://localhost:3000 を開いた時に、Next.js の画面が表示される。

$ cd sample
$ npm run dev

まとめ

本記事では、Next.js プロジェクトを例に Dev Container の基本的な使い方を紹介しました。

• .devcontainer/devcontainer.json を用意することで、Node のバージョンや VS Code 拡張を含めた「開発環境」をコードで定義できる
• チーム全員が同じコンテナイメージを使うことで、OS やツールバージョンの差分による「動かない問題」をかなり減らせる
• ローカル環境を汚さずに、新しいプロジェクトやツールを試せる

今更ながら使ってみましたが、かなり簡単にセットアップできるので、楽に環境を作りたいときにとても便利だと感じました。