【VSCode】拡張機能：Remote - Containers で Docker Compose を使う

概要

Visual Studio Code の拡張機能「Remote - Containers」で Docker Compose を使用した場合の設定方法を記載します。

code.visualstudio.com

marketplace.visualstudio.com

Remote - Containers でDockerfile使った場合の設定方法は以下の記事を参照 kakkoyakakko2.hatenablog.com

前提条件

• Dockerfileで Remote - Containers が動作していること
• 動作していない場合は下記の記事を参照して下さい kakkoyakakko2.hatenablog.com

検証環境

• Windows 10 Pro
• Docker Desktop - 2.2.0.x
• Visual Studio Code - 1.43.x
  • Remote - Containers - Preview

各種設定

設定概要

• Dockerfileは変更なし。
• .devcontainer\docker-compose.yml を新規に作成する。
• .devcontainer\devcontainer.json を修正する。

.devcontainer\docker-compose.yml

• ports には .devcontainer/devcontainer.json の appPort で指定した内容を設定したます。

version: '3'

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ..:/workspace:cached
    command: sleep infinity
    ports:
      - "8000:8000"

.devcontainer\devcontainer.json

• 追加
  • dockerComposeFile: docker-compose.yml
  • workspaceFolder: /workspace
  • service: web (docker-compose.ymlで指定したサービス名）
• 削除
  • dockerFile
  • appPort

起動方法

• Dockerfileの時と同様にパレット上から「Remote-Containers: Open Folder in Container...」で起動できます。

感想

• 他のサービスも同時にDocker内に構築できて、Dockerネットワーク内で作業が出来るので便利。
• VSCodeを起動するだけでDocker Composeも起動されるため、開発手順が楽になった。

サンプルソース

• PHP環境でのRemote - Containers + Docker Compose github.com