More than 1 year has passed since last update.

VSCode+Dev Container+Docker+docker-composeの複数コンテナ開発環境構築

Posted at 2022-11-23

目的

複数のコンテナを使うシステム開発をする際、docker-composeを使いたい
VSCode+DevContainerでdocker-composeを使う方法があるらしいが、一番開発しやすい方法で環境構築したい

環境構築の方向性選定

まず、VSCode+DevContainerでdocker-composeを使う方法を3種類試した。

空のワークスペースに、docker-compose.ymlとdevcontainer.jsonを含む.devcontainerディレクトリを作成
既存のdocker-composeで動く環境に、docker-compose.ymlとdevcontainer.jsonを含む.devcontainerディレクトリを作成
既存のdocker-composeで動く環境を、各コンテナに対応するディレクトリが存在するようにしておき、それぞれのディレクトリに.devcontainer.jsonを作成

これらのうち、開発環境がVSCodeに依存しすぎず、複数のサービス開発が同時にやりやすい点で、3. が開発に最適と判断した。
以降、3. の構築手順を記載。

構築手順

（環境構築のみを検証したため、何のサービスも動きません）

下記のようなディレクトリ、ファイルを作成

📁 project-root
    📁 container1-src
        📄 .devcontainer.json
        📄 Dockerfile
    📁 container2-src
        📄 .devcontainer.json
    📄 docker-compose.yml

各ファイルの内容は下記の通り

docker-compose.yml

version: '3'
services:
  container-1:
    build:
      context: ./container1-src
      dockerfile: Dockerfile
    volumes:
      # Mount the root folder that contains .git
      - .:/workspace:cached
    command: /bin/sh -c "while sleep 1000; do :; done"
    links:
      - container-2
  container-2:
    image: ubuntu:bionic
    volumes:
      # Mount the root folder that contains .git
      - .:/workspace:cached
    command: /bin/sh -c "while sleep 1000; do :; done"

container1-src/.devcontainer.json

{
    "name": "Container 1",
    "dockerComposeFile": ["../docker-compose.yml"],
    "service": "container-1",
    "shutdownAction": "none",
    "workspaceFolder": "/workspace/container1-src"
  }

FROM fnndsc/python

container2-src/.devcontainer.json

{
    "name": "Container 2",
    "dockerComposeFile": ["../docker-compose.yml"],
    "service": "container-2",
    "shutdownAction": "none",
    "extensions": ["dbaeumer.vscode-eslint"],
    "workspaceFolder": "/workspace/container2-src"
  }

VSCodeでコンテナを起動
- project-rootフォルダをVS Codeで開く
- 左下の「><」ボタンをクリックし、「Open Folder in Container」を選択
- container1-srcまたはcontainer2-srcを選択
  - 選択したコンテナの新しいウィンドウが開く
  - 片方のコンテナのウインドウを開いている場合でも、docker-compose.ymlのすべてのサービスが動いている状態になる

$ docker-compose ps
Name Command State Ports
docker-compose-vscode-test_container-1_1 /bin/sh -c echo Container … Up
docker-compose-vscode-test_container-2_1 /bin/sh -c while sleep 100 … Up

手順・.devcontainer.jsonの設定等、より詳細はこちらを参照

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up