【Docker】Dev Containers｜VSCodeの機能で開発環境の設定をコンテナ化して共有する

VS CodeのDev Containersは、開発環境全体をDockerコンテナ内で実行し、
チーム間で一貫した環境を共有できる強力な機能です。

今回は開発環境を共有することが目的なので、HTML,CSS,JavaScriptの開発環境を構築する。

1. 前提条件

• VSCodeのインストール
• Docker Desktopのインストールと起動
• Dev Containers拡張機能のインストール
  VS Codeの拡張機能から「Dev Containers」を検索してインストール

2. コンテナの起動方法

3. 実践的な設定例

ディレクトリ構成

testShered/
├── .devcontainer/
│   ├── devcontainer.json
│   └── docker-compose.yml
├── src/
└── package.json

役割の違い

devcontainer.json

・VS Code に「どうやってコンテナを起動するか」を指示
・VS Code の拡張機能、設定、コマンドなどを定義
・Docker Compose ファイルの場所を指定

docker-compose.yml

・Docker に「コンテナをどう構築するか」を指示
・イメージ、ボリューム、ネットワーク、環境変数などを定義
・Docker の設定ファイル

連携の仕組み

devcontainer.json
  ↓ (参照)
docker-compose.yml
  ↓ (実行)
Docker コンテナ起動

例えるならば、

docker-compose.yml = 家の設計図（建物の構造）

devcontainer.json = 内装の指示書（家具の配置、VS Code の設定）

両方あって初めて完全な開発環境になります。

json

.devcontainer/devcontainer.json:

{
  "name": "Node.js (Docker Compose)",
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",

  "features": {
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/github-cli:1": {}
  },

  // ポートフォワーディング
  "forwardPorts": [3000, 8080],

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

  // VS Code の設定と拡張機能
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ],
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
    }
  }

  // rootユーザーとして接続する場合はコメントを外す
  // "remoteUser": "root"
}

Compose

.devcontainer/docker-compose.yml:

version: '3.8'

services:
  app:
    image: mcr.microsoft.com/devcontainers/javascript-node:1-22-bookworm
    volumes:
      - ..:/workspace:cached
    working_dir: /workspace
    command: sleep infinity
    ports:
      - "3000:3000"
      - "8080:8080"
    environment:
      - NODE_ENV=development

1つだけにする方法

devcontainer.json のみで完結させることもできます。
この場合、docker-compose.yml は不要です。

{
  "name": "Node.js",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:1-22-bookworm",
  "features": {
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/github-cli:1": {}
  }
}

シンプルな構成なら devcontainer.json だけで OK。
複数サービス（DBなど）が必要なら docker-compose.yml も使う。

4.package.jsonの作成

{
  "name": "testShered",
  "version": "1.0.0",
  "description": "Web development project with HTML, CSS, and JavaScript",
  "main": "index.html",
  "scripts": {
    "start": "npx live-server",
    "dev": "npx live-server --port=3000",
    "lint:js": "eslint *.js",
    "lint:css": "stylelint **/*.css",
    "format": "prettier --write \"**/*.{html,css,js}\""
  },
  "keywords": [
    "html",
    "css",
    "javascript"
  ],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "eslint": "^8.57.0",
    "prettier": "^3.2.5",
    "stylelint": "^16.2.1",
    "stylelint-config-standard": "^36.0.0",
    "live-server": "^1.2.2"
  }
}

主な内容 – スクリプト

・npm start
– 開発サーバー起動（デフォルトポート8080）
・npm run dev
– ポート3000で起動
・npm run lint:js
– JavaScriptのコードチェック
・npm run lint:css
– CSSのコードチェック
・npm run format
– コード整形

主な内容 – 開発ツール

・live-server
– ファイル変更を自動検知してブラウザリロード
・eslint
– JavaScriptのコード品質チェック
・prettier
– コード整形
・stylelint
– CSSのコードチェック

セットアップ手順

# 依存関係をインストール
npm install

開発サーバーの起動

npm start

VSCodeで「ポート8080が開いています」という通知が表示されるので、ブラウザで確認できます。

5. チームでの共有方法（リーダー – 共有する側）

1. .devcontainer フォルダをGitにコミット

1.Gitアカウントを作成(既存のGitアカウントと同様で良い。)

git config --global user.name "ユーザー名"

git config --global user.email "メールアドレス"

2.Gitを初期化

git init

3.safe.directory の設定

git config --global --add safe.directory /workspaces/testShared

4.GitとGithubの連携

git remote add ユーザー名1 https://github.com/ユーザー名2/testShered

5.Gitにファイルを追加

git add .

6.Gitに追加したファイルにメッセージをつける

git commit -m "メッセージ"

7.ファイルアップロードの準備

git push --set-upstream ユーザー名 master

8.GitからGithubにファイルをアップロード

git push

6. チームでの共有方法（メンバー – 共有される側）

チームメンバーがリポジトリをクローンする手順

前提条件

チームメンバーに以下がインストールされている必要があります

• VSCodeのインストール
• Docker Desktopのインストールと起動
• Dev Containers拡張機能のインストール
  VS Codeの拡張機能から「Dev Containers」を検索してインストール

クローンと起動手順

1.VSCodeを開く
2.コマンドパレットを開く
Windows/Linux: [Ctrl] + [Shift] + [P]
Mac: [Cmd] + [Shift] + [P]

3.以下を入力して選択

Dev Containers: Clone Repository in Container Volume...

4.リポジトリURLを入力

https://github.com/ユーザー名/リポジトリ名

5.Enter キーを押す
VSCodeが自動的にコンテナを起動:
・リポジトリをクローン
・Dockerコンテナをビルド
・devcontainer内でVSCodeを開く

VSCodeで開き、「コンテナーで再度開く」or「コンテナーでフォルダを開く」を選択
これで、全員が同じ開発環境で作業開始できる。

さらに、GitとGithubを絡ませる場合は上へ

———————————————以下、未検証———————————————-

6. よく使う機能

環境変数の設定

json

{
  "remoteEnv": {
    "MY_VARIABLE": "value"
  }
}

マウントの追加

json

{
  "mounts": [
    "source=${localEnv:HOME}/.ssh,target=/home/vscode/.ssh,readonly,type=bind"
  ]
}

rootユーザーでの実行

json

{
  "remoteUser": "root"
}

まとめ

Dev Containersを使うことで、「私の環境では動くのに…」という問題を解決し、オンボーディングも大幅に簡素化できます。設定ファイルをバージョン管理することで、チーム全体で一貫した開発環境を維持できます。