How to use vs code dev container with existing docker-compose file?

Question

I cannot seem to find a clear answer for this, I found https://stackoverflow.com/a/68864132/17183293 but it is not very clear and also might be outdated because "dockerComposeFile" is no longer a valid option.

I have a project with an existing docker-compose.yml file which spins up a MariaDB database, I added a generated devcontainer.json configuration file for Node which looks like

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.202.3/containers/javascript-node
{
    "name": "Node.js",
    "runArgs": ["--init"],
    "build": {
        "dockerfile": "Dockerfile",
        // Update 'VARIANT' to pick a Node version: 16, 14, 12.
        // Append -bullseye or -buster to pin to an OS version.
        // Use -bullseye variants on local arm64/Apple Silicon.
        "args": { "VARIANT": "12" }
    },

    // Set *default* container specific settings.json values on container create.
    "settings": {},

    // Add the IDs of extensions you want installed when the container is created.
    "extensions": [
        "dbaeumer.vscode-eslint"
    ],

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [],

    // Use 'postCreateCommand' to run commands after the container is created.
    // "postCreateCommand": "yarn install",

    // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
    "remoteUser": "node"
}

It also generated a Dockerfile

# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.202.3/containers/javascript-node/.devcontainer/base.Dockerfile

# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster
ARG VARIANT="16-bullseye"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}

# [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
#     && apt-get -y install --no-install-recommends <your-package-list-here>

# [Optional] Uncomment if you want to install an additional version of node using nvm
# ARG EXTRA_NODE_VERSION=10
# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"

# [Optional] Uncomment if you want to install more global node modules
# RUN su node -c "npm install -g <your-package-list-here>"

These files are inside my .devcontainer folder, now in my project's docker-compose.yml file

version: '3.8'

services:
  mariadb:
    image: mariadb:10.1
    env_file: .env
    environment:
    ports:
      - 3306:3306
    volumes:
      - ./docker/mariadb.conf.d/:/etc/mysql/conf.d:z
      - ./docker/mariadb-init/:/docker-entrypoint-initdb.d:z

What I like to achieve is to be able to spin up this mariadb instance so my app inside my dev container can access it and ideally I'd also be able to access the database through my operating system, I'd like to use the existing docker-compose.yml file so that people without the dev containers extension can run docker-compose up manually, how could I achieve this?

Answer 1

Full working example (combined from answers mentioned in question and other SO):

• Linux as host
• Go as example language
• zsh, oh-my-zsh, .zsh_history from host Linux

.devcontainer/devcontainer.json:

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.217.4/containers/go
{
    "name": "Go",
    "service": "workspace",
    "workspaceFolder": "/home/vscode/woskpaces/go-example/",
    "dockerComposeFile": [
        "docker-compose.yml",
        "docker-compose.workspace.yml"
    ],
    // Set *default* container specific settings.json values on container create.
    "settings": {
        "go.toolsManagement.checkForUpdates": "local",
        "go.useLanguageServer": true,
        "go.gopath": "/go",
        "go.goroot": "/usr/local/go"
    },
    // Add the IDs of extensions you want installed when the container is created.
    "extensions": [
        "golang.go"
    ],
    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [],
    // Use 'postCreateCommand' to run commands after the container is created.
    // "postCreateCommand": "go version",
    // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
    "remoteUser": "vscode"
}

.devcontainer/docker-compose.workspace.yml:

version: '3'
networks:
  myNetwork:
    name: myNetwork
services:
  workspace:
    build:
      context: ./
      dockerfile: Dockerfile
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ..:/home/vscode/woskpaces/go-example/
      - ~/.zshrc:/home/vscode/.zshrc
      - ~/.oh-my-zsh/:/home/vscode/.oh-my-zsh/
      - ~/.zsh_history:/home/vscode/.zsh_history
    depends_on:
      - kafka
    tty: true           # <- keeps container running
    networks:
      - myNetwork

.devcontainer/docker-compose.yml:

version: '3'
networks:
  myNetwork:
    name: myNetwork
services:
  zookeeper:
    image: confluentinc/cp-zookeeper:latest
    environment:
      ZOOKEEPER_CLIENT_PORT: 2181
      ZOOKEEPER_TICK_TIME: 2000
    ports:
      - 22181:2181
    networks:
      - myNetwork
    tmpfs: "/datalog"
  
  kafka:
    image: confluentinc/cp-kafka:latest
    depends_on:
      - zookeeper
    ports:
      - 29092:29092
    environment:
      KAFKA_BROKER_ID: 1
      KAFKA_ZOOKEEPER_CONNECT: zookeeper:2181
      KAFKA_ADVERTISED_LISTENERS: PLAINTEXT://kafka:9092,PLAINTEXT_HOST://localhost:29092
      KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: PLAINTEXT:PLAINTEXT,PLAINTEXT_HOST:PLAINTEXT
      KAFKA_INTER_BROKER_LISTENER_NAME: PLAINTEXT
      KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 1
    networks:
      - myNetwork
    depends_on:
      - zookeeper

.devcontainer/Dockerfile:

# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.209.6/containers/go/.devcontainer/base.Dockerfile

# [Choice] Go version (use -bullseye variants on local arm64/Apple Silicon): 1, 1.16, 1.17, 1-bullseye, 1.16-bullseye, 1.17-bullseye, 1-buster, 1.16-buster, 1.17-buster
ARG VARIANT="1.17-bullseye"
FROM mcr.microsoft.com/vscode/devcontainers/go:0-${VARIANT}

# [Choice] Node.js version: none, lts/*, 16, 14, 12, 10
ARG NODE_VERSION="none"
RUN if [ "${NODE_VERSION}" != "none" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi

# [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
#     && apt-get -y install --no-install-recommends <your-package-list-here>

# [Optional] Uncomment the next lines to use go get to install anything else you need
# USER vscode
# RUN go get -x <your-dependency-or-tool>

# [Optional] Uncomment this line to install global node packages.
# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1