Jiwon Min Developer

DockerとVS Code Dev Containerを活用した完璧な開発環境の構築ガイド

「私のPCではちゃんと動くのですが…」この言葉は、開発者が協力する際によく発生する悩ましい問題の一つです。開発者ごとに異なるオペレーティングシステム、インストールされたライブラリのバージョンの微妙な違い、各種環境変数の設定などは、予測不可能なバグを生み出し、プロジェクト全体の足を引っ張ることさえあります。このような問題を「環境の非一貫性」と呼びます。

この問題を解決するために登場した概念が、まさにコンテナ技術であり、その中心にはDockerがあります。Dockerはアプリケーションとそれに必要なすべての依存関係を一つの隔離された「コンテナ」としてパッケージングし、どんな環境でも同じように実行できることを保証します。もはや、開発環境と本番環境の違いによって苦しむ必要はなくなったのです。

ここからさらに一歩進んで、Visual Studio CodeのDev Container機能は、Dockerコンテナを単なる実行環境ではなく、完璧な「開発環境」へと変貌させます。VS Codeエディタ自体をコンテナ内部に接続することで、まるでローカル環境で開発しているかのように便利にコードの作成、デバッグ、ターミナルの使用が可能になります。この記事では、DockerとVS Code Dev Containerを活用し、誰でも、どのOSでも、同一で再現可能な開発環境を構築する方法を、ステップバイステップで詳しく解説していきます。

DockerとVS Code Dev Containerを活用した完璧な開発環境の構築ガイド

© AI Generated by Imagen 4.0

なぜ開発環境の分離が重要なのか？

プロジェクトに新しいチームメンバーが加わったと仮定してみましょう。このメンバーは、プロジェクトに必要な言語ランタイム（Python、Node.jsなど）、データベース、各種ライブラリを自身のノートPCにインストールする必要があります。この過程で、次のような問題が発生する可能性があります。

  • オペレーティングシステム（OS）の違い：Windows、macOS、Linuxのユーザーは、インストールプロセス、コマンド、パスなどで微妙な違いに直面します。
  • 依存関係の衝突（Dependency Hell）：プロジェクトAはPython 3.8を要求し、プロジェクトBは3.10を要求する場合のように、システム全体にインストールされたライブラリのバージョンが衝突することがあります。
  • 「設定の沼」：数多くの環境変数や設定ファイルを手動で一つ一つ合わせる必要があるため、時間がかかり、ミスも発生しやすくなります。

これらの問題は、最終的に「自分のPCでは動くのに、他の人のPCでは動かない」という状況を引き起こし、不要なデバッグ時間とチーム全体の生産性の低下につながります。開発環境の分離と標準化は、これらの問題を根本的に解決するための必須の第一歩です。

Dockerコンテナ：一貫性の始まり

Dockerは、アプリケーションの実行に必要なすべて（コード、ランタイム、システムツール、ライブラリなど）をイメージ（Image）というパッケージにまとめます。そして、このイメージを実行すると、コンテナ（Container）という隔離されたプロセスになります。

最大のメリットはポータビリティ（Portability）です。Dockerがインストールされている場所であれば、どこでも同じイメージから同じコンテナを実行できます。開発者のノートPC、テストサーバー、実際の稼働（本番）サーバーのすべてで、同じ環境が保証されるのです。Dockerfileというシンプルなテキストファイルに必要な環境をコードとして定義するため、環境設定自体がバージョン管理の対象となり、透明で再現可能になります。

VS Code Dev Container：開発体験の革新

Dockerは優れた実行環境を提供しますが、開発プロセス自体は依然として開発者のローカルマシン上で行われます。ソースコードはローカルにあり、エディタもローカルで実行されます。VS CodeのDev Container（Development Container）拡張機能は、この境界を取り払います。

Dev Containerを使用すると、VS Codeは指定されたDockerコンテナの内部に接続し、そのコンテナ自体をフル機能の開発環境として使用するようになります。

  • コードの自動補完、リンティング、デバッグ： VS Codeのすべての強力な機能がコンテナ内部で直接動作します。
  • ターミナル： VS Codeの内蔵ターミナルを開くと、ホストマシンではなくコンテナのシェルに直接アクセスします。
  • 拡張機能： 開発に必要なVS Code拡張機能もコンテナ内部に分離してインストールし、実行できます。

つまり、開発者は自身のPCにプロジェクト関連のツールやライブラリを一切インストールすることなく、DockerとVS Codeだけで、すべての開発をコンテナ内で完結させることができます。

実践！Dev Container環境の構築

では、実際に簡単なNode.jsプロジェクトのためのDev Container環境を構築してみましょう。

事前準備

まず、以下のツールがインストールされている必要があります。

  1. Docker Desktop: お使いのOSに合ったバージョンをインストールします。DockerエンジンをGUIで簡単に管理できるようになります。 (Docker Desktop ダウンロード)
  2. Visual Studio Code: 最新バージョンのVS Codeをインストールします。 (VS Code ダウンロード)
  3. Dev Containers 拡張機能: VS Codeマーケットプレイスでms-vscode-remote.remote-containersを検索してインストールします。

ステップ1：プロジェクトフォルダの作成とVS Codeの起動

まず、プロジェクト用の空のフォルダを一つ作成し、そのフォルダをVS Codeで開きます。

mkdir my-dev-container-project
cd my-dev-container-project
code .

ステップ2：Dev Container設定ファイルの追加

VS Codeが開いたら、F1キーを押すか、Ctrl+Shift+P（macOS: Cmd+Shift+P）を押してコマンドパレットを開きます。そして、Dev Containers: Add Dev Container Configuration Files...と入力して選択します。

すると、様々な言語やフレームワークのテンプレートリストが表示されます。ここではNode.js & TypeScriptを選択します。その後、バージョンを選択するメッセージが表示されたら、希望のバージョンを選択します（例: 18）。追加でインストールする機能（features）を選択するウィンドウが表示されたら、ひとまずOKを押して次に進みます。

ステップ3：生成されたファイルの分析（.devcontainerフォルダ）

上記の手順を完了すると、プロジェクトのルートに.devcontainerというフォルダが生成され、その中にdevcontainer.jsonファイルとDockerfileが作成されます。

devcontainer.json

このファイルはDev Containerの核となる設定ファイルです。

// .devcontainer/devcontainer.json
{
	"name": "Node.js & TypeScript",
	// Dockerfileを使用してイメージをビルドするように設定
	"build": {
		"dockerfile": "Dockerfile"
	},

	// VS Code関連のカスタマイズ
	"customizations": {
		"vscode": {
			"settings": {},
			// コンテナにインストールするVS Code拡張機能のリスト
			"extensions": [
				"dbaeumer.vscode-eslint"
			]
		}
	},

	// コンテナ作成後に実行するコマンド
	// "postCreateCommand": "npm install",

	// ホストとコンテナ間のポートフォワーディング設定
	"forwardPorts": [3000],

	// コンテナに接続するユーザー
	"remoteUser": "node"
}
  • build.dockerfile: どのDockerfileを使用して環境を構築するかを指定します。
  • customizations.vscode.extensions: このコンテナ環境で自動的にインストールし、有効化するVS Code拡張機能のIDリストです。
  • forwardPorts: コンテナ内部のポートをローカルマシンのポートに接続します。Webサーバー開発時に便利です。
  • postCreateCommand: コンテナが初めて作成された後に自動的に実行するシェルコマンドを指定できます（例：npm install）。

Dockerfile

このファイルは、Dockerイメージをどのように作成するかを定義するスクリプトです。

# .devcontainer/Dockerfile
# 公式Node.jsイメージをベースに開始
FROM mcr.microsoft.com/devcontainers/typescript-node:0-18

# [Optional] システムパッケージのインストールなど、追加設定が可能
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
#     && apt-get -y install --no-install-recommends <your-package-list-here>

このDockerfileは、Microsoftが提供するビルド済みのNode.js開発用イメージをベースにしています。必要であれば、apt-getなどのコマンドを使用して、追加のシステムライブラリをインストールすることもできます。

ステップ4：コンテナでプロジェクトを再度開く

設定ファイルの作成が完了すると、VS Codeの右下に「Reopen in Container」という通知ポップアップが表示されます。このボタンをクリックします。

もし通知を見逃した場合は、F1キーを押してコマンドパレットを開き、Dev Containers: Reopen in Containerを実行してもかまいません。

すると、VS CodeはDockerfileを基にDockerイメージをビルドし、そのイメージからコンテナを実行した後、コンテナ内部にVS Codeのバックエンドサーバーをインストールして接続する作業を自動的に行います。このプロセスは、初回実行時には数分かかることがあります。

ステップ5：開発の開始と環境の確認

すべてのプロセスが完了すると、VS Codeウィンドウが再度開きます。これで、コンテナ内で開発を始める準備が整いました。

VS Codeの内蔵ターミナル（Ctrl+\`）を開いてみましょう。そして、Node.jsのバージョンを確認してみてください。

node -v
# 出力: v18.x.x (Dockerfileで指定したバージョン)

これで、このターミナルで実行するすべてのコマンド（npm install、npm startなど）は、ホストマシンではなく、完全に隔離されたDockerコンテナ内で実行されます。チームの誰もがこのプロジェクトをGitからクローンし、「Reopen in Container」をクリックするだけで、わずか数分であなたと100%同じ開発環境を整えることができるのです。

参考資料