Docker-in-docker allow two devcontainers' sub-containers to speak

[napei]

I'm using the docker-in-docker feature to spin up some containers specific to a project, from within a dev container. I have two projects (frontend and backend) both in separate dev containers both using docker-in-docker and in both of them, I have a docker-compose.yaml file that defines how each service is run (there's databases etc).

flowchart LR
    subgraph My Machine
    A[VSCode]
    end

    A-->|SSH| B[VSCode Remote Host w/Docker]
    B --> C["DevContainer (Frontend)<br>D-in-D<br>172.17.0.2"] --> C1["Container<br>(Frontend :3000)<br>172.18.0.2"]

    B --> D["DevContainer (Backend)<br>D-in-D<br>172.17.0.3"] --> D1["Container<br>(Backend :8080)<br>172.18.0.2"]
    D1--> D2[DB Container A]
    D1--> D3[DB Container B]

Loading

How can I have the container running the frontend, get to the container running the backend (port 8080)? For context it's a Nuxt SSR application, so it has its own "server" process meaning the container (not my local browser) needs to see the backend.

I've tried docker-outside-of-docker but vscode seems to not care about the ports, and let me get to them locally (i.e. open my browser for the frontend) as they don't start "inside the devcontainer" so it can't see them. With docker-in-docker, the ports (3000 and 8080) are detected by VSCode, and I can get to them in my browser.

It seems that the devcontainer's IP address exposes the ports, which I can use in the child containers to directly reference the other devcontainer however this would require baking in some network config to the devcontainer.json which I'm attempting to avoid (might be unavoidable at this point). In the diagram above that is requesting http://172.17.0.3:8080 from within the frontend container. Both child containers' networks seem isolated from each other (same IP, different container) but I can't seem to give them an IP on the 172.17.x.x subnet. DNS resolution also doesn't work.

Thanks in advance 😄