【備忘録】Dev Containers × Docker Composeを使ってみた

Last updated at 2025-07-26Posted at 2025-07-24

本記事の想定読者：

Dockerの体系的な学習をするより、とりあえず動かしてみたい
Dev ContainersとDocker Composeを使った具体例が知りたい
フロントエンド + バックエンド + DBの最低限の開発環境を構築したい

はじめに

最近Docker、Docker Compose, Dev Containersを触り始めました。とりあえず動く環境ができたので、作り方を忘れないうちに備忘録を残したいと思います。ここでは、Docker ComposeやDev Containersなどの詳細は割愛いたします。

Docker Compose：複数のコンテナをまとめて起動・管理
Dev Containers：コンテナ内でVSCodeが使用可能
Container Tools：GUIでコンテナ操作ができるVSCodeの拡張機能
Node.js：フロントエンドのビルド環境
Gradle：バックエンドのビルド環境
PostgreSQL：RDB

動作確認条件

Windows11
VSCode
WSL2 (Ubuntu)

環境構築

ディレクトリ構成

workspace
├── .devcontainer
│   └── devcontainer.json # Dev Containerの設定ファイル
├── frontend
│   └── Dockerfile        # Node.js 環境構築用
├── backend
│   └── Dockerfile        # Gradle 環境構築用
├── db
│   └── init.sql          # テーブル作成用
└── compose.yaml          # Docker Composeの設定ファイル

devcontainer.json

{
	"name": "app",// VSCodeで表示されるコンテナ名
	"dockerComposeFile": "../compose.yaml",// 利用するComposeファイルを指定
	"service": "backend",// デフォルトでアタッチするサービス
	"workspaceFolder": "/workspace",// エディタ内で表示するルートフォルダ
	"customizations": {
		"vscode": {
			"extensions": [
                // コンテナ内で自動インストールするVSCode拡張機能
				"vscjava.vscode-java-debug",
				"vscjava.vscode-java-test",
				"vscjava.vscode-java-dependency",
				"vscjava.vscode-gradle"
			]
		}
	}
}

compose.yaml

services:
  db:
    image: postgres:latest
    container_name: db
    environment:
      POSTGRES_DB: dbname
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
    ports:
      - "5432:5432"
    volumes:
      # 起動時に初期SQLを実行（読み取り専用でマウント）
      - ./db/init.sql:/docker-entrypoint-initdb.d/init.sql:ro
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    container_name: backend
    environment:
      - SPRING_DATASOURCE_URL=jdbc:postgresql://db:5432/dbname
      - SPRING_DATASOURCE_USERNAME=user
      - SPRING_DATASOURCE_PASSWORD=password
    depends_on:
      - "db"
    ports:
      - "8080:8080"
    volumes:
      - .:/workspace/
    command: /bin/bash
    # ターミナル有効化（コンテナの正常終了防止）
    tty: true
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: frontend
    ports:
      - "3000:5173"
    volumes:
      - .:/workspace/
    command: /bin/bash
    tty: true

/frontend/Dockerfile

FROM node:24-alpine3.21

RUN apk add --no-cache bash && \
    apk add --no-cache git

# ユーザーを変更しないとコンテナ内で作成したファイルの所有者がrootになる
# nodeユーザーは読み込むDockerイメージ内で作成済み（Docker Hubで確認可能）
USER node

# ワークディレクトリ作成
WORKDIR /workspace/frontend

/backend/Dockerfile

FROM gradle:8.5-jdk21

USER gradle

WORKDIR /workspace/backend

init.sql

CREATE TABLE users (
  id BIGINT GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
  username VARCHAR NOT NULL UNIQUE,
  password_hash VARCHAR NOT NULL,
  is_admin BOOLEAN NOT NULL DEFAULT FALSE
);

補足

複数のdevcontainer.jsonを使い分けたいとき

以下のようにdevcontainer.jsonを配置するとVSCodeでコンテナを開く際、使用するdevcontainer.jsonを選べるようになります。