Deploy Angular App to Azure Container Instances.

As I continue my quest to learn more about Azure services, I have decided to play with Azure Container Instances. In this post, I will share how to take a simple app, integrate Docker, and finally deploy it to Azure Container Instances.

First, let’s create a new Angular app using Angular CLI command ng new angular8docker. If you want to see the Angular app, take a look at this repo https://github.com/agileraymond/angular8docker.

Now that we have our app in place, let’s integrate it with Docker. So what is Docker? Let me share opensource.com’s definition, “Docker is a tool designed to make it easier to create, deploy, and run applications by using containers. Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and ship it all out as one package. By doing so, thanks to the container, the developer can rest assured that the application will run on any other Linux machine regardless of any customized settings that machine might have that could differ from the machine used for writing and testing the code.”

To integrate our Angular app with Docker, we need to add a Dockerfile. Dockerfile is a file that tells Docker how to build an image.

This file tells Docker to base the image from node:12.2.0. WORKDIR sets the working directory for our app. Next we set the path for our node modules. The COPY command copies package.json file to our app/package.json. Next, we run 2 npm install commands: one installs our app dependencies and the second installs angular cli tool. Next we copy entire contents to /app directory. And finally ng serve to run our app.

We have a very simple Dockerfile. If you want to learn more about this file, visit https://docs.docker.com/engine/reference/builder/. In addition to the Dockerfile, we also need to have a .dockerignore file.

This file tells Docker to ignore these files or folders. We are ignoring node_modules, .git and .gitignore. Using a .dockerignore file will keep our app small with only files needed to run it.

At this point, we are ready to build our app. Make sure you have Docker Desktop setup on your computer. Using a terminal, run “docker build -t angular8docker .”. This command will build our image by reading the Dockerfile and tag it as angular8docker.

After our image has been created, we need to run the app locally. On a terminal window, run “docker run -p 80:80 angular8docker”. This command will run our app by publishing port 80 to the host and will use angular8docker image. Very simple. Now using a browser, go to http://localhost and you should see your angular 8 app.

Now let’s host this app on Azure Container Instances. I’m going to use Azure CLI on this post so make sure you have the CLI installed locally. First we need to create a resource group. Run this command on your terminal: “az group create –name myResourceGroup –location eastus”. With our resource group in place, we can create our container registry with this command “az acr create –resource-group myResourceGroup –name angular8docker –sku Basic –admin-enabled true”.

We have to login to our container registry before we can push images to it. Use this command: “az acr login –name angular8docker”. If the login request was successful, you will receive a successful message otherwise an error message. Now let’s get our login server using this command “az acr show –name angular8docker –query loginServer –output table”. In my case, I received my loginServer as “angular8docker.azurecr.io”.

Now we need to see a list of our docker images with this command “docker images”. This will help us tag the image and associated with our container registry. Use this command to tag it: “docker tag angular8docker angular8docker.azurecr.io/angular8docker:v1”.

Run docker images again to verify the tag.

Finally let’s push our v1 image to Azure Container Registry with this command: "docker push angular8docker.azurecr.io/angular8docker:v1"

With our docker image in our Azure Container Registry, we can create an Azure Container Instance to run our angular 8 app. Run this command to create container instance “az container create –resource-group myResourceGroup –name angular8docker –image /angular8docker:v1 –cpu 1 –memory 1 –registry-login-server angular8docker.azurecr.io –registry-username angular8docker –registry-password <password> –dns-name-label rayangular8docker –ports 80”. After couple of minutes, you will receive confirmation message.

Find the FQDN in the confirmation message above and open up a browser window to see your app online. If you don’t see your app online double check port settings. Let’s do a final clean up so we don’t incur additional cost. Run “az group delete –name myResourceGroup” and all resources attached to this group will be deleted for us.

In a future post, I will show you how to troubleshoot Azure Container Instances.