モノレポでのVSCode Dev Container

STORES 予約でエンジニアをしている水野です。VSCode Dev Containerを利用すると開発環境のセットアップが迅速化されたり必要なライブラリ、ツールをコード化できたりとメリットが多いため導入している現場も多いかと思います。

STORES 予約でもVSCode Dev Containerを利用しています。しかし今後モノレポな環境に携わる機会が見えたとき、そういえばモノレポでもVSCode Dev Containerって使えるんだっけ？となったので調べてみました。

Multiple containers

モノレポの場合は公式で紹介されているMultiple containersの方法で構築するのが良さそうです。

code.visualstudio.com

VSCode Dev Containerで接続できるコンテナは1つのみです。ですがMultiple containersを使えば複数起動する事ができます。

設定ファイルの用意

モノレポの様に接続したいコンテナが複数ある場合はその数だけdevcontainer.jsonを用意することで接続するコンテナを切り替えることが可能となります。

例えばbackendとfrontendが1つになったモノレポ環境を想定してみましょう。この場合は.devcontainerの中でそれぞれのディレクトリ事にdevcontainer.jsonを作成します。

.
├── .devcontainer
│   ├── backend
│   │   └── devcontainer.json
│   └── frontend
│       └── devcontainer.json
├── backend
├── frontend
└── docker-compose.yml

docker-compose.ymlの内容は以下の通りです。

version: "3"

services:
  db:
    image: postgres:latest
    container_name: db
    ...
  backend:
    image: golang:latest
    container_name: backend
    working_dir: /go/src/github.com/hoge/fuga/backend
    volumes:
      - ./backend:/go/src/github.com/hoge/fuga/backend
    depends_on:
      - db
    ...
  frontend:
    image: node:latest
    working_dir: /app
    volumes:
      - ./frontend:/app
    ...

それぞれの devcontainer.json のserviceとworkspaceFolderをdocker-compose.ymlの内容にあわせて設定します。

// backend container
{
  "name": "backend",
  "dockerComposeFile": ["../../docker-compose.yml"],
  "service": "backend",
  "workspaceFolder": "/go/src/github.com/hoge/fuga/backend"
}

// frontend container
{
  "name": "frontend",
  "dockerComposeFile": ["../../docker-compose.yml"],
  "service": "frontend",
  "workspaceFolder": "/app"
}

Dev Containerへ接続

devcontainer.jsonが用意できたらプロジェクトのルートでコマンドパレットからDev Containers: Reopen in Container を実行します。

次に接続したいコンテナを選択します。

これで接続が完了しました。あとはいつも通り開発に入るだけです。

接続するコンテナを切り替えたい場合はコマンドパレットから Dev Containers: Switch Container を実行しましょう。これを利用するとウインドウを増やす必要なくコンテナの切り替が可能となるため非常に便利です。

runServices オプションで不要なコンテナを起動させないようにする

今のままだと例えばbackendに接続すると本来必要ないfrontendのコンテナまで立ち上がります。これはDev Container の起動に時間がかかる原因になるので runServices オプションで不要なコンテナが立ち上がらないように制御してあげましょう

// backend container
{
  "name": "backend",
  "dockerComposeFile": ["../../docker-compose.yml"],
  "service": "backend",
  "runServices": ["backend", "db"], // 必要なサービス名のみ列挙する
  "workspaceFolder": "/workspace/backend"
}