2025/10/21

【開発環境構築の強い味方】Dev Containersって何？

技術

こんにちは、やまだゆうです。

今回はVisual Studio Codeの拡張機能「Dev Containers」について解説と使い方をお伝えします！

この記事が役に立つ方

• Dev Containersについて初めて学ぶ人
• サンプルを使ってDev Containersを試してみたい人

この記事の内容

1. Dev Containersとは
2. 実際に試してみよう
3. 解説
4. 参考資料

Dev Containersとは

Dev ContainersはVisual Studio Codeの拡張機能で、開発環境をまるごとコンテナの中に用意することができます。

Dev Containersを利用することで以下のメリットを享受できます。

• 環境の統一と再現性：チームメンバーや CI/CD で同じ環境が自動構築できます。
• ローカル環境を汚さない：言語やツール、ライブラリをコンテナ内に隔離できるため、ローカルにインストール不要になります。
• オンボーディング効率化：ボタン一つで開発環境が自動構築できるので、新メンバーはすぐに開発を始められます。

実際に試してみよう

それでは実際にDev Containersを試してみましょう。

ぼくのGithubにリポジトリを公開しているサンプルを使って解説するので、git cloneしてご活用ください！

yamaday0u/devcontainers-practice

実行マシンはMacBookを前提として説明します。

事前準備

事前準備として以下のこと済ませておきましょう。

• Dockerのインストール
• Visual Studio Codeのインストール
• Dev Containersのインストール

Dev Containersを起動

Dev Containersを起動する方法は2つあります。

• 方法１：エディタ左下のボタンをクリックして起動
• 方法２：コマンドパレットから起動

お手軽なのは方法１ですが、両方のやり方をご紹介します。

方法１：エディタ左下のボタンをクリックして起動

ワンステップでDev Containersを起動できます。

方法２：コマンドパレットから起動

コンテナの起動が完了してからhttp://localhost:3000を開くと、Node.jsのExpressで起動したサーバーが立ち上がっていることが確認できるはずです。

また、Visual Studio CodeのターミナルでNode.jsのバージョンを確認しましょう。

解説

ひとまずDev Containerで開発環境を構築できたことを確認したところで、関連ファイルの解説をします。

関連ファイルは.devcontainerディレクトリに配置します。

.
├── .devcontainer
│   ├── devcontainer.json // Dev Containerの設定
│   └── Dockerfile // Dev Containerにビルドするコンテナイメージ
├── ⋯
└── ⋯

DockerfileにはDockerコンテナに使用するイメージ設定を定義しています。

FROM node:22.20

WORKDIR /workspace

COPY package*.json ./

RUN npm ci # package-lock.jsonの内容で依存ライブラリをインストール

Node.jsのバージョンは22.20で固定して、依存ライブラリのインストールが自動で実行されます。

先ほど確認したNode.jsのバージョンは、FROM node:22.20に由来します。

devcontainer.jsonではDev Containerの設定を定義しています。

{
  "name": "Node.js",
  "build": {
    "dockerfile": "Dockerfile",
    "context": ".."
  },
  "workspaceFolder": "/workspace",
  "mounts": [
    "source=${localWorkspaceFolder},target=/workspace,type=bind",
    "source=${localWorkspaceFolderBasename}_node_modules,target=/workspace/node_modules,type=volume"
  ],
  "postStartCommand": "npm run dev",
  "forwardPorts": [3000]
}

設定している各項目の意味は以下のとおりです。

他にたくさん設定項目があります。更に詳しく知りたい場合は公式ドキュメントを参照してください。

Dev Container metadata reference

参考資料

• Developing inside a Container
• Dev Containers – Visual Studio Marketplace
• Dev Container metadata reference

yamaday0uを応援お願いします！あなたの１クリックが励みになります。
>> にほんブログ村

Dev Containers Node.js

• facebook
• Tweet
• hatebu
• LINE
• Read Later