devcontainer docker-compose best practice

I have an existing Django project using docker compose and I am trying to add devcontainer support. I have it mostly working except there is still one thing that is bothering me.

In my docker-compose.yml file, I have a service defined called web. I want to expand the docker image created for the web service to add more dev features. I have created the .devcontainer directory with a devcontainer.json file. I also have a docker-compose.yml file in .devcontainer which defines the dev service. I have a Dockerfile in .devcontainer that I want to extend from the web image.

The problem I am running into is when the devcontainer system in vscode tries to build the containers, the web container doesn't exist so building the dev container fails. I have to manually build the web container first so the image exists, and then the dev container build will work.

This is my .devcontainer/devcontainer.json file.

{
    "name": "Existing Docker Compose (Extend)",
    // Update the 'dockerComposeFile' list if you have more compose files or use different names.
    // The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
    "dockerComposeFile": [
        "../docker-compose.yml",
        "../docker-compose-development.yml",
        "docker-compose.yml"
    ],
    // The 'service' property is the name of the service for the container that VS Code should
    // use. Update this value and .devcontainer/docker-compose.yml to the real service name.
    "service": "dev",
    // The optional 'workspaceFolder' property is the path VS Code should open by default when
    // connected. This is typically a file mount in .devcontainer/docker-compose.yml
    "workspaceFolder": "/workspace",
    // Features to add to the dev container. More info: https://containers.dev/features.
    // "features": {},
    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [],
    // Uncomment the next line if you want start specific services in your Docker Compose config.
    // "runServices": [],
    // Uncomment the next line if you want to keep your containers running after VS Code shuts down.
    // "shutdownAction": "none",
    // Uncomment the next line to run commands after the container is created.
    // "postCreateCommand": "bash pip install pre-commit"
    // Configure tool-specific properties.
    // "customizations": {},
    // Uncomment to connect as an existing user other than the container default. More info: https://aka.ms/dev-containers-non-root.
    "remoteUser": "vscode",
    "postStartCommand": "git config --global --add safe.directory ${containerWorkspaceFolder} && cd sas_applications && poetry install && cd ..",
    "customizations": {
        "vscode": {
            "extensions": [
                "ms-vscode.azure-repos",
                "vscodevim.vim",
                "ms-python.python",
                "ms-python.isort",
                "ms-python.black-formatter"
            ]
        }
    }
}

and my .devcontainer/docker-compose.yml file

services:
  # Update this to the name of the service you want to work with in your docker-compose.yml file
  dev:
    # Uncomment if you want to override the service's Dockerfile to one in the .devcontainer
    # folder. Note that the path of the Dockerfile and context is relative to the *primary*
    # docker-compose.yml file (the first in the devcontainer.json "dockerComposeFile"
    # array). The sample below assumes your primary file is in the root of your project.
    #
    build:
      context: .
      dockerfile: .devcontainer/Dockerfile
    # Overrides default command so things don't shut down after the process ends.
    entrypoint: []
    command: /bin/sh -c "while sleep 1000; do :; done"

and .devcontainer/Dockerfile

FROM web
ARG UID=1000
ARG GID=1000
RUN apt install -y pipx zsh
RUN groupadd --gid "${GID}" vscode && useradd -u "${UID}" -g "${GID}" -s /usr/bin/zsh -m vscode
USER vscode
RUN sh -c "$(wget -O- https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
RUN sed -i '/plugins=/ s/=.*/=\(git python\)/' ~/.zshrc
RUN pipx install invoke && pipx ensurepath
WORKDIR /workspace/sas_applications
CMD ["sleep", "infinity"]

I have looked into multiple options but can't come up with a solution. I would prefer not duplicating the web dockerfile in the dev dockerfile. I would also prefer not to make the developer run a manual docker-compose build step.

I thought about trying to define the dev service in the base docker-compose.yml file where the web service is defined and make use of the profile feature. However, I don't know how to tell vscode devcontainers to add that profile argument to the build command.

Thanks in advance.