Visual Studio Code Can Do That?

Dockerizing an Application

Burke Holland

Burke Holland

Visual Studio Code Can Do That?

Check out a free preview of the full Visual Studio Code Can Do That? course

The "Dockerizing an Application" Lesson is part of the full, Visual Studio Code Can Do That? course featured in this preview video. Here's what you'd learn in this lesson:

Burke gives a brief explanation of Docker, and explains how to containerize an app using VS Code.


Transcript from the "Dockerizing an Application" Lesson

>> Burke Holland: The first time I heard about Docker, I saw the presentation from I think it was the one of the founders of Docker. I think it is the most famous presentation it talks about the problem of shipping apps in containers. And I watched 30 minutes of it, and thought none of that made any sense to me.

It was not until I actually used Docker that I understood what it was. So I wanna give you what's going to be a rough and possibly bad analogy. But hopefully, will help you understand what Docker does. When you build an application for Windows, most people are probably are probably familiar with Windows applications.

They have a file extension. What is it?
>> Speaker 2: EXE.
>> Burke Holland: EXE, when you build an EXE, you take your application, and all the dependencies that your application needs to run. And you put them inside of a container, and that container is called an EXE. And then I can take that container, and I can give it to you.

And you can double-click on it, and it will run on your machine. Or you can double-click on it, and it would run on your machine. But that's not always worked, because sometimes you need the .NET Framework, or you need some runtime that's not there. So what Docker is essentially is it's an EXE where you can put runtimes in it as well.

So imagine if I can take any framework that you need Java, .Net or whatever, and just put it in the EXE. And then when you double-clicke on it whether you had it installed or not it will just run. You don't have to worry about your environment, everything is contained in the EXE.

You also get access to file systems so that if you are in the container, it looks like you are on server all by yourself. You're not, but you're in a container, which thinks that it is. So if you can imagine that you're writing applications, putting them in a container, and it's almost like you're on a pre-configured server.

And then you're shipping that whole thing up to wherever it's going to run, okay? Everybody still with me? All right, so we want to take a look at how that works today. You're gonna need the Docker extension installed in order to do this. If I haven't mentioned that yet, when you install it, you're going to get this little panel explorer view over here to the right.

And let me go ahead and remove some of these containers. Actually, I'll leave these running. We're gonna need these later, and I want to remove them it'll just take us longer to build. So we have an application here, I'm gonna open this up and our start folder. And the application runs, it's the one we've been running.

It's a express application here. It's the one we've been running all along. And what we wanna do is we wanna Dockerize this application to ship it somewhere so it run somewhere else. Now in other for this application to run, we have a couple of dependencies. One of them is Node.

Wherever we shipped it, Node has to be installed, okay? It's not gonna run very well without Node. And so to Dockerize this application, we need to add configuration files into it first. We don't know what those configuration files are. Fortunately for you, Visual Studio Code does. So what I'm gonna do is open the command palette, and I see Docker, Add Docker Files to Workspace, okay?

When I do that, it's gonna ask me, which workspace? And then it wants to know, what's your application platform? In other words, what dependencies do you need? We're using Node, if we're using Go or Java, it would pull in a base image for those. But since we're using Node, it's gonna pull in a base image for Node.

I'm gonna select Enter. What port does your app listen on? 3,000 it's taken a good educated guess. And now it's created a couple of files for us. Specifically, we have a Dockerfile, a docker-compose, a docker-compose.debug, and a dockerignore. Let's just walk through and start with the files that we have, and look at the way that they're built.

If we look at the Dockerfile here, here's what's happening. It's pulling in a base image. In other words, what it's gonna do is it's gonna go to Docker Hub. And it's gonna say, give me an image that contains Node, and it's gonna download that and pull that down.

Then it's setting some environment variables here. Then it's gonna set a work directory. This is just the directory in the container where our apps gonna be located. Then it copies in our package.json, runs npm install, copies in the rest of the whole project exposes port 3,000. So we can actually access the application.

And then it runs in npm start, and actually starts the app. So this Dockerfile contains everything we need to containerize this up. So let's containerize it. I'm gonna go ahead and Cmd+Shift+P of command palette, Docker. And we're gonna do Docker Build, okay? I'm gonna hit Enter, it's gonna ask us, which project we wanna build?

Again, we working a workspace with multiple projects. And then it wants to know, what do you wanna call it? Well, let's give it a name, let's give it a specific name of frontendmasters-lamp. And see this latest out here on the end, this is the tag. So you can add a version to your image, and then when you use it or pull it from somewhere else you can say give me that version of the image.

A lot of times you'll see a latest tag. And what that means is, this is the latest version of the image. And so if you were deploying it somewhere, and you had automatic or continuous integration setup, and you deployed a new latest image, that's the one that would always be running.

So I'm gonna hit Enter, and now is gonna go ahead, and it's going to build this container which you just did. Now mine went faster than yours is gonna go, because I've already pulled down the bass note image, and it's cached on my machine. But you can see it walking through the steps here.

It's pulling from nodes, setting the environment variables, and we're good to go. And actually, I think in this one, no, we don't have any more environment variables than we need. So now where is our container? Well, we have an image rather we built an image. We have an image at the moment.

Where is it? But come over to our Docker extension here. We have it, here, right there, you see? And I can expand it and it's right inside. Now if I was to create a different one, so let's do this sorry, let's build. And let's do this, and let's say instead of latest, let's say it's 1.1.1, go ahead and do that.

It's gonna build it again, and now look, both versions are there, right? So you see how tags work, okay? Now, we wanna run this image as a container. Make sure I don't have anything running on this port. We look good, we run latest.
>> Burke Holland: All right, and come back over and hopefully, all right, so now we're running inside of our container, okay?

But we can't really see what's going on inside of the container, it's a bit of a black box. So what we can do here is we can say View Logs. And we can see all the logs that are coming out of our container, this is our little server this running, and if I do refresh you can see all the logs.

Now remember I told you that containers think that they are the only things on the operating. They think that they are the operating system essentially. So if we wanted to look inside of this container we can do that, we can right-click and say, Attach a Shell. And now we have a command prompt inside of the container.

See how that says user/src/app. Do you remember in our Dockerfile, that right there? Okay, so that's the directory that we've created where our app is running. If I do ls, I can see all of the files that are inside of this Docker container. It's my project files, they were copied over, there they are.

Now check this out, watch this. If I change directories, and I go to the root, look, what does that look like? The root of a Linux file system, it thinks that it's on a server all by itself and it has the whole server. How does this work? I have no idea, this should not work.

This should not be possible, but it is and it changes everything. And this is why I'm so excited about Docker, and why it's so important for us to go over it today.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now