VSCode Remoteでdocker-composeを使う

Visual Studio Code Remote Developmentを使うとコンテナ上にVSCodeサーバを立てて、ローカルのVSCodeから接続できるようになる。

なのでgitとVSCodeとDockerさえインストールされていればローカル環境を汚さずに開発環境を作ることができる。

そこで今回はdocker-composeで作ったコンテナにVSCode Remoteで接続するのをやってみることにした。

VSCodeからの接続に限定するのであればコンテナ設定すべてを.devcontainerディレクトリ以下に置くのが良さそうだが、今回はより一般的なdocker-compose.ymlがプロジェクトルートに置いてあるパターンで対応する。

以下のようなnodejsコンテナとmysqlコンテナをdocker-compose.ymlに定義してあるとして、

version: '3'
services:
  datastore:
    image: busybox
    volumes:
      - db_data:/var/lib/mysql
      - node_data:/app/node_modules
  app:
    image: node:12
    environment:
      DB_HOST: mysql
      DB_PORT: 3306
      DB_USER: root
      DB_PASS: pass
      DB_NAME: test
    volumes:
      - node_data:/app/node_modules
      - .:/app:cached
    command: ['yarn', 'dev']
    working_dir: /app
    depends_on:
      - mysql
  mysql:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: pass
    volumes:
      - db_data:/var/lib/mysql
volumes:
  db_data:
  node_data:

プロジェクトルートに.devcontainerディレクトリを作る。

mkdir .devcontainer

.devcontainer/devcontainer.jsonを作成する。

設定ファイル例は以下。

extensionsにRemoteで使いたい拡張のIDを記述する。

code --list-extensionsで拡張のIDが確認できる。

// devcontainer.json
{
  "name": "node app",
  "dockerComposeFile": [
    "../docker-compose.yml",
    "./docker-compose.devcontainer.yml"
  ],
  "service": "app",
  "context": "..",
  "workspaceFolder": "/app",
  "extensions": [
    "dbaeumer.vscode-eslint",
    "EditorConfig.EditorConfig",
    "esbenp.prettier-vscode",
    "stylelint.vscode-stylelint",
    "VisualStudioExptTeam.vscodeintellicode"
  ],
  "settings": {}
}

dockerComposeFileを複数書いているのはdocker-compose.devcontainer.ymlで既存の設定を上書きしたり、独自の設定を行うため。

例えば以下のようにコンテナのポートフォワード設定を変えたい場合などがありうる。

# docker-compose.devcontainer.yml
version: '3'
services:
  app:
    ports:
      - 3000:3000
  mysql:
    environment:
      TZ: Asia/Tokyo
    ports:
      - 3306:3306

設定可能な項目はドキュメントに詳しくまとまっているが、上記の設定でリモートコンテナに接続できるところまでは確認できた。

devcontainer.json reference

最終的なディレクトリ構造は以下。

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

これでVSCode Remote環境が整ったが、macで試したところコンテナの起動に時間がかかるのでローカルで動かしたほうが早いなぁという感想になってしまった。

せっかくコンテナ化できたのでWindowsマシンでも試してみたところ、(そもそもマシン性能がWindowsのほうがいいので正しい比較はできないけれど)macよりは早く起動できた

.devcontainerディレクトリがあるとVSCode起動時に「コンテナで開きますか」と聞かれ、「はい」を選択すると裏で勝手にコンテナを立ち上げてくれる。

複数人開発する際に相手のOSがWindowsなのかMacなのかLinuxなのかを気にせずに開発環境を手軽に用意できるのはとても良い。

参考