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

2022年11月24日2022年11月25日

検証した環境

• Windows11 + WSL2 (Ubuntu20.04)
• VS Code 1.73.1

手順

準備

1. Dockerをインストール、VS Codeをインストールし、拡張機能Devcontainerを追加
   • 参考：WindowsでLinux(WSL2)+Docker+VSCodeでの開発環境を構築
2. 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作成

ディレクトリ・ファイル

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

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

project-root

container1-src

.devcontainer.json

Dockerfile

container2-src

.devcontainer.json

docker-compose.yml

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

 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起動

1. project-rootフォルダをVS Codeで開く
2. 左下の「><」ボタンをクリックし、「Open Folder in Container」を選択
3. 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"
    • フォルダをコンテナにマウントしたときのパス

参考

• https://code.visualstudio.com/remote/advancedcontainers/connect-multiple-containers