VS Codeの`devcontainer.json`と`docker-compose.yml`：連携と役割を理解する

VS CodeのRemote Containers拡張機能を使うと、Dockerコンテナ内での開発が簡単になります。特に、devcontainer.jsonとdocker-compose.ymlの連携により、複数のコンテナを効率的に管理できます。今回は、これらのファイルの役割と連携方法を初心者向けに解説します。

ディレクトリ構成

project-root/
│
├── .devcontainer/
│   ├── devcontainer.json
│   └── docker-compose.yml
│
├── app/
│   ├── package.json
│   └── ...
│
└── db/
    └── ...

この構成では、project-rootディレクトリがプロジェクトのルートディレクトリです。.devcontainerディレクトリには、VS Codeの設定ファイルdevcontainer.jsonとdocker-compose.ymlが配置されています。

1. devcontainer.json：VS Codeの設定ファイル

devcontainer.jsonは、VS CodeのRemote Containers拡張機能で使用される設定ファイルです。

{
  "name": "App with Database",
  "dockerComposeFile": "./docker-compose.yml",
  "service": "app",
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  "extensions": ["dbaeumer.vscode-eslint"]
}

このファイルで、どのDockerイメージやDockerfileを使用するか、VS Codeの設定や拡張機能などを定義します。

2. docker-compose.yml：複数のコンテナを定義

docker-compose.ymlは、複数のコンテナとその関連設定を一元的に管理するためのファイルです。

version: '3'
services:
  app:
    image: node:14
    volumes:
      - .:/app
    working_dir: /app
    command: npm start
  db:
    image: postgres:13
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password

例えば、ウェブアプリケーションとデータベースの2つのコンテナを同時に起動したい場合、このファイルでそれらの設定を行います。

3. devcontainer.jsonでのdocker-composeの利用

devcontainer.json内でdockerComposeFileを指定することで、VS Codeはdocker-compose.ymlを読み込み、その設定に基づいて複数のコンテナを自動的に起動します。そして、serviceキーで指定したコンテナにVS Codeが接続します。

まとめ

devcontainer.jsonとdocker-compose.ymlの連携により、VS CodeでのDockerコンテナ内の開発が非常に効率的になります。特に、複数のコンテナを使用するプロジェクトでは、これらのファイルをうまく活用することで、開発環境のセットアップや管理が簡単になります。