LIVE 🔴: Using Docker containers in VS Code

[Music] hey everybody what is up welcome to the weekly vs code live stream it is thursday november the how do you find the date on an apple watch it should be the 18th november the 18th we're glad you're with us what's up chat how are ya how are you on this fine thursday it's cold here i want to know if it's cold where you are it was warm a couple days ago but things have have taken a turn for the worse we are in full-on winter but i do realize that the earth is round and so we're in all sorts of seasons i don't know is it cold where you are or hot are you on summer vacation i want to know so i can vicariously be on summer vacation um what are we doing today well first of all before we get started you know the drill if you're on youtube hit that subscribe button because um i mean just try it see what happens hit the subscribe button i think you'll like it uh check us out over on tick tock tick tock.com vs code and our meetup group which we might need a url for producer do we have a url for our meetup group we need a short a shortener like a url shortener for this meetup url it's too long look at this all right what are we doing today folks today today we are doing docker all day all day and by the way i realized this the other day we've been streaming uh i think this is our 36th week something like that that we've streamed straight it's crazy uh and i know that all of you have been here for all 36 weeks and i appreciate that you're all wonderful and and awesome so thank you for being with us we are doing docker today but i'm not doing docker because uh i'm just not that smart but i've got a couple of folks with me who are please welcome uh to the stage we don't have a stage to the stream it's a stream welcome to the stream uche program manager at microsoft who works on the docker extension for vs code and the docker tools for visual studio and brandon who also works on the docker extension at uh microsoft software engineer uh docker extension for visual studio code so let's welcome both of those folks this stream there's brandon sorry i was supposed to add him and i didn't hi everyone what's up hello welcome to the vs code live stream thank you for being here how are you all doing pretty good how about you doing well how about you jay just living life doing what i can i hear you i like that every time we're on a stream now we have people on it's like appear down somebody's hallway or into somebody's living room in my case my home office see that's what you get here chad you get a peek into our personal lives because this is who we are so thanks for being here what are we doing today with docker uh we have so much in store i'm super excited to show off what um like um so brandon he's a very modest guy but he's done such an amazing job in building the um building up the vs code um docker extension um and so there's just so much feature it's very feature-rich it really allows you to take advantage of so much in docker desktop and all all the things you can do with the docker resources containers registries volumes anything you can think of um and so i'm just excited to show off what we are um like what what we have in the docker extension for vs code that that is awesome you know i love the docker extension for vs code because i can actually use docker without it i'm just helpless and so chat what i want to know is do you are you using the extension for vs code just put like yes or no in the chat let's do a quick poll just want to know if you guys are using the extension because because we love it all right so um so what are we doing today what do you got for us okay let me take you through a couple things um so go ahead and um show my screen awesome hey could you bump your font size up just a smidge so this would be um so i think that's a brand new screen you can go ahead and oh it is oh sorry do you want me to you want me to put up a screen yeah yeah go ahead ah sorry here we go how many how many there we go there we go this is me i'm doing a decent host terrible presenter all right awesome so um let's let's get started basically um i want to introduce you to the extension the doc the docker extension of vs code um and so i'm gonna take you through like a very simple start to finish um first thing i want us to talk about and work on is um one of our most popular languages which is the nodejs is is a say javascript nodejs express app is what i'm in right now um all of these um the two samples i'm going to work on today can actually be found on um via on aka.ms vsc docker-samples and so we're going to be posting that in the chat hopefully once or twice to make sure that y'all can actually um you know take advantage and get clone it into your own local machine and take advantage so as soon as i actually get clone what i'm doing is um you're gonna actually be in i chose to name my git project sample demo one two three but say a cd and i was in sample demo well you actually need to go ahead and and i hope you go you all can see this tried to make it as big as i could you need to actually cd into um express app tab and then you would do code space dot dash r and so what this will do is this will restart visuals code in this case it's like hey i'm already i'm already here so don't worry about it but um but once you do that it'll restart visual studio code in this workspace express app so now we can get started hey uk before you get started um can you in 60 seconds give an introduction to what docker is or am i getting ahead of ahead of the program here not at all um so i know brandon could describe this back to front very easily but i'll explain it for someone that isn't as good technically as a developer um the way i put docker is um docker is well i use it in the way of how you use it so containers is are a way to run your machine code your sorry your code so that you can actually have all the dependencies and whatever you need in that air in in that small package it's a it's a basically a run time um and i'll explain that once you see a docker file it'll all make sense because a docker file is simply the instructions by which you build a container and those instructions you'll very clearly see they put your app code in and they they also list out some of the extra dependencies you need like hey download for this case download um an image an image is basically a frozen system instruction and then download the image that can run an express app and then just add in my actual app code and any other specific dependencies i need expose a port so that that way it can connect to the internet and away we go so people call it a pre-print pre-production environment because it allows you to get kind of close to a production environment where you put all the similar dependencies in the container and then you can actually um you know if you deploy it to say azure or another cloud provider you should be able to have similar dependencies and experience less trouble going from all of the things that are downloaded all the packages you have downloaded on your local machine instead you have them downloaded into a simple container that has nothing but exactly what it needs to run your app and then when it's in production it should also have nothing but what it needs to run your app and you shouldn't end up with oh crap i didn't realize that only my laptop had this thing installed but my actual production environment didn't and now everything fails yeah that's how i understand it i like that and i like the sort of the idea of this is kind of addressing the works on my machine problem the developers have been struggling with for ever and i think uche you said it well when you said when you see it you'll understand it i didn't actually understand it until i saw it work and i was like oh that's crazy i can't believe that's possible but okay it seems like magic so go ahead let's let's see it in action awesome so we're starting off with a um with a express app so this express app actually works with f5 so if i hit f5 what i've done um as soon as i got into this is i actually already did an npm install so i won't do this again what that did was just install all of the dependencies in this directory um and so now i'm going to hit f5 because i have all the correct things installed coming from the um packages.json so we hit f5 and i should see in a little bit it should pop up and just be a express app running locally this isn't this wouldn't be a container okay so it popped up and i'm going to drag it over here and bada bing bada boom oh can't find the page that's still connecting yeah okay if i know anything about demos it purposely sabotages you yes well it slows down 10x because it knows that people are watching oh you need this right now how about a 30 second buffering on loading a tab from your local host yeah it's painful there's no problem it's on a breakpoint it's because we had a break point wait what does it say ah we hit a breakpoint because it's a little isn't it a little too early to be coding that's that's pretty that's pretty mean of vs code to just absolutely um judge me for the way that i want to demo but let's hit continue and this shows you that of course we have debugging support like vs code has native debugging support so now that we actually kept it going we see oh welcome to express very simple express app but now let's go ahead and get to the meat and potatoes of what we care about and let's run this in a container so we're going to hit stop we're going to do and we're going to do what people can simply do is hit ctrl shift p or in some cases you can hit f1 um but ctrl shift p brings up our window and we're gonna do my favorite command which is scaffolding we add docker files to workspace so this command is gonna take us through a little wizard and we're gonna go with node.js as our application platform it says shoot your package json so we want to choose the package json on the root some folks may have slightly different use cases and then what port i usually just go with the default um i find it easiest for this case we're not actually going to add docker compose files so you say no um so we can go ahead and overwrite anything and what we're going to see is boom a docker file so what i'm excited to show off is this docker file as you can see it starts from a node image and it has um just simple commands that basically create what you need to actually run your express app in a container um a couple features i want to show off real quick on the docker file is we have hover support um and this links to online documentation and so i really enjoy the fact that if i'm confused i get to see examples of what how to do it and you can go online if something gets a little bit too confusing we also have tab um completion so we have some so you could say type in expo like if i want to type in expose i could go down and hit tab um and then i could type in something like 6000 um and if i want um is there and if i want i could maybe type in something like health check oh we're still here hit tab one more time you're still in the previous completion there you go okay i just needed to hit tab and so i could do something like health check and you see this we have the ability to now change this to like 50s and then we tab tab tab and then once we get through it'll be done so i'm going to erase that for now and let's go ahead and actually um build our docker file um so what happened when i um do you have any questions so far oh you're muted burke what would an online meeting be without that line still muted there you are unbelievable now you're back i was a hardware muted and then software muted all right so can i use docker integration with something like ansible deployment to be able to check my playbooks i don't know what an ansible is or a playbook is y'all know the answer to this question honestly i don't i'm sorry yeah i'm not sure either um that's something that we can definitely look into but thanks for the question um yeah sorry we couldn't answer that oh we just don't have any uh ansible answers here uh let's see um so lucas is asking hey can we take a short look at how to debug running a python container absolutely so we're going to get to that in a second all right so right here i'm going to hit f5 um and in this case i just hit the play button like a pedestrian but we're gonna hit f5 and um what this does is it actually builds your docker container and um by the end of it it's going to actually um run your docker container so as you can see there's a bunch of like build output happening down here um hopefully my computer still loves me and won't um crash but it won't be it wouldn't be because of the containers it would be because my computer is very slow at times so um now we're really close it's uh showing the shaw value and um it's launching this again oh wow turns out that vs code is still judging me for my decisions but we're going to hit continue regardless and so in this case that just wanted to that was just to show off being very silly that was just to show off that we do have debugging support in containers we have debugging support for node python and net um so we've so so far we've shown off um and so if i hit x the container is still running right here um so we're just showing out that we still have debugging support for those three languages first class in um within a docker container which is awesome it was really really exciting to have that um we're going to get that's such a cool thing one of the things that i really enjoy about the docker extension is that you're able to do that because um that's one of the first things you're going to want to do after you get something in a container is debug it look at the shell things like that stuff that's you can do from the command line because i guess the extension's just piping everything to commands underneath i mean i assume you can do all this from the cli i just have no idea how absolutely you can do pretty much all the things you can do here from the cli but we make it in in some ways a lot easier and there'll be things that i'll show that will get kind of tedious if you want to do it all in the seats cli and so this tool really helps you um you know it really just really helps you kind of click and right click through things um so the other thing i think worth mentioning is that in cases like docker build docker run we show what cli commander running so that users can see what's actually happening behind the scenes so i think if you scroll down a little or up a little bit there's the build command and then down after the build will be the run command that we use so we've got another um what is docker bro please answer although we've already answered what docker is should we try should we do it again here let me try an explanation y'all tell me what you think of this i've explained it to people like this you know when you create a program on windows and you compile it and it has an exe and it has everything in it that you need it's around you just stick that exe out on another machine you double click it and it works all the dependencies are there everything works in a perfect world that's like docker but for your website you put your website in this container and the container has node and it's got a file system and you just take that container and you throw it up on a server and it just works how's that explanation is it good is it bad docker experts what do you think and this is the case where you're putting all the dependencies in yes exactly and that's exactly what this file is doing hopefully that helps um let's see here um we've got another question where was it oh yeah people want to know if you can do can you do an example of spring boot i think you're just gonna have to show every language every framework all running in docker containers for this demo yeah that's gonna take a while [Laughter] all right so the what i want to do um mainly is first that we do have uh language support for um in terms of debugging we have language support for um like uh node python these different pythons and net so you have net python and for the other ones we have the ability to scaffold your file but you we don't have support for them in terms of debugging uh not yet so what i want to make sure that i show off is there's a lot that you can do regardless of language language agnostic and i want to make sure i cover plenty of those features because there's plenty to do with you know taking a say java app scaffolding it getting it to run but there's language agnostic things that will cut across any of our users that i want to make sure i show off um and so to start off with that that can be when you click on the whale icon you're gonna see in this individual express app running and if you actually click this drop down boom you can see files so you can easily see the files of the container and as that loads it'll actually make it so simple to navigate your container files and um like that's something that i wanted to make sure i show off this is like an awesome feature really saves you time and you can tell it's like in the container loading it doing whatever it has to do to get the files you can imagine you can see that we can actually open the file and download it onto our local machine so that's awesome um we can also look at the logs of a specific container or attach the shell so you can imagine that that's important if you're like you need to run commands in the container or you can say click view logs and you see that it's doing docker logs tail etc with the shaw that i wouldn't want to have to do yeah there's all the logs that came through yeah color coded in everything so we have another project actually to show y'all and i want to make sure that we we can show you our other half of docker which is docker compose but um before we jump over to our um flask app which is going to be a python based app do we have um any big questions we should answer go ahead and hit the disconnect icon there okay because one thing that we do for you is we shut down that container now there is an option if you don't want it to do that but when you disconnect we'll stop that container because it's not needed anymore boom no so let's do that that's a really cool feature let's do one question and then we'll move on because we've got about 10 minutes left here um but is it possible to remote connect to a running container that is on a remote server docker host without the docker cli on your local machine it is it's going to take some settings but it is possible because we use docker road for connecting for most of the explorer features now obviously if you run something some command in the terminal that's a darker command it's not going to work because docker isn't present but you can also do remote vs code connection to that machine over ssh or containers or wsl if it's a wsl instance so with brandon would the answer be to connect to the machine with remote ssh and then open it is that how you would do it that's probably the easiest option but we do support um remoting with vs code running on your local machine so this explorer view that uc is showing right now where it's showing the containers images all of that works from docker road and so it will uh it will work so is there like a link or something we can give people to check that out or maybe yeah i can look something up all right absolutely so while we were chatting um i went ahead and started um you can see i switched into the flask app using the same code.r and again that's what you would want to do to really start the flask app workspace so here um we already have the docker file to run your flask app locally and i won't waste our time with that but let's add um docker compose let's see what happens when we compose a python flask app so again for this one to create this docker file i did ctrl shift p add docker foster workspace chose flask um chose my entry point it's a whole wizard that leads you through um so for now let's actually go ahead and do our other command ctrl shift p add docker files to workspace compose files sorry compose files workspace i just did that docker files the workspace and so when this wizard pops up right now it's loading the python extension yes it is so real quick while it's slowing the python extension just like in a quick 30 seconds or less what is compose this has always been a point of confusion for me as well yeah i can take that one so compose is basically when you have multiple containers that you need to run compose is one of the easiest ways to do it so let's say you have a glass gap and a database that's running behind it i chose those for a reason then compose will let you start both of those at the same time really easily and it also facilitates networking between those containers so you can access one from the other very easily and a lot of other features okay nice i like that example of the two containers uh just real quick is it safe to show logs oh whoop nope that's not one although thank you for the comment uh and emerge that's great is it safe to show logs on live streaming it is when you're showing demo apps um if you're building uh a banking system maybe you wouldn't want to do that but that's not what we're doing here so but good call out cognizant of what you're putting on the screen all right nope sorry let's hide this so let's go ahead and um add the docker compose files with flask and you can see it kind of tells you hey you need app.py or manage py and let's use the 5000 um default for flask so now what's going to do is it we notice it created two files for us to compose debugging file which gives you actual debugging in your flask app or the compose yaml file so i'm super excited in the 1.18 release we actually came through and um not weave i want to make make sure i give some props to brandon for his really hard work and creating the new docker compose language service so if i hit um control spacebar for um intellisense you can see that we actually now have all all kinds of awesome completions that you can have and you see like the health check again has some really cool um like things you can tap through um you can also do awesome things like hovering for completions like sorry hovering for information and you get tool tips um and for the purposes of this um compose and for the purposes of this file let's actually add a database and a volume that will keep our that'll persist um some of the information that will be in our app so let's um see what we can do here we can press ctrl space again we have oh image image name let's make an image from redis we can say volumes hit tab one more time you're still on completion that's something i've never liked about completions is that enter doesn't get you out of it i think you can i think you can tweak that in the vs code settings can't you i'll have to look i think yeah so we can also now do um volume name and container path or we can choose host path so let's do volume name let's go with redis wall and then let's let's go to the path of data slash data slash data yeah and the reason uche is picking these in particular uh slash data that's just where redis the radius container expects to have data for reading and writing and persistence you'll want to change it to rw as well because redis needs to be able to write smart so let's change to read and write and then let's also call it redis vol since we're gonna we're basically saying we already made a volume um on the left volume name we actually need to make that volume in our compose debug file so you see this gooey this nice massive command that i do not feel like writing i'm glad that we gave you this and so now what we can do is um after we've now shown off these awesome language composed language features um we can actually right click on our compose debug file and choose something called compose up so i'm going to go ahead and compose up and what this is going to do is it's going to again execute compose build which is building multiple services it's going through and building our flask app image is using that docker file here to build the flask image and then for the database redis it's just making this image from guess what i can actually now control click on the link and you can actually see the docker hub where this redis image is coming from so it's really awesome really juicy feature it makes it so much simpler to understand what's going on when you're trying to use an image um i'll show off really quick you can actually also if you have multiple servers say you have 10 15 services you can go ahead and actually click compose up select services and what this does is this is a window that pops up um that should pop up once it reads maybe i'm doing too much at once yeah you have to pay the demo tax a lot going on yeah yeah it's like hey what are you doing there it is boom so here you can now choose services to start and you and it'll save your settings so i could choose both i could choose one you can hit this check button to get all or none and you can imagine we have a laundry list 10 15 services it's really nice to be able to say i want to choose only my front end or back end services so remember that compose up select services is a way to start a subset of services and it's a feature we're really excited about so now you see that okay everything's running um so we have the debugger running so let's go ahead and jump over to the debug tab make sure the python remote attach config is on and then we can attach to that app so right now it's running in the container but the command we used to start it tells it to wait until something attaches before it will actually do anything i see so now we can hit f5 on python remote attach which is something you would um add in your it's already running do you want to start another instance no yes you hit it at five twice i think so accidentally all right so yeah so here we've got a break point on the app so you can go over to the whale icon and right click that uh running flask app and do open in browser and it'll take you straight to that app and we can see as well how there's the break point being hit and we'll be able to see an incremented hit count um oh but we actually know how is working yes but we actually actually actually hit another break point says the vs code live stream likes to host more than uce okay that's that's true that's pretty harsh that's mia chad that's not true i promise you chad chad does not like me more than they like you they don't like me but here look um look at this maybe this finally convinces me to use docker sometime from mazar look i'm with you i didn't use docker before the extension because i just couldn't do it but it's such a magical thing to be able to spin up a database inside of a container instead of installing it on your computer uh that's a magical thing to be able to do and extremely powerful once you get into the swing of using docker absolutely at your break point again so that's why it's spinning oh there we go so let's remove this breakpoint and let's go ahead and grab this don't forget to hit f5 because it's still paused thank you and so now we have now that um the vs code live stream is done judging me for the hard work we put in you can see that this page has been accessed this many times and because we actually used a volume you can the data persists so the volume is uh basically a mapping between your um like a secret area and your local pc and the actual container and so every time i'm refreshing there's a place in my actual local pc that's getting incremented and updated and that persists until i actually go in and say either delete the volume in in the explorer that i'll show or you can go ahead and stop accessing the volume in your actual compose file so let me exit this off and let's show off some really cool things um in our whale icon our docker explorer so just real quick we're we're a little bit over time we got two minutes over we can keep going uh but we we try to give it to 30 minutes but uh yeah let's keep let's keep doing this here okay yeah i only have about three or four like four or five things i i'll just uh briefly look over okay no problem and i luckily have it in a list so it won't be too hard so here we have right-click commands where we can stop and start a container you can even inspect it to go in and see all the data around it you'll notice that this cool we have this cool blade here it's called a compose group the compose group allows you to even look at the composed logs so that's a tandem blending of all the logs of this group including flask app and redis you can start stop them as a group restart them all as a group or run compose down as a group um so i really love that i already showed you how you can actually attach to a shell um in in a vs co into sorry in a container um and so one thing i really am excited about is you notice that we have volume so we have tool tips if you hover over a container it shows you basically a simple inspect of it you'll notice that we have networks ports the image and if we go to the volumes it actually has associated containers with it so this is a container that's associated with this volume that we remember from our compose debug file um and yeah so lastly we have um the ability these there's when we create these containers they were created from images and so the the flask app is one of the images i could actually if i wanted to push this to an azure container registry or docker hub which are two i have here and the last thing i can show is that once i push this image to this the image is not the running container the container is actually a running instance of an image i could say go to uche docker test and i could go ahead and push this like flask image sorry if i actually open up and get to the actual image tag i could actually deploy this to an aci instance or um to an azure apps service directly which is awesome so you see my um my subscription you would type in yadda yadda uh sorry yada yada timothy semicolons give me semicolons and you could actually deploy to various other things the to create a new web app so those are all those are all the main features i wanted to go over and thank you so much for your time but yeah that's that's basically some of the really great um most important use cases we have debugging even in compose um for single services we have um node python and node.js sorry yeah node python.net debugging and various other things i've shown you such as the hovering but yeah just get in there we really recommend get in there and play around if you go to i think dot ms slash um i think it's vs code docker i want to make sure dash docker or just vs code docker all together aka dot ms vs code docker there it is vs code live docker docker extension yeah even um if you type in vs code docker all one word um aka dot msl vs code docker all one word that should get you right to the visual studio marketplace for um the docker extension and you can try today and get get and um get ready have fun and get ready to use all the goodness of the extension that is awesome so i think this is a good way to end it here from willow says docker makes sense now i don't think you could have asked for uh better feedback than that right yeah if docker makes sense now after watching this stream we're so glad you've been with us yes thank you so much and thank you uchi and brandon and your whole team for the hard work that y'all do on this extension that allows people like me to actually use and be productive with docker so thank you for doing that absolutely we can stop sharing the screen now i have nothing else to show yeah thank you so much i appreciate your appreciate you having us on um yeah then it meant a lot to our team that you all reached out and wanted to see what we um had to offer awesome well thank you for being with us chat uh that's all for this week next week is the thanksgiving holidays i think we're taking you all taking some time off for thanksgiving are y'all doing you doing turkey yeah i'm gonna be taking next week off okay yeah i think we'll take next week's talk so we'll we'll see you here back here the week after that which i believe is a release party first week of the month maybe it could be all right we'll see you there thanks for meeting with us bye don't forget the mac and cheese everyone yeah essential mac and cheese bye folks

Channel: Visual Studio Code

Views: 54,136

Keywords: vs code, vscode, visual studio code

Id: PGsMy75ffPM

Length: 37min 5sec (2225 seconds)

Published: Thu Nov 18 2021