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
│ ├── devcontainer.json
│ └── docker-compose.devcontainer.ymlこれでVSCode Remote環境が整ったが、macで試したところコンテナの起動に時間がかかるのでローカルで動かしたほうが早いなぁという感想になってしまった。
せっかくコンテナ化できたのでWindowsマシンでも試してみたところ、（そもそもマシン性能がWindowsのほうがいいので正しい比較はできないけれど）macよりは早く起動できた
.devcontainerディレクトリがあるとVSCode起動時に「コンテナで開きますか」と聞かれ、「はい」を選択すると裏で勝手にコンテナを立ち上げてくれる。
複数人開発する際に相手のOSがWindowsなのかMacなのかLinuxなのかを気にせずに開発環境を手軽に用意できるのはとても良い。