How to Launch a Dockerized Node.js App Using the Azure Web App for Containers Service

Published in

Microsoft Azure

9 min readDec 13, 2018

Presenting at Microsoft Ignite: The Tour in Berlin

Hi everyone! I am back from Berlin, Germany! It’s been a busy few months but I wanted to give you an update on what I’ve been up to for the “Microsoft Ignite: The Tour” and even demo a quick preview of what you’ll be able to see on future stops. In this blog post you’ll get a quick review plus I’ll give you a quick tutorial on Docker, containers and Azure.

The Microsoft team headed to Messe Berlin, a huge venue that served as home to the first stop on Microsoft Ignite |The Tour. We ran through our talks, prepped the space and got some time to feel the energy that was building in the venue. We were all set to start teaching the people attending how to maximize their experience using Microsoft Azure.

Attendees of Microsoft Ignite |The Tour learn to get the most out of Microsoft Azure. In my session, MIG10 — Migrating Web Applications to Azure, we focus on taking an application that is compromised of different technologies (Node.js, .NET Core, MongoDB, SQL) and migrate it to production using Docker and Azure Web App for Containers Service. The goal of the session is to provide users who may be new and interested in making their first journey into the cloud with enough information to demystify the concept of “going to prod” with their application. Being able to execute this talk and help people take an early journey into the cloud was excellent.

Getting you started!

To provide you with a quick preview of the experience, I wrote a tiny version of the demo for you to use and get started with at any time. In this tutorial now I’ll quickly show you how to launch a Dockerized Node.js app that shares “Hello World!”

Requirements:

Docker (Install on the computer you’ll be doing this tutorial on)
Azure Account (Sign up for a free $200 credit)
Git (Install on the computer you’ll be doing this tutorial on)
Node.js (I like using nvm to manage Node, personally)
Some software development experience.

That’s really it. We’re going to focus on making this extremely simple to take an application and bring it to prod.

What we’re going to do to get to prod.

We need to go through a few steps to prepare our app for production:

We need to create a Azure Container Registry for our app — this is where Docker images will be stored when we create them.
We need to take the app we will download, containerize it with Docker and then push it to the Container Registry.
We will use Azure Web App Service for Containers to provide a fully managed hosting platform for our image.

Let’s get to work, alright?

First, start by opening your favorite terminal and cloning the code repo for our “Hello World” application.

bash-3.2$ pwd
/Users/jaygordon/demo
bash-3.2$ git clone git@github.com:jaydestro/demo-app.git
Cloning into 'demo-app'...
remote: Enumerating objects: 18, done.
remote: Counting objects: 100% (18/18), done.
remote: Compressing objects: 100% (14/14), done.
remote: Total 18 (delta 4), reused 13 (delta 2), pack-reused 0
Receiving objects: 100% (18/18), 6.93 KiB | 1.73 MiB/s, done.
Resolving deltas: 100% (4/4), done.

Now that we’ve cloned the repo, let’s have a quick look at what we are working with:

App.js:

var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.send('Hello World!  Use Azure!');
});
app.listen(8000, function () {
  console.log('Example app listening on port 8000!');
});

A basic Express framework app that simply outputs to port 8000 “Hello World! Use Azure!” Why something so simple? Before we get into the idea of adding complicated applications, using orchestration platforms like Kubernetes, it’s important to be able to get started with just the basic tasks. This app provides very few things to go “wrong” for the user, hence why it was selected as our way to demonstrate this method of deploying containerized applications.

To view the app, I can just test it locally using the instructions from the README.

npm install
npm start

Cool, our app starts locally. You’ll also notice that in the repository I’ve provided you with a Dockerfile. Lets review it’s contents quickly:

FROM node:8# Create app directory
WORKDIR /usr/src/app# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./RUN npm install
# If you are building your code for production
# RUN npm install --only=production# Bundle app source
COPY . .EXPOSE 8000
CMD [ "npm", "start" ]

We’ve provided our Dockerfile with instructions on how to execute our application install within Docker. We’ve provided it with the correct environment base image by stating FROM node:8 (use Node, version 8) along with further instructions on what to do with the code provided in the container once we’ve executed build. For more information on all the syntax in this file, check out this documentation from the Docker team.

Now that we have a basic understanding of our code and our Dockerfile, it’s now time to create our Azure Container Registry, build our container, push it to the ACR and eventually give it a Web App Service for Containers account.

Azure portal

First, lets create our Azure Container Registry (we’ll further refer to it as an ACR). To do this, we’ll do a search for the service within the Azure portal:

The ACR will provide you with all that you need for storing your images including authentication, encryption and tagging. To get started we’ll provide the following resources:

Registry Name — What we want our ACR to be named along with a fully qualified domain name.
Subscription — Where the billing for the service will go.
Resource Group — the logical group where all of our items will exist (I’ll create a new one here for us named jagord-demo-blog)
Location — where our registry will be located in Azure
Admin user — we can enable authentication so we can allow users who are only permitted to access and push our images
SKU — Pricing tears based on usage

Build and push our images

Building and pushing our images is a small task now that we’ve create our container registry. To login to the registry where we’ll eventually upload our images, we’ll need to navigate to our resource we’ve created and then get the credentials.

I navigated my browser to the jagord-demo-blog resource group and then the demoacrjagord Container Registry. There I found the “Access Keys” section:

Now I can go to the “Access Keys” section where I can find the credentials for the ACR (which you can rotate the passwords for with just a click) that we’ll use to log into our ACR. I’ll copy the address to the “Login Server” and then provide the credentials to access our ACR:

docker login demoacrjagord.azurecr.io --username demoacrjagord
Password:
Login Succeeded

We’re logged in, let’s now navigate to the directory with our code repository and create our Docker image.

docker build -t demoacrjagord.azurecr.io/demo-app:latest .

This will build the contents of the local directory you are in and then state that the registry you’ll be storing it in is demoacrjagord.azurecr.io. There is also a name given to the app, demo-app that is tagged with the latest release tag. The output of the build should look something similar to this:

Now we can push this image to the ACR and have it ready for production deployment. The commands are pretty similar to the build:

docker push demoacrjagord.azurecr.io/demo-app:latest

When completed, your output should look similar to this:

Now our container has been added to the registry, there’s two simple ways to confirm this, one is going to “Repositories” section for our ACR in the portal:

or by running an ls command in docker that states available images:

docker images |egrep demoacrjagord.azurecr.iodemoacrjagord.azurecr.io/demo-app                  latest                    d471f1b95302        12 minutes ago      893MB

Create Web App for Container Service

Create your Azure account and log into your portal. Navigate to the Azure Web App for Containers section by typing it into the search:

This will bring you to the fully managed platform that will allow us to deploy our container to production. We’re going to provide some details on the name for our app along with the location of our container. This will then take our container and provide it with all the necessary features one would expect in production like:

Fully Qualified Domain Name (hostname.azurewebsites.net provided for you)
SSL/TLS Encryption for your provided hostname
Custom SSL and hostnames
Backups, monitoring, scaling and more

To create a new Web App, let’s provide the required information:

App name (what our name for our FQDN will be)
Subscription (same as our ACR)
Resource Group (same as our ACR)
OS — we’ll use Linux today
App Service plan — the container for your app. The App Service plan settings will determine the location, features, cost and compute resources associated with your app.
Container — this is the container we pushed to the ACR

Here’s all of my settings including creating a new App Service Plan

Selecting our container is pretty simple. Under “Configure Container” we’ll pick the Azure Container Registry. Once I select that I can pick the ACR, the image name and the tag I want to deploy:

Click “Create” and the process of deploying your application will begin. The Azure Web App Service will deploy all of your requirements like the hostname, ssl and firewall. Once that’s completed you’ll be able to navigate to the resource and go right to your new Web Application.

Holy Cats! Our containerized Web App is online! If we want to delete it, no big deal. Go to resource groups in the portal and just delete the group we created to demo this new application.

Final Thoughts

I hope this demo got you all the details you could want on taking a simple application and taking it to the could with Azure. Microsoft Ignite | The Tour will continue with sessions like this. If you’re looking to grow as a developer or operations team member, I really recommend coming to one of our events all over the world. You’ll be able to take in the information that can help make you ready to grow as a technologist.

If you have questions or concerns, reach out to me on Twitter!