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

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

1. 問題
2. 解決
- 2.1. .devcontainer/docker-compose.yml
- 2.2. .devcontainer.json
3. Open Folder in Container
4. 参考

問題

ワークスペースを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"
}