Deno First Look

Build and Deploy Docker Image

Burke Holland

Burke Holland

Deno First Look

Check out a free preview of the full Deno First Look course

The "Build and Deploy Docker Image" Lesson is part of the full, Deno First Look course featured in this preview video. Here's what you'd learn in this lesson:

Burke walks through creating a container using build image for a Docker extension and deploying by pushing the container to Azure. A student's question regarding creating a volume for a Deno cache is also briefly covered in this segment.


Transcript from the "Build and Deploy Docker Image" Lesson

>> There are many different ways that we could deploy this application. We can do it bundled or unbundled or compiled. We've talked about why we can't do it bundled or compiled. But we can deploy it unbundled the way that we would just deploy any old, express or node application.

We could deploy it to a virtual machine or we could deploy it to a PaaS which is a platform as a service, or we can deploy it as a container. Now, of course, you can always deploy anything that you like on your own server VM that you have or that's hosted in the cloud, that's up to you.

A PaaS which is a platform as a service is where the hosting provider provides the runtime and you provide your code. The most popular one of these is probably Heroku although Azure has one as well. Google Cloud has them, Amazon has them, you find them everywhere. We're not going to use them one here today because they're all very specific to that cloud.

And if I show you just one way, then it won't be applicable everywhere and I want to do something that will work everywhere. And so one of the things that we can do that will just work everywhere is to put this thing inside of a Docker container to deploy it.

So that's what we're going to do in this section here. So containers, if you don't know what containers are, and because it wasn't a prerequisite for this course.. But basically what it is, is it's a way to bundle up your entire application and your run time, make sure that it works on your machine, and then you can just take it and move it over to the server and start it and it will work there too.

Without explaining the ins and outs of containers, that's just the magic that they do. So how do we create a container? Well, we're gonna have to have Docker installed and we need a file that's going to define how this container is built. So I'm going to create a new file and call it Docker file.

And in this Docker file, we need to pull in an image that has deno in it. Now deno doesn't have an official Docker image, but this hayd person has been creating these deno images and the community seems to be okay with this. And they seem to be keeping on top of the releases as well.

So I'm going to guess that 1.6.1 is available already. We'll see here in a minute. All right, the next thing that we wanna do here is define a working directory for our application inside of the container. So we're basically just saying, hey, make a folder in this container called app and we're going to put all of our files in there.

And then we want to copy all of the files from the current directory into the container, okay? And then the next thing that we want to do is define a port variable which we're going to PaaS to the application. Now, this is pretty important because when you actually deploy these containers to production, you're gonna get a random port assigned to you.

And because you don't know what that is, you need to read it in as an environment variable which we haven't been doing. So we're gonna need some modifier application a little bit which we'll do in just a second. And then lastly, we just need to start the container actually two more things to do.

One is to start the container, so we're gonna say deno, run, A, right? I don't think we need to do unstable and we want to run the app.ts file. I'm pretty sure that's all we need. I PaaS the unstable I don't think we need that though. And then lastly we just wanna expose this port variable from the containers that we can actually access it once our code is running inside.

All right, so crash, course and Docker there. So when our app here, what we're gonna do instead of assigning the port is we're gonna use that deno.env.get to get the port, but if it's not there, then we'll just use Port 3000. But what this allows us to do is to read this port that's parsed in right here.

So when we set this environment value, it gets passed to deno, and we can read it. So let's do this. And here's from our bundling, delete the app that ESC, let's delete sleet app. All right, so how do we build this thing now that we have a docker container for it?

Well from VS code, we're gonna say build container. Build image Docker images build image. So let's do that. And it wants to know which Docker file do you want to use. We're going to pick the one in the solution folder. And then what do you want to call it?

We'll just call it do deno exercises. And then we're just going to go ahead and let this container build. And this is going to take a little bit of time the first time it happens because it's going to pull down the image it's got to copy our stuff in, it's got to pull down all the dependencies for deno.

It's got to do everything and create the image. Now once this is finished running, we can look in the Docker extension here and we should see an image called deno exercises, which we do updated a few seconds ago. So how do we run this thing? Well, we just right click it and we're just going to run interactively, And it's running.

You can see it pulling in all of our dependencies, checking our file. Now listening, we get a random port here so let's see. Let's click on this Open. Yeah, see how we got this random port here. I don't know if you can see that it was randomly assigned to us but it still works because port is a variable.

All right, so now we've got this container we need to actually get this container into a hosting provider. So to do that, we just need to push it so I'm gonna right click this image and say push. And then it wants to know it asked me for a namespace here and by tagging it with my name, this is gonna push it to Docker Hub underneath my account.

And then we're just tagging it with latest. So we'll just hit Enter. It's gonna log into Docker, it's going to push my container. And then we should see under registries and Docker Hub, We should see deno exercises and we do it's right there. And just to check on it, we can open a browser.

So let's do open, Here it is updated a few seconds ago. All right, so we've got our container with our deno project in the cloud, how do we run it? Well, we need some place where we can run a container. The next part I'm gonna do in Azure, but any cloud provider that supports containers will work just fine here.

These steps are specific to Azure but you can substitute in any other service that you like. So let's do deploying it to a registry, which we just did. We just pushed it. And then we need to create our site. I need to do it here in Visual Studio code, I'm sorry.

So let me do this. All right so this is what we call the Cloud Shell in Azure. So it's a bash terminal where we don't have to log in, we don't have to install anything. It's just part of the VS code extension for Azure that gives us immediate access to a terminal.

So we can skip this actual login step here and we can go directly to this step or window, create a resource group called deno exercise group, which we did. And this is just a group where we're going to put in our assets, one of those assets is the container.

And then we need to add an app service plan. So I'm going to create that and what that does is basically us telling Azure what size of the server we want, and what we want that server to look like. So I specified and I don't know how well, because this is grayed out here but if we scroll back up.

I selected that it should be Linux, and I selected that it should be the skew. Should be f1, which is the free tier. So if you didn't know, there's a free tier in Azure, we're just using the free tier so we don't get charged. And then lastly, what we want to do is actually create the web app.

And I want to PaaS in the name of that container called deno exercises. Paste this command in. I'm just gonna modify one line here, this one. Let's grab it from the beginning. Open our terminal back up. We'll just get some new lines, paste it in, run it, Here we go.

So now it's creating our application which we called deno-excercise1. And we have parsed it and said, hey from Docker Hub. Pull in this container that we pushed up to Docker Hub and run it. So pull it down and run it, which is exactly what Azure is gonna do here.

And it will take just a minute to do this because it has to pull the container, it has to build the container it has to start the container. And I have an extension called the Azure extension for App Service which shows me all of my app services. And if we go here, there's my container that I've deployed.

So what I want to do is like, find the URL for these things. If, [LAUGH] we scroll back up through all this output, we can actually find it right here. Host names, so let's just copy this, And click here. Now, the first time that we run this, it's going to be awful slow, because Azure actually doesn't do anything with that container until you request it.

And then once you do make a request, it pulls the container down does a lot of downloading, spins up the container, starts it, makes sure everything is going but it doesn't actually do that until you hit that URL for the first time. So this is going to take just a minute to fire up here, but we should see our deno application running here very shortly.

Any questions on what we did which was a lot there while we're waiting for this to spin up?
>> I wanted to ask if it would be useful to make a volume for the Docker before the deno cache if that is, [INAUDIBLE] process or something?
>> It might, that's a good question, You can give it a shot.

That would be, that's a good tweak though, for containers. Sorry, the question was, would it be faster to create a volume for the Deno cache? And in our case, it's not that big. So I don't know that necessarily would but if you had a project of some significant size, then could be, yeah.

So we're running here and if we parse in our users route, yeah, welcome user, there we go. So we've deployed, we've successfully deployed and we are running deno in production on the Internet. And you can hit this yourself if you go to that URL. We have built and deployed a web application here with deno 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