VSCode Remote Containerで複数コンテナに接続する

VSCode Remote Containerで複数コンテナに接続する

ServerはLaravel, ClientはVue.jsのように1つのdocker-composeでPHPコンテナ・Nodeコンテナを使う場合のVSCode Remote Containerの設定方法です。

問題

ワークスペースをRemote Containerで開くと、ルートに.devcontainerディレクトリが作成されます。
その中に.devcontainer.jsonが作成されてserviceに設定されたコンテナでワークスペースが開かれます。

SPAではよくある構成ですが、フロントエンド (Client)はNodeコンテナ、バックエンド (Server)はPHP, Rubyコンテナで実行したいケースがあります。

解決

Remote Containerには一度に複数のコンテナに接続する場合の機能が用意されています。

・コンテナで開きたいソースディレクトリごとに.devconainer.jsonを配置する
・VSCodeを別ウィンドウで開いて1コンテナ1ウィンドウで作業する
・Remote-Containers: Open Folder in Containerでソースディレクトリを開く
project-root
  ├.devcontainer
  │  └docker-compose.yml
  ├.git
  ├client
  │  ├.devcontainer.json
  │  └hello.js
  ├server
  │  ├.devcontainer.json
  │  └hello.php
  └docker-compose.yml

.devcontainer/docker-compose.yml

通常のdocker-compose.ymlをRemote-Container時だけ上書き読み込みするdocker-compose.ymlを作成します。
開発用にルートディレクトリをworkspaceへマウントします。

.devcontainer/docker-compose.yml

services:
  client:
    volumes:
      - .:/workspace:cached
  server:
    volumes:
      - .:/workspace:cached

.devcontainer.json

・dockerComposeFile コンテナ読み込むdocker-compose.ymlを指定
・service .devcontainer/docker-compose.ymlに設定されたserver名から指定
・workspaceFolder マウントしたディレクトリからワークスペースとして開くパスを指定
・shutdownAction VSCode終了時にコンテナを終了しないように変更する

client/.devcontainer.json

{
    "name": "container client",
    "dockerComposeFile": [
        "../docker-compose.yml",
        "../.devcontainer/docker-compose.yml"
    ],
    "service": "client",
    "workspaceFolder": "/workspace/client",
    "shutdownAction": "none"
}

server/.devcontainer.json

{
    "name": "container server",
    "dockerComposeFile": [
        "../docker-compose.yml",
        "../.devcontainer/docker-compose.yml"
    ],
    "service": "server",
    "workspaceFolder": "/workspace/server",
    "shutdownAction": "none"
}

Open Folder in Container

  1. F1でコマンドパレットを開き、Remote-Containers:Open Folder in Containerを実行
  2. clientディレクトリを開く
  3. Ctrl+Shift+NからVSCodeを新しいウィンドウで開く
  4. 新しく開いたVSCodeのRemote-Containers:Open Folder in Containerを実行
  5. serverディレクトリを開く

参考

Connecting to multiple containers at once
https://code.visualstudio.com/docs/remote/containers-advanced#_connecting-to-multiple-containers-at-once

プログラミングカテゴリの最新記事