Create a Multi-service Development Environment With VS Code and Docker | by Bernd Bornhausen | Feb, 2022

Setting up a multi-container environment in Visual Studio Code

Photo by Guillaume Bolduc on Unsplash
  1. Front end, based on PyWebIO
  2. Middle Layer, an API based on fastApi
  3. Backend, a Redis instance
C:DEVMULTICONTAINERSETUP
├───api
├───frontend
└───redis
Dockerfile for front end and API service
frontend:image: frontendtty: truebuild:context: ./frontend/.devcontainerdockerfile: ./Dockerfilevolumes:
- .:/workspace:cached
depends_on:- api
- redisserver
ports:- "8000:8000"networks:- myNetwork
context: ./frontend/.devcontainerdockerfile: ./Dockerfile
ports:- "8000:8000"
api:image: apitty: truebuild:context: ./api/.devcontainerdockerfile: ./Dockerfilevolumes:
- .:/workspace:cached
networks:- myNetwork
networks:myNetwork:driver: bridge
redissever:image: redisservertty: truebuild:context: ./redis/dockerfile: ./Dockerfilevolumes:- .:/workspace:cached- ./redis/redis-data:/dataports:- "6379:6379"command:# Save if 100 keys are added in every 10 seconds- "--save 10 100"networks:- myNetwork
Docker composes the file
"name": "frontend","dockerComposeFile": "../../docker-compose.yml","workspaceFolder": "/workspace/frontend","service": "frontend",
front end devcontainer.json
API devcontainer.json
pylint
pycodestyle
black
requests
pywebio
pylint
pycodestyle
black
fastapi
uvicorn[standard]
redis
C:DEVMULTICONTAINERSETUP
│ docker-compose.yml

├───api
│ └───.devcontainer
│ devcontainer.json
│ Dockerfile
│ requirements.txt

├───frontend
│ └───.devcontainer
│ devcontainer.json
│ Dockerfile
│ requirements.txt

└───redis
Remote-containers: Open Folder in Container

Leave a Comment