VS Code+Dev Containerでdocker-composeを扱う

2022年11月24日2022年11月25日

検証した環境

Windows11 + WSL2 (Ubuntu20.04)
VS Code 1.73.1

手順

準備

Dockerをインストール、VS Codeをインストールし、拡張機能Devcontainerを追加
- 参考：WindowsでLinux(WSL2)+Docker+VSCodeでの開発環境を構築
docker-composeをインストール
- Ubuntuの場合下記のコマンド
  $ sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
  $ sudo chmod +x /usr/local/bin/docker-compose
- 参考：https://docs.docker.com/compose/install/

Workspace作成

ディレクトリ・ファイル

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

📁 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",
    "extensions": ["golang.go"],
    // Open the sub-folder with the source code
    "workspaceFolder": "/workspace/container1-src"
  }

container1-src/Dockerfile

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"
}

Container起動

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のポイント

各サービス（コンテナ）に対して.devcontainer.jsonを作成することですべてコンテナ上で開発することができる
下記、設定値の詳細
- “dockerComposeFile"
  - docker-compose.ymlのパスを設定する
  - リスト形式でいくつかのファイルを指定することができ、その場合設定が上書きされる
- “service"
  - docker-compose.ymlで指定したservice名と合わせる
- “shutdownAction"
  - 設定しなくてもいいが、これを設定しないとVSCodeが落ちた時にコンテナも落ちる
- “extensions"
  - 開発で使いたい拡張機能
- “workspaceFolder"
  - フォルダをコンテナにマウントしたときのパス