>> Hello DockerCon Live 2020. My name is Brian Christner
and I will be presenting, Become a Docker Power User with Microsoft Visual Studio Code. The session's agenda, we have a quick introduction. Then we jump into the integration between Docker Desktop
and Visual Studio Code. And we go into Power User Mode and we'll wrap things up
with demos and a recap. Let's start with the introduction. My name is Brian Christner. I am Co-Founder of 56K.Cloud. We are a small DevOps boutique based in Switzerland but mostly remote. We focus on cloud
containers and automation. And we are now exploring also how we can bring the same
developer experience to 5G. My background is in engineering
and cloud architecture. I'm really passionate about
open source and monitoring. I have a few GitHub repos, you're more than happy to use because it's really starters to get up and running with monitoring. I've been the Docker Captain since 2016. Very proud of that. Traffic ambassador and when
I'm not behind the keyboard, I am on my mountain
bike in the Swiss Alps. Before we get started, I really want to explain
my discovery phase or my story with Visual Studio Code, how I discovered Visual Studio Code. I was actually commuting
on a train in Switzerland and I was using Sublime editor and the person next to me said, "You know, you'd really
enjoy Visual Studio Code," random person, I was like, "Okay, person." When I got home, the
first thing I did was, I was like, "What is Visual Studio Code?" So I installed Visual Studio
Code, and I was blown away. I mean, it solves all my problems. A, it works right out of the box. B, it solves my immediate problem, which is less context switching, because I'm always switching
between multiple windows terminals git et cetera. So now Visual Studio
Code, I have one screen, one window, one application, which solves all these problems. I can do my code linting, I
can do my gits, my terminal. And with the marketplace and extensions. I can even take this further. So it solves a lot of my
headaches I had previously. Now don't take my word for it. But the Stack Overflow survey in 2019 actually says it's the
most popular IDE available. So Stack Overflow survey,
50% of the respondents say they use Visual Studio Code. Now this only gives props to Microsoft because, they're building
a nice ecosystem. It's open source, it really
plays well with others and it integrates into Docker desktop and the Docker extension
brings it even further into the Docker ecosystem. The Visual Studio Code was
actually launched in 2016. Shortly after, it just
became very popular. I mean, as you see, it is
now the de facto standard for code editors. Let's also quickly discuss
the Docker extension, the Docker extension believe it or not only hit GA, general
availability back in March. 9th of March and that means it is 1.0. Microsoft gives its stamp of approval that it's production ready and that it can go out in the field. With that said that really means that Microsoft is confident
it's a stable product and it's really ready for everyone. Let's quickly discuss Docker
Desktop and Visual Studio Code and like I previously mentioned, I'm more interested in the integrations between Docker Desktop
and Visual Studio Code. If you start Docker Desktop
and go to the Dashboard, you see all the available containers that are running on your machine. So in my example here,
I have a few containers and the very bottom one, it's actually a Docker Compose stack. When I hover over it with my mouse, you can actually see buttons light up open in Visual Studio Code. And what I did is I clicked on this, and it actually opens up
the dashboard even further showing me what containers are
inside this composed stack. And if I click the Open in
Visual Studio Code button, it actually opens Visual Studio Code in the directory where
the Compose file lives and all the application information. I don't have to go
searching for it anymore. Again, this is the less context switching. I don't have to go from
Visual Studio Code open navigate a bunch of folders, it just opens right there
in the directory I want. I mean, this just helps tremendously. It increases productivity 'cause there's less context switching. We could do the same thing
for the command line. So the command line,
we have the possibility to actually open Visual Studio Code directly from the directory
we're in, in the command line. For example, I have a project, I go code -. and it opens Visual Studio Code, and all the code in that
directory in Visual Studio Code. I mean, how cool is that? Now out of the box, it works
with Windows and Linux, but Mac OS, we're always special. So Shift + Command + P, and you can type, Shell Command: Install
'code' command in PATH. This allows you to put the
code, Visual Studio Code in your path, allows you to run this in the command line. Alright, this brings
us to Power User Mode. Power User Node really gives
us a lot of flexibility and a lot of streamline commands. To make our lives easier. Let's take a look at some
of the possibilities. But before we go that way, spider man's Uncle Ben Parker once said, "With great power comes
great responsibility." So we need to ensure
that what we're doing. It doesn't impact production 'cause now we can connect
to multiple servers and different things with
this Docker extension. Let's take a look what we can actually do with the Docker extension. First up, we can bootstrap new projects. And what I mean by that is, for example, a Python application, a
simple Python application no Docker file, no Compose file. With Visual Studio Code,
I can bootstrap this Visual Studio Code then
create a Docker file and a Compose file automatically for me. Just based on what's in the
directory, really amazing. Next up, we can interact with containers, images, volumes, networks,
and Docker hosts. So both through the Visual
Studio Code command palette or through the UI, we can
actually interact with containers and we'll jump into the demo after. Next we can write Docker
files with code completion. And it's not just code completion, you can actually look up
images from Docker Hub and the tag directly from your code, which is really quite cool. Next up is build and debug. So again after the bootstrap, it actually adds some debug
code in there as well. So we can debug our containers directly from Visual Studio Code without any additional effort. And finally, we can connect
to different Docker servers. Now the Docker context command allows us to map Visual Studio Code to our local Docker host, to
the cloud to multiple servers, Docker and Docker. It really gives us the flexibility. So we can use the same
Visual Studio Code interface, but connect to multiple Docker hosts. Really quite amazing. All right, how do I get started? It's easy as one, two, three to install the Docker extension. Now bottom left, you can see it actually looks like containers. That's actually the market,
the Visual Studio marketplace. If you click there first, it
opens up another dialogue box and at the very top number
two, you can type Docker. You can see the very top extension is the Docker extension we're looking for. It's actually made by Microsoft. If you click Install,
that's it, you're done. You have the Docker extension installed. Once we have the Docker
extension installed, we can actually bootstrap a new project. In this example, we have
a Python application actually written by a fellow
Docker Captain Michael Irwin, and this is a random Cat GIF Generator. And as you see, there's no
Docker file, no Compose file. And we will use the Docker extension to actually enable the bootstrap. So it's going to ask us
a couple of questions like where is the application located? What port do you want to use? Do you want to add debug to
the project and that's it. And then it just creates
all the files for us. We interact with the Docker extension in a couple different ways. One is the command palette in Mac OS it's Shift + Command + P or Windows Control + Shift + P. There we can actually type Docker add and you can see Docker add
Docker files to workspace, and once you do that it'll then trigger the questionnaire to generate the files. Additionally, if we want to interact with the Docker extension, if you click on the Docker
logo, bottom left number one, you can see the Docker
extension has its own UI. In this UI, we can interact
with the containers, we can interact with
containers, images, networks, volumes and different Docker hosts. What's really great about this UI is we can do multiple selects. So we can select multiple containers stop and start them. Right click, we can inspect, right click, we can jump into the logs or we can delete them. We can do that for all the containers, images, basically everything
available in the UI. And this is really great. It's super fast for the workflow. I mean, right click and
you have it right away versus typing out a big command and looking for the the
Docker ID, et cetera. It allows you to quickly do tasks, which before maybe took
a little bit more time. And again, it's all within the same UI. All right, now we're ready for the demo. And in the demo, we're
going to demonstrate how to bootstrap and interact with Docker. So we're going to walk through the same screens we saw before. We're going to bootstrap,
a Python application. And then we're going to interact with this through the Visual Studio
Code Docker extension. Switching over to my desktop, we can now see I have my my terminal open. And here's the Python project,
which I mentioned previously. Now in this directory, you can see I have a Python file called app.py, a requirements.txt and a templates file, a templates directory. So this is basically the directory, I want it to open in Visual Studio Code. To do that, I would type code
. and this will then execute Visual Studio Code to
launch in that directory with all the files. Now we can see app.py,
requirements.txt, index.html is all loaded directly
in Visual Studio Code. This is quite handy. Now the next step if you remember, we need to install the Docker extension. To do that, we head over here
to the Marketplace Extensions. And it looks like a bunch
of containers to be honest, so it's easy to remember. So click the Extensions
and we will type in Docker. And the first one in the list you can see is the official Microsoft
Docker extension. We will click install and it's installing and we are now installed
with the Docker extension. So there you go. When I click on the extension, I can instantly see what
containers are available on my server. Which images are there, I can connect to a registry. So let's connect to Docker Hub. And we go... And there I go. I am now connected to Docker Hub. And you can see here's my different users I have available and my different repos I have out in Docker Hub. And actually can pull
this image directly down from Docker Hub to my machine, I can open it in a browser,
back out to Docker Hub. So it has a lot of flexibility. I can also connect to different registries like Azure or GitLab, for example. Now with the containers,
which is quite interesting, which is also quite new,
is the multi select. So I can actually select
all the containers and start them if I want. I can actually right click or View Logs. I can, let's just start up
all these containers at once. So right click, we're going
to multi select and start. You can see that easy, I just
started three containers. They're not even in a stack together, you can see there's a traffic containers, two different traffic containers and a home assistant,
home automation suite. And again, I can then select them again, right click, and stop. So we have successfully
started and stopped multiple containers very easy to do with multi select. Additionally, we can right click on any service here and View Logs. And this executes the command directly in the terminal
in Visual Studio Code, so docker logs -f, it then takes the container ID, and it shows you the logs within
this particular container. We can also right click and inspect. So now, just like we run
the Docker inspect command, you can see all the details
about this container. So about the image,
what kind of image it is the volumes, the ports available, restart. I mean it's very, very easy to do. We can also remove a container. So for example, I want to remove this one, it's exited, I'll remove it. And it is gone. And you see, it's super easy to navigate the different images, containers, and I'll go into here to redis. Here's a redis image its
no longer referenced, I can actually go in here
and delete this as well. And we will remove that. And you can see there's
multiple advantages, or multiple possibilities to integrate or actually use the user interface within Docker extension UI. Now back to our project. You can then see how we can
interface with the Docker UI. We also want to bootstrap a new project. And in order to bootstrap a new project, we are going to Apple + Shift + P, which brings up our command palette and we are going to do docker add, docker files to workspace. And new also within the
newer version of 1.0 is they have multiple Python versions. So you can see, there's Python
Flask, Django or General. So just a general app. So Microsoft has actually
dedicated more time to Python and separating the different use cases. In this case, we're going to use Flask. And now, there's a very
important question, because now it's asking us, okay, do you want to include
additional Docker Compose files? It's kind of a generic question. But what it's actually asking do we want to include debug
into our Compose files? And absolutely we do, 'cause
it's such a nice feature, which we'll cover later. Next, we want to discover which
application we're running. And in this case, you
can see app.py, app.py. It matches so we're good to go. And finally, what port are we going to use and we're using Port 5000. Boom, there you go. That quick Docker extension, then created a Docker file for us, you can see it's using Alpine
it's exposing Port 5000. It's adding our application
into the container using appuser. So it's not using rootuser, and then the command to
actually start our application. Additionally, it's also starting, it also created a Docker Compose file, a Docker debug file, a Docker ignore file. So now, we're not
committing certain settings or certain local things that we
don't want to push up to get. So by default, we're not pushing any of the VS code information
up or project or .git. That's all saying locally. So that's kind of nice. We don't have to write any of that. And this is kind of new. So the .vscode. This is where we can actually customize how each task runs within Docker VS code. That means for example,
when I do a Docker build, we can look in here, here's Docker build, and this is exactly how the
Docker build command works within the application. I can actually change
this to a different tag, say my tag. And that means every time
I run the build command, it tags it my tag, or I can actually adjust
how the debug works. So when the debug command runs, I can turn off no debugger
or add different flags. It's all completely customizable,
which is really brilliant. Additionally, you have the launch command. So what happens when
we launch Python Flask and it says, okay, we're actually going to localRoot, remoteRoot, and it's going to launch our application into the debug phase. Now, all this comes for free. I mean, you just do the command palette, Docker, add files, and
it's up and running. Now let's see this in action because... Okay, I didn't make any changes to this. But we are going to go and we're
going to start this Compose file just to make sure that it actually does what it's supposed to do. So Docker: Compose Up and now it asks us which Compose file we want to use, which is kind of handy, right? If you want to do debug
or just a normal compose. In this case, we'll do a normal compose. And now you can see it's
building the application it is done. And if we head back over to our extension, you should see, there it is. Our Python project has started. So now we can actually click here and open in browser. It opens in a different screen, of course, and there's our Cat GIF Generator. So we can then refresh, refresh, refresh, and we are just full of cats. This is really awesome. Let's stop that Python project. And I'll show you a different way we can actually start that as well. If we go back to the Compose files, you can actually right click
directly on the Compose file and start, restart or
stop the Compose stack. So I'm going to restart it
again directly from here, right click up and there you go. I am up again, I go back to
my Docker extension, refresh. There you go. And we're back in action,
open in a browser and voila, we should have cats
coming up, there we go. So there's our cat browser, showing you two different
ways you can launch it. And we will take you into the next step because this is all building into how we can then debug
and then run with context and write Docker files all
within Visual Studio Code without leaving Visual Studio Code. This is just great. In this next section, we're going to learn how
to write Docker files with Visual Studio Code
with command completion. First, when we're writing a Docker file you write from and then the image name, but we can actually use Visual Studio Code to look up the images directly
from Visual Studio Code by doing Control + Space as we're typing the image name. Next, we could do a command completion. So as we're typing a command, it actually gives you suggestions, For example here command executable. So it gives you the format of the command. If you still have questions, it actually links to the
Docker documentation as well, so you can get further reference. Let's take a closer look in the demo and write some Docker files
with the command completion. Right, we're heading
back over to my desktop where Visual Studio Code is still running the same Python
project we had previous. But now we're going to write a Docker file using command completion as well as querying Docker Hub
for the proper image and tag. What I'm going to do is I'm
going to create a new folder, and I'm going to call it Docker. And you see instantly Visual Studio Code recognizes this folder as a Docker. Maybe content going to be in
this folder surprising, right? Next we're going to add Docker file inside this folder and
you can see right away Visual Studio Code recognizes
it as a Docker file and will enable Docker
file syntax checking automatically, automagically. Right, first thing in a
Docker file is the from line. So instantly you can see from baseline. And if I just type tab, it fills it in. But what if I want a different image. And you see, it gives me a
bit of context down below, if I want to add more,
if I click to the right, it actually shows me the
different possibilities with images and how to reference. So it provides a lot of information. Now, what I want to do
is I want to type alpine, but maybe I don't know how to spell it or the proper image. So I can go Control + Space now. And it's going to show me
all the Docker alpine images that are available in Docker
Hub and there's quite some. I'm going to take the first one, as you see as its the official. As you see, here its the
official alpine image. So go ahead and hit enter. Now let's look at the tag. Go, double point. Again, Control + Space. Here's all the tags. Oh, 3.11. That works perfect. Let's take that one. And now let's do the run command. So RUN apk add --no-cache my sql-client. Then we have the command that actually executes the executable. But how do I do that again? CM Control + Space. Oh, that's how I do it. So you can see the command executable. That's the format, over here to the right, you can see more information how that actual documentation works. And if I wanted, I can go directly out
to Docker documentation to find out more. But in this case, we're
just going to auto complete then we're going to type in mysql. And there you go. I've quickly wrote a Docker file with auto completion
and querying Docker Hub for the proper image name
and tag, just like that. It's super easy. It works the same in
Docker Compose as well. Let's head back over to the slides. All right, in the next
section, we're going to build and debug Compose and Docker files. If you remember back to
the bootstrap section, we actually bootstrap
Docker with Docker files and Compose files. And we selected yes to include debug. So now we have this capability built in that we can debug our application directly within Visual Studio Code. And as you see, there's a
icon on the left hand side, this little triangle
with a little bug on it. And that's the debug screen. And in here, we can
actually execute the debug. So it starts up the
container in debug mode and gives you a little
bit more verbose output, and we can start interacting with it. Additionally, we can add a breakpoint directly into our code to tell Visual Studio Code
debugger to stop at this point, stop running the application this point so we can further analyze what's going on. And you see in the left hand side, it actually outputs all the variables and what it's actually trying to achieve in this application. We can also watch certain variables and see if they're being
executed correctly. Now in the demo, we're actually
going to debug our app, we're going to break it, and then we're going to debug
it and fix it within debug. Let's have a look. All right, let's pop back
over to Visual Studio Code. And this time, it's kind
of counterintuitive, but we're going to break our application. Usually, I'm spending most
of my time the other way trying to fix bugs. But we're going to introduce a bug into our app.py application. So our Cat GIF Generator. What I'm going to do
is I'm going to rename this variable images with an extra S. And this should just completely
break my application. Now, that we change it, we
can actually start debug. And if you remember back when we bootstrapped the application, we selected additional Docker Compose and debug capability. So it added all these
debug commands by default into our command. You see, we're not adding
anything additional to the Docker container or Compose or anything of that sort. And basically, it just enabled once we bootstrap an application. Now I'm going to run the debug. I know our images variable is not working for whatever reason. But let's run debug first
and see what happens. What happens is it builds a Docker file, it launches the application
to see what happens. So there you go, Internal Server Error. Oh, no its not good. We're not happy now, right? So let's go back and add some
more debug to our applications so we know images is
not working correctly. So we want to watch that variable 'cause it's not being populated. And we want to add a breakpoint. Remember, the breakpoint tells
Visual Studio Code debugger to stop at this point,
and then kind of echo out all the details regarding our
application up to this point. So let's disconnect, refresh our debug. Let's execute the debugger again. And there it goes. And this time, it stops at the breakpoint, it builds the Docker container again. And now you can see we
get all the variables from the application before it breaks. And now, if I expand this a bit, you can see images is not defined, unknown error, images is
not defined et cetera. So image is not defined,
image is not defined. So I'd venture to say,
my images is not defined. Let's go back and fix this. So we save it, we refresh our debug, let's launch the debugger again. Its building the application once again. And again, it's going to
stop at this breakpoint. And this time, you see all
the images are there again, it actually shows me the
list of images available, so it should be working. So let's remove the breakpoint this time. Let's refresh again. Let's execute the debugger once again and see what happens, see
if we fix our application. And it's starting, building container. And there we go. We have our Cat GIF
Generator running once again. So we successfully
troubleshot our application. We debugged it. And now we have a cats galore. And again, we didn't have
to add any extra code to our application to the Docker file to be able to debug. How cool is that? I mean, that's really like
power user stuff right there. All right, let's jump
back to the presentation and take a look at context. All right, luckily, we were able to fix our
application with debug. So we can head on to the next section, which is Connect to Docker Hosts. And what that means is
using Docker context command to allow us to connect Visual Studio Code to various Docker hosts,
local, in the cloud, Docker and Docker. You have multiple possibilities. So how do we do that? Within the Docker extension, you can actually switch
to other Docker hosts at the very bottom you see Context, you can actually right
click on for example, Default and say Use and it switches Visual Studio to use that particular Docker instance. And then you see all the
containers, you see all the images, all the registries, everything
from this particular context. If I switch to Docker and Docker again, it changes the context, I only see the images and
containers from Docker and Docker. So it allows me to have
multiple instances. And also think about it
from a point of view of, having multiple servers
that you can maintain from a single interface. You don't have to SSH anymore, you can just change context and
be connected to your server. It's quite simple. It's very powerful. And then you have the same functionality in the same screen without
having to jump around as you previously did. Let's take a look at how Docker context works within Visual Studio Code. Right in this next demo, we're going to switch
back to Visual Studio Code and we're going to click
on our Docker extension, which opens up our Docker extension UI. Here, at the very bottom
of the UI, you see Context. And right now, bring all the demos we've been using our default context, which is my local Docker
desktop interface. Now, if I want to, I can actually switch to a different host. So I have Docker and
Docker running as well. And what I'm going to do,
and this is Brian's Docker, which is cloud server running. But I'm going to connect
to Docker and Docker. So that's actually a container
running on my machine. And I'm going to connect to
the socket running on that. So we right click on it, click Use. And you can see right away, there's only, there's
one container running, there's a hello world that stopped. Here's the images. So now I'm directly
interfacing to this host as it's like on my local machine. So I can actually jump
in and say View Logs, I can see the logs of the HTTP server. I can inspect. I can do everything that I did previously. But now I'm doing in a remote context, the power of context is now I can connect to multiple servers using the same Docker extension interface, which allows me to, streamline my workflow as connecting to different servers and it just helps tremendously. But now I can interact with this, I can then switch back
to my normal context. And again, you can see
there's all my containers, I have tons of images here. And you can easily jump back and forth. You can see it's very powerful. It's very useful. So now I don't have to
open up a SSH window or to jump into another Docker hosts. I don't have to RDP somewhere. I do everything from Visual Studio Code. Great tool, give it a try Docker context. And now we're to the
recap of this session. I really hope that everyone was able to take some bits away that can really enable their workflows be a little bit more efficient. And now with Visual Studio Code, and the Docker extension, you can actually be a power user right? You can be the hero of your office. Let's quickly look at what
we covered in this session. First off is the Docker
extension user interface. With this user interface, we can actually do multiple selects, we can right click on Docker Compose files and start and stop them directly there, we can interact with the
different containers, volumes, networks, registries,
the contexts, et cetera. And we can actually right
click and check logs, right click and inspect. We could do a lot of things. The next thing we learned was the Docker extension command palette. With the command palette, we can actually interface
with the Docker extension through Visual Studio Code, which allows us to do a
little bit more for example, adding files to the Docker. And next we can also, we went
through the different demos of bootstrapping of Vanilla applications. So no Docker file, no Compose
file, we interacted with it. We wrote some Docker Compose files, we debugged and we
connected to multiple hosts using Dock context. What we also learned is
there's tons of shortcuts. And there's a lot more we didn't
even cover in this session, because there's just not enough time. There's tons and tons and tons. And this brings me to the next point is read the documentation. I really missed this point when I first installed the
extension a long time ago. And I really thought it was just for like command completion and syntax checking. But after some time, I realized that there's so much
more to this extension, and I hope everyone now realities that this extension can really improve and make you more efficient. So again, you're going to be
the power user in your office. Next up is Resources. The first thing is the documentation. Microsoft did an excellent job. It's open source documentation, so if you find anything
wrong, please contribute, add, change, and get it fixed. The next thing is if you're
familiar with awesome lists, Visual Studio Code also
has its own awesome list. And there you can find
information, tips and tricks, as well as certain extensions and things that play well
with programming languages. It's really a great resource. And the final thing, Visual Studio Code and the Docker extension
are both open source. So I really recommend that everyone goes and looks at the open source repo, and maybe contribute if you can. And that's all for this session. Thank you very much. Again, my name is Brian Christner. You can find me on
Twitter @idomyowntricks. I'm always answering tweets
or emails or direct messages. So please send me if
you have any questions, and I look forward to talking
to everyone in the Q&A. Thank you very much, everyone. (melodic upbeat music)
