Working with Multiple Dev Containers in VS Code

in a previous video we showed you how to get started with the dev containers extension for vs code and the devv container CLI as a reminder Dev containers are like separate boxes for your projects encapsulating everything that your code needs to run from libraries to tools it's a way for us to Define our environments in a way that is reproducible and consistent and you can use it with a bunch of different tools that support the spec for a list of those tools be sure to check out the link in the description often times we find ourselves working with a project that requires multiple and or different environments for example let's say you have an application and your front end is being built with node and your back end with python how can we Leverage The Power of Dev containers for these situations that is a fantastic question my friend and is actually what I'm going to show you in this video so let's get started to follow along today's video be sure you have the dev containers extension for vs code installed and the demo repo I'll have links to all this in the description let's start off by going over the structure of this project at the root level we have the dev container folder inside here we've got two folders we've got container -1 and container -2 each one of them contain a Dev container. Json file which is the configuration file that vs code will use to set up our Dev containers for us back at the root level we have a container D1 dsource and a container-specific [Music] file we've got multiple Dev container files but there is only one Docker composed. yo file you can actually create separate Dev container files for each of your services that point to a common Docker composed file so that's why we only need one here from this demo you can tell how you can go about incorporating more Dev container. Json files if you needed you would simply add another subfolder to this Dev container folder and then create your Dev container. station there so now that we're familiar with the structure of our project let's take a deeper dive into this Docker compost file if you've worked with a Docker compost file before this should look pretty standard but let's walk through a couple of keys that I want to call out first one being the volumes key essentially what it's doing is mounting the root folder which contains the dot git repo and this is so our containers can have access to anything necess necessary for git operations the second key I want to call out is the command key which is also in both of them it's set to sleep infinity and this just ensures that our containers are always in a running State finally the links key which is only set in our first container is set to container 2 which enables communication with both containers since already set in the first one we don't have to add it to the second one so this is what our Docker composed file looks like but we also know that we have multiple Dev container. zon files and these files contain the metadata and settings required to configure our Dev containers so let's take a closer look at those let's consider our demo project here we have a Dev container. Json file for each one of our services and we can click to open them and I'm just going to minimize this left side here we can see that the dev container for the python service we're calling it container one we're pointing it to the docker compose file that we have at root level this service is container -1 which is referencing that service name inside of that Docker compos file another to call out here is the shutdown action which is set to none this is important because it's telling the dev container like okay if you close vs code keep the container running and then finally we have the workspace folder which contains our code essentially the source for this project specifically for the python service which we have in container D1 Das SRC which makes sense we go back here to our Explorer and we have inside of container -1- SRC is our python file right let's take a look at our Dev container. Json for our second service and we can see that it looks pretty much the same the only thing changes here is the name the service that we point to in the docker compos file and the workspace folder obviously we need to set it to container2 Source because that is where our nodejs service lives now that we know what each Dev container. Json looks like how do we actually go about working with these containers let's take a look at that now if you don't have the repo opened up in vs code go ahead and do that once that's opened up make sure you have Docker running of course we're going to do control shift p and then we're going to find the uh command here that says reopen in container and then we're going to select container one we're going to start by using containers in a single window so having multiple containers running but using a single vs code window this should take a few moments to set up for you but once it does it's going to reload your vs code window but only going to display your VSS code environment your Dev container and your environment for that first service so now if I go to the Explorer you can see that really all I see is hello.py because again I'm only working in the context of the first service the container -1- Source right so I can put a little breako here and then go to run debug like run debug and I'll say python file and you can see here we've got a full-on python environment going again the goal here is to leverage multiple containers within a single vs code window so what I can do is hit control shift p once more but this time we're going to look for switch container and now we're going to select container 2 because that's where our nodejs environment and source is in and once again this should reload but this time with all your goodies for container D2 Das Source right so we'll go back to the folders here and we see that we have the Javascript file in here and again we can hit debug and I should be able to yes I can hit play here and you see we have hello world oh I forgot to set a breakpoint set a breakpoint run it again and you can see we have our deburger running and this is exactly how you work with multiple containers within a single VSS code window but what if we want to use multiple vs code windows for our multiple containers well from the terminal in I'm just going to show you a different way to open up the folder and vs code make sure you're actually inside of your repository and then type in code space and a DOT that's going to open up vs code with your project on the left side if we click on folders you can see our project structure here and it's actually telling us hey do you want to open this up in Dev containers you see here we have the option to reopen in container you can do that or you can do contrl shift p type in reopen in container and select that first one and then that's going to load up the container and the dev container environment for our python service right you see here back again to the left side on folders we have our hello.py here got a little uh break point still set there from here you can do file new window and that opens up another window or you can go back to your terminal and once again do code Dot and it opens up another window for us and we can do reopen container but select container to go ahead and let that run you see we have our Javascript file and our JavaScript service here it's starting our container still have our little breakpoint here and then you can see I have one window with our container one and the other VSS code window with container 2 and now you can interact with both containers at once from separate Windows one last thing I want to cover let's say you want to extend your Docker compos file for development which is good practice since referencing an existing deployment or a non-development focused Docker compose can have some potential downsides you should use a single Docker compose file that extends both Services as needed and is referenced in both of those Dev container doj B on file so let's consider this Docker compose dodec container. EML I would reference this inside of my Dev container. Json or all of them actually inside of the docker compos file key and I would just add it to the list here of Docker compos files that it references keep this in mind and there you have it we covered the structure that you need to leverage multiple Dev containers for your projects we showed you how to actually use them in a single vs code window or with multiple windows for more tips tricks and resources on all things vs code and all things de containers and more be sure to like subscribe hit that notification Bell and we'll be back soon with more videos thanks for watching

Channel: Visual Studio Code

Views: 14,238

Keywords: vscode, visual studio code, vs code

Id: bVmczgfeR5Y

Length: 9min 46sec (586 seconds)

Published: Thu Nov 30 2023