Build, Run, & Continuously Deploy Docker Containers to Azure App Service

hey what's up everybody it's Mike Pfeiffer and in this video we're gonna take a look at how you build run and continuously deploy updates to docker containers running in the azure apps service and I'm basically gonna step you through this workflow here taking a developer machine a docker file and building your own container image and then pushing that container image to a container registry in this case we're not going to use the docker hub we'll actually use the Azure container registry so I'll show you how to build that resource how to work with that how to push a container image to it and then ultimately run a container based off that image in Azure app service as a web application so this is a great way to kind of get started with docker in Azure it's very simple to set all this up and the cool thing is that web apps for containers do supports continuous deployment so you can basically after you get all this setup update your application or your docker file rebuild a new image based off that push the new version to the azure container registry and have that automatically trigger a deployment and get the current version of your application up and running in Azure and so that's what I'm gonna show you let's go ahead and hop over to the azure portal and we'll get started okay so the first thing we need to do here in the azure portal is go to create a new resource go to containers and then we're gonna build a container registry resource this thing is going to live under asher cRIO so you gotta pick a unique name here I'll just use my name and initials then we're gonna put this in a resource group called docker demo and then for the admin user piece I'm gonna go ahead and enable this this is gonna give me the ability to use the docker log in command here on my workstation on my developer machine to connect to the container registry resource so I can then push images into this container registry and so with that these settings look good let me create that resource and then while that's building let me show you the sample application and so this is just a node docker demo application of very bare-bones node and Express application here in github I'll leave the link for this in the description in this video but really all we need to do is go to the clone or download button get the URL for this and then I'll head over to my terminal and so we'll do here is we'll create a new directory called my demo apps we'll switch into that directory and inside that directory we're gonna do a git clone on the repository URL and with the application cloned just do a directory listing hearing we can see that's the folder we want to switch into that we've got a docker file that's going to allow us to build our own container image so let's go and open this application in Visual Studio code I'm gonna run code period so we're gonna run this against the current directory and there's the entire application so let's take a look at the docker file and so this is really basic but these are the instructions that the docker build command are going to use so the from basically says what container image is going to be the parents or basically the underlying container base image for the application and so we're using the node image with the Alpine tag so we're using Alpine and Linux inside this container image it's going to be optimized this can be a very small container image and then from there the instructions are very basic the working directory for the application is going to be this folder and then we're strategically running commands in a certain way to copy the application code run npm install to install our dependencies and get the data the application code itself copied into the container image and i'll explain a little bit more about this as we build the images up and do some updating but finally the last piece here is the command or the CMD command basically saying we're gonna run an NPM starts when the container runs and so if we look at package.json you can see the startup script simply just runs node a pas and if we take a look at app j s it's really just setting up a basic Express web server and then when somebody visits the page we just say hello world you'll also notice in this app das file that we're bringing in a configuration and we run app listen we're specifying a port that's exported in that configuration and so just to show you a config das we're listening on port 3000 by default so let's go ahead and build this container image with docker and we'll starts the application locally and then we'll push the image up to Azure let me go back grab my terminal let's clear the screen here so the first thing I'm going to do here in this terminal is just run the docker images command and you can see here that we've just simply got the base container image and so we don't have any custom images at this stage and so what I'm going to do is run docker build and then we're going to tag our custom image based off this application code so you can see doctor build - T and then we're going to use the container registry name mic PF donnager cRIO / no doctor demo : latest - tag the image as the latest version now the final piece here is the period meaning we're gonna look in the current folder for a doctor file we're gonna build a custom image based on that now the reason that we included the container registry URL basically in the name of the image is because that all seamlessly helped us will we go to run docker push once this thing is built it will send it up into that location so let's go ahead and build the local version of this and that ran successfully so we successfully built our image if we run docker images we'll see it's in there and then let's clear the screen then we'll do a docker run - d to run this container detached and then what we'll do is we'll map ports 8080 on the outside to port 3000 on the container and then we'll specify our container image let's go ahead and run that and then we'll go back over to our web browser we'll go to localhost colon 8080 and we can see hello world is showing up for our application so we know the code works we know that we can take this container image and then push it up into the container registry in Azure so in order to do that it's actually very simple at this stage we just go back over here and so then we're gonna run docker login and we're gonna run a login against the container registry fqdn the fully qualified domain name that we created in the azure portal so that's gonna be Mike PF dogger cRIO and so the user name for this registry is simply going to be the host name of the registry Mike PF so we'll type that there but if I had to override that I could just type over it hit enter and now it's asking for the password and so the password is going to be the access key or the container registry resource so going back here it looks like that's complete so we'll go to that resource head over to access keys and then I'm just going to copy this password here but again you can see the registry name you can see the login server you can see that admin access is enabled so everything looks good let's go over here we'll just paste in that password and login succeeded so I'll clear the screen and the last thing we need to do is actually push that image up into the container registry here and as so we're simply going to do a doctor push using the container image name that we have locally here the latest version let's go to run that you can see it's uploading our container image and we'll see back here in the azure portal in just a second and with that it looks like the push succeeded so head over to the azure container registry go to repositories here inside this resource go to node docker demo and then you can see that we've got the latest version of the container image available here in Azure it's ready to go and so now we can build a web app our container resource and connect it to this container image so if we go to create a resource go to web we can do web app for containers and for this one I'll just say this is the docker demo 20:19 will use an existing resource group I'll just use my docker demo resource group and then I've got an app service plan for Linux already running here in the West Coast from there I'll just go to configure the container and that'll let me pick the container image that I've got in the azure container registry so hit the drop-down select the image and then select the tag that I'm interested in deploying to this web app for containers resource so it looks good and click on apply and then we'll go ahead and create that web app and so this will take just a minute to create so let's let it run and then we'll see what happens here in just a second alright and just tap here a second here you can see that was deployed successfully let's first go into the resource group the doctor demo resource group and you can see just the two resources we have the container registry and the app service web application so heading into the web application let's go ahead and grab the URL for this application head over there and now we can see here it says hello world and we're hitting this web application right there and azure app service so that worked really good everything's working fine and so we can close these other tabs over here alright so at this point let's go back over here and let's make one other change we'll scroll down we'll go to container settings here inside the web app resource and the last thing I'm going to do is turn continuous deployment on am I go ahead and save that what this will do is it'll create a web hook resource that will fire whenever we push a new version to the docker container image in the container registry and it will automatically kick off a deployment so for example going back over to the resource group and doing a refresh here you can see now we've got this container registry webhook and looking at the web hook it's never run yet but if we push a new version of the image to the registry it should fire it should cause a deployment to take place and update our web application so this is really cool let me go back over to my terminal let's clear the screen here and so what we want to do here is run another doctor build build a new image and then push that up into the container registry but first we need to actually update the application code so remember looking at the app it just says hello world so let's go back into Visual Studio code into the app dot J's file and we'll just say hello world version two go ahead and save that and then in the terminal we'll run to the build process again so for each step of this build process like the working directory wasn't changed so we used the cache we didn't change the package.json or anything else so that used cache and because we didn't change that we didn't have to do an NPM install and that use the cache and then finally the only thing we change with the app.js file and so the copy operation ran we updated that layer and then we built a new image version and so that's kind of the story with the way this docker file is actually set up and so doing things kind of in this order just keeps it easy and it keeps us from basically building a bloated container image with a bunch of layers and it's potentially so with this new version of the container image builds we can simply run another push so what do docker push again against the same local image and notice that we're just simply pushing the one layer that's changed in the container image and that should trigger our web hug so going back to the portal heading over to the web hook resource hitting refresh we can see that we got a push action taking place and if we go back into this resource group and we go to the web application and we go back to the container settings we can scroll down and looking at the logs we can see that it ran a new version of this container image so let's go over to the tab here hit refresh and we see hello world version two so hopefully that gives you a little bit more perspective when it comes to working with containers and Azure and this is just one of many tutorials we'll be posted here on cloud skills TV but let me show you how to clean up this environment if you go back to resource groups you can just delete this docker demo resource group just plug in the name there and go ahead and nuke that resource group when you're done and that'll take you back to your original configuration so I hope you enjoyed this tutorial I hope this helps we'll see it in the next video

Channel: CloudSkills

Views: 47,775

Rating: 4.9685349 out of 5

Keywords: Azure, Docker, Containers, App Service, Dockerfile, Container Registry, Continuous Deployment, DevOps

Id: O5aXcmKc1HU

Length: 11min 30sec (690 seconds)

Published: Fri Apr 05 2019