【Docker+VSCode】Devcontainerの最小構成テンプレート

概要

VSCodeでDockerDevcontainerの最小構成テンプレートです。
以下の方に有用だと思います。

• Devcontainerのためだけに、Dockerfile、docker-compose.ymlを二重で作成している方
• 検証用や勉強用にとりあえず早く環境を作りたい方

ディレクトリ構成

.tree 
├── .devcontainer
│   └── devcontainer.json
├── Dockerfile
├── app
│   └── index.html
└── docker-compose.yml

docker-compose.yml

version: "3"
services:
  app:
    build: .
    volumes:
      - .:/src
    tty: true

※ docker-compose.ymlの説明については省略します。

.devcontainer/devcontainer.json

{
  "dockerComposeFile": "../docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/src",
  "customizations": {
    "vscode": {
      "extensions": [
        "GitHub.copilot",
      ]
    }
  }
}

以下に.devcontainer/devcontainer.jsonの各定義について説明します。

1. 以下で参照するdocker-compose.ymlのpathを指定します。

     "dockerComposeFile": "../docker-compose.yml",
   

2. 以下でdocker-compose.ymlにて定義したサービスを指定します。
   これにより、Devcontainerでどのサービスで作業をするかを指定できます。
   今回はappサービスを定義したので、appを指定しています。

     "service": "app",
   

3. 以下で、Devcontainerでコンテナを起動した際に最初に開くディレクトリを指定します。
   今回はdocker-compose.ymlにてコンテナ内の/srcディレクトリにバインドマウントするように設定しているため、/srcを指定しています。

     "workspaceFolder": "/src",
   

4. 以下で、Devcontainerでコンテナを起動した際にインストールしたい任意のVSCode拡張機能を指定します。
   今回はGitHub.copilotを指定しています。

     "customizations": {
       "vscode": {
         "extensions": [
           "GitHub.copilot",
         ]
       }
     }
   

※ 追加方法はこんな感じでGUIから追加できます。

実用例

以下、私がUdemyのReact講座を受講した際に、速攻で構築した実用例です。

.devcontainer/devcontainer.json

{
  "dockerComposeFile": "../docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/src",
  "customizations": {
    "vscode": {
      "extensions": [
        "GitHub.copilot",
        "ritwickdey.LiveServer"
      ]
    }
  },
}

docker-compose.yml

version: '3'
services:
  app:
    image: node:22-bookworm
    ports:
      - "3000:3000"
    volumes:
      - .:/src
    entrypoint: tail -f /dev/null

以上！！