Create a Multi-service Development Environment With VS Code and Docker

Setting up a multi-container environment in Visual Studio Code

Photo by Guillaume Bolduc on Unsplash

Imagine you want to develop an application that will be composed out of a Frontend, an API, and a DB. You could do that within the same Docker container, but that would limit your, future, possibility to scale i.e. add additional APIs or multiple DB-servers in case your load goes up.

The solution to this is to develop each of these services in its own container. Visual Studio Code(VS Code) gives us the possibility to not only start our multiple services but also to easily connect to each of them and to use VS Codeas our development tool within the different containers.

Let’s have a look at how that could be accomplished. Taking this article as a base, we can extend on the same concepts and build our multi-container environment.

Assuming that our architecture consists of the following three services:

1. Frontend, based on PyWebIO
2. Middle tier, an API based on fastApi
3. Backend, a Redis instance

The folder structure within my development folder, named multicontainersetup in this case, would look like the following:

C:\DEV\MULTICONTAINERSETUP
├───api
├───frontend
└───redis

For VS Code to recognize the different folder as ‘Remote-Folder’ i.e. a folder that should be opened within a Docker container, we would need to create a .devcontainer folder within each subfolder. Taking the files described in the before-mentioned article as a basis, we can then customize each folder configuration as needed.
As the Frontend and the API will be developed in Python, we can use the same Dockerfile for both of them.

This Dockerfile has to be copied into the .devcontainer folder of the Frontendand the API folder.