概要

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の各定義について説明します。

以下で参照するdocker-compose.ymlのpathを指定します。
```
  "dockerComposeFile": "../docker-compose.yml",
```
　
以下でdocker-compose.ymlにて定義したサービスを指定します。
これにより、Devcontainerでどのサービスで作業をするかを指定できます。
今回はappサービスを定義したので、appを指定しています。
```
  "service": "app",
```
　
以下で、Devcontainerでコンテナを起動した際に最初に開くディレクトリを指定します。
今回はdocker-compose.ymlにてコンテナ内の/srcディレクトリにバインドマウントするように設定しているため、/srcを指定しています。
```
  "workspaceFolder": "/src",
```
　
以下で、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

以上！！