Categories
Azure Container Instances Container Registry Docker

Deploy Angular App to Azure Container Instances.

Azure Container Instances, Angular 8, Docker

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.


Categories
Azure Cloud

Creating a Virtual Machine using Azure Portal

At work, we use Azure as our primary cloud provider. Our infrastructure runs on Azure and there is a need to learn Azure and its services. With my AWS background, I believe it is going to help me gain a deeper knowledge of Microsoft’s cloud. In the past I have written about Azure but now I want to start preparing for Azure certifications. I need to drink Azure Kool-Aid. I want to start this process by creating a virtual machine.

Let’s create a virtual machine using Azure Portal.

Azure Portal - Create Virtual Machine - Basics
Azure Portal – Create Virtual Machine – Basics

Fill out your basic details like operating system under Image. Here you have linux and windows machines. For this post, I’m choosing an ubuntu server. After completing required inputs on basics tab, I move on to the disk section. Here I accept default parameters. I continue with networking, management, advanced, tags, and finally review and create.

Azure Portal - Virtual Machine - Review
Azure Portal – Virtual Machine – Review

After creating my virtual machine, I noticed that my server is ready within 2 minutes. At this moment, I’m curious what resources were created. At the top of the list, I see my virtual machine. I also see network interfaces, storage account, network security group, virtual networks, and public ip addresses.

Since I’m not going to use this virtual machine, I will delete this resource so I don’t get charge for it. In a future post, I’m going to explore the .NET SDK and create a virtual machine writing C# code.

Categories
Azure

Resources to get you started with Azure

The cloud is here to stay. And with that in mind, we, as software engineers, have to keep our cloud skills up-to-date. AWS and Azure lead the cloud computing space in terms of services and revenue. For the last few years, I have gained hands on experience with AWS and was able to get certified as a developer associate. Now it is the perfect time to gain a deeper knowledge about Azure services. In this post, I’m going to share resources to get you up-to-speed with Azure services.

First, open up an account with Azure by visiting the Azure home page. The home page has a lot of resources to learn more about Azure solutions, products, documentation, pricing, training, marketplace, partners, support, blog, and more.

One of my favorite resources is to visit the get started guide for Azure developers page. It contains quickstarts, tutorials, samples, concepts, how-to guides, references, and other resources. I highly recommend downloading the sdk and building small apps. Nothing beats getting your hands dirty with code that calls Azure services. Currently Azure has SDKs in .NET, Node.js, Java, PHP, Python, Ruby, and Go.

Another resource that I use frequently is to read Azure applications hosted on Github. When I’m unable to come up with a solution, I search on Github for existing solutions.

Azure Friday is another great resource to learn more about Azure services and offerings. Scott Hanselman and company have created high-quality videos showing new features. On average, these videos are 15 minutes long.

A Cloud Guru has courses to help you get started with Azure. They have an introduction course and also courses that help you achieved certifications.

That’s it for this post. In future posts, I will target specific services and share my adventures learning Azure.

Categories
Azure Cloud

Azure Resource Group

AWS has been my cloud provider for many years. I have used it to host .NET applications, SQL Server databases, and other services like email, storage, queues. I have gained valuable experience in this platform but it’s time to play with Azure. In this post, I want to share how to create resource groups and their benefits.

First, let’s create a resource group. After you login to the Azure portal, click on Resource groups on the left menu. Now click on the Add button and enter a valid resource group name, select a subscription and location. For this example, I’m using dev-resource-group, pay-as-you-go, and South Central US to create my resource group.

A resource group is a container that hold resources like web sites, storage, databases in a group so we can manage them as a single unit. I like to think of resource groups as my dinner plate. I use a plate to hold my food (meat, vegetables, desert, etc) and once I’m done eating I can throw away the plate along with any food that is left.

Now let’s add a new app service. Click on App Services link on the left menu and click add. In the web apps section, select WordPress on Linux and click Create button. Enter required fields and make sure you select resource group created in the previous step.

Just to verify that our resource group is associated with our new wordpress site, click on Resource groups again and select the resource group. I see 3 items associated with my resource group: app service, azure database for mysql server, and app service plan.

Let’s create a new app service. Choose web app, create, and add all required fields. Make sure you select the same resource group from previous step. In the OS section, I select Docker and configure your container.

Now our resource group has a total of 4 items in it. These items belong to my dev environment and now I’m ready to delete this environment since I no longer need it. Select the resource group and click on the 3 dots and select delete resource group.

Type the resource group name and click on Delete button. After a few minutes, the 4 items associated with our resource group will be deleted along with our resource group. As you can see, resource groups allows us to group resources in a cohesive way so we can manage these resources in a better way. I have seen resource groups for different environments like dev, test, and production. Once you are done with your resources, just delete the resource group and it will save you a lot of time and effort.