In this video, we'll be taking a look at how
to integrate docker containers with Windows Subsystems for Linux and VS Code to make container
development easier. For the project that I've been working on recently, my next step is to try to
bundle the web app components that I've built into a containerized application. I haven't
done much of this before, so the first step was to try to figure out what I needed to build
into a development environment for containers. After some quick research I found out what I was
hoping for, which is that there is an integration for docker into Windows Subsystems for Linux
(or WSL). Which means that I didn't need to build any other sort of VMs or container
hosts to run my docker application just for development and testing. So in this video we'll
walk through pretty quick just what that install and setup looks like, and how easy it can be to
get started with docker using VS Code and WSL. So as you can see on the screen right here,
we do have the docker documentation page for how to get started with docker desktop -
with the WSL back end. The one thing I just wanted to point out on this page, is that you
will need a specific version of Windows 10 and you will have to be running WSL 2. Now if you're
not sure what version of WSL you're running, one way we can check real quickly
- is to open up windows powershell, and we'll type in "wsl -l -v" for listing and
verbose. And in my case you can see I have exactly one instance of WSL built today that I'm using...
it is a Debian image that is currently running, and it does show that it's version 2 -
so we're good to proceed with that image. Next we're going to scroll down just a little
bit, just to grab the download link - and we'll go ahead and click that and get over to the
download page. Easy enough all we got to do is click "Get Docker" and wait for the download
to complete. This will take just a second..... All right - once that download is complete we'll
go ahead and click on the installer to begin the installation of the docker desktop client. And
since we're intending on using this with WSL2, we do want to make sure that the configuration
checkbox for "Install Required Windows Components for WSL2 is checked. Lucky for us that is
the default so we'll just leave it as is. All right, once that install install is
completed we can go ahead and hit close. Next we're going to jump over to VS Code, where
the next step that we're going to need to do - is go ahead and install the docker extension
for WSL2. And so on the left side of VS Code, we'll see the little extensions icon. We'll
click on that, we will search for docker, and the first link is going to be the
Microsoft package for the docker integration. We'll go ahead and click "Install on WSL Debian"
since that's the image I'm using. This install is actually pretty quick. Once we're done with
that, we'll hop back over to our explorer. So in order to test this, we'll build a quick
nginx container just to host a simple web page. So in order to do that we'll create two files
- the first is going to be "index.html" which will contain the text data that we're going
to display on the page. And next we'll also create a "DockerFile" that's going to contain the
configuration for the container itself. Starting with the index.html file we'll just go ahead and
put in "Hello there! Built from our container" We'll save that file and we'll move over to
the DockerFile. Now since this is going to be a pretty lightweight test, we're only going
to need two lines in our configuration file. However I did want to show that VS Code now does
the command completion and autofill to help you out in building this config file. Makes life just
a little bit easier, especially if you're like me and you're a little bit more unfamiliar with
how to build containers. The first thing we're going to do is specify the base image that
we're going to build our container off of. So as you can see, once we start typing "FROM" -
VS Code already prompts to show that the correct usage is going to be "FROM" and then a base image.
And once we begin typing in the base image name of the container that we intend to use - in my
case nginx - only the first two characters are required for it to pop up the autocomplete. This
is going to show a list of base containers that we could use from the docker registry. We have
any number of images that we could use, but I'm just going to be using the official nginx image.
So we'll just auto complete that and move on. Next, we're going to need to specify that we are
copying our index.html file into the proper web directory on our container. So we'll do that using
the copy command. And again as we start typing we will see that VS Code will prompt us to show
that the correct syntax is going to be "COPY", the source file or folders, followed by the
destination. So real quick we'll just put in index.html - and we'll be copying that to
the nginx html directory within our container. Now not everything we're doing is limited to
just within VS Code. When we installed the docker components earlier, this did install a desktop
client that we can go ahead and open. And if we look here we can see that there are no containers
and apps currently running. And we can also jump down to the images and see that we currently have
no local images stored in our docker environment. So to make building containers simpler, we don't
even have to go look up what commands might be required to compile our container - instead within
VS Code, we can right click on our DockerFile and click "Build Container" and VS Code will
handle that for us automatically. It will prompt us to go ahead and tag what we on our image as
- but for now I'll just go ahead and leave that as the default. Using that build function, VS
Code is going to go ahead and download the base image that we're working off of - which is the
official nginx image - and then it'll go ahead and apply any additional configuration settings
we have to that container. In this case our only configuration is that we're copying our index.html
file to the nginx web directory. And then it'll finish by compiling all of that into a brand
new container that we can use for our testing. All right - once our container is built, we
can go ahead and click on the docker icon on the left side of VS Code. That's going to take
us to a new tab, that is going to show us all of our current running docker containers, available
images, any registries that we're connected to, and the docker networking. All of which we
can manage and see straight from VS Code. And under images we can see that we have our
docker test image, and we can expand that and see that we have the build "latest" - that
we just completed a couple of seconds ago. And if we wanted to go ahead and test our
container, all we have to do is right click on our image and click run. That will go ahead and start
that container locally within the docker engine. Now we have a couple of things we can do,
for example if we want to make sure that our file was copied correctly - we can go
up under running containers, right click, and click "attach shell". This is going to give
us a bash shell running in our container - so that we have command line access to go ahead
and check to make sure that our file is there. So we'll go ahead and check real quickly... and
yep, that looks good - just what we'd expect. And so next we'll go ahead and launch a web
browser, to go ahead and see that everything is working as we intended. Again in our
running containers inventory in the upper left corner - we can right click on a running
container and just click open in a browser. And that will go ahead and pop up my browser
locally and redirect automatically to the URL of our container... And sure enough we see the text
that we had put in our html file. We can also jump back over to that docker desktop client and see
what is being shown in there now. Since I left this on the images tab, we can see that we do have
our local repository. It shows our docker test image that I just built - and it shows that it's
in use and running. If we go ahead and switch over to the "Container / Apps" tab, we're also being
shown here that there is that container running, it is running on port 80, and similar to VS Code
we'll have our options here - if we wanted to go ahead and open this in a web browser and view the
page. Or if we just wanted to pop a CLI bash shell to run commands locally on the container. All
that being done, once we're done we can hop back over to VS Code - we can right click on a
running container and go ahead and click stop. Okay and that's about it. I just wanted
to take a couple of minutes to show what the docker integration to VS Code and
WSL looks like. And how easy it can be to make container development a little bit
simpler. Alright and thanks for watching!!!!
