Azure — Deploying React App With .NET Web API on AKS

A step by step guide with an example project

Bhargav Bachina
Mar 11 · 8 min read

AKS is Microsoft Azure’s managed Kubernetes solution that lets you run and manage containerized applications in the cloud. Since this is a managed Kubernetes service, Microsoft takes care of a lot of things for us such as security, maintenance, scalability, and monitoring. This makes us quickly deploy our applications into the Kubernetes cluster without worrying about the underlying details of building it.

In this post, we are going to deploy a React application with a .NET web API. First, we dockerize our app and push that image to the Azure container registry and run that app on Azure AKS. We will see how we can build the Kubernetes cluster on Azure AKS, Accessing clusters from outside, configuring kubectl to work with the AKS cluster, and many more.

  • Example Project
  • Prerequisites
  • Install Azure CLI and Configure
  • Dockerize the Project
  • Pushing Docker Image To Container Registry
  • Creating AKS Cluster
  • Configure Kuebctl With AKS Cluster
  • Deploy Kubernetes Objects On Azure AKS Cluster
  • Access the WebApp from the browser
  • Summary
  • Conclusion

Example Project

This is a simple project which demonstrates developing and running a React application with the .NET. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.

Example Project

If you want to practice your own here is a Github link to this project. You can clone it and run it on your machine as well.

// clone the project
git clone https://github.com/bbachi/react-dotnet-example.git
// run the project
cd react-dotnet-example
dotnet run

Prerequisites

  • If you are not familiar with the process or you want to know before studying this guide, I would recommend you going through it.

How To Develop and Build React App With .NET Core Backend

The other prerequisites to this post are Docker essentials and Kubernests essentials. We are not going to discuss the basics such as what is a container or what is Kubernetes, rather, we will see how to build a Kubernetes cluster on Azure AKS. Below are the prerequisites you should know before going through this article

You need to understand Docker concepts such as creating images, container management, etc. Below are some of the links that you can understand about Docker if you are new.

You need to understand Kubernetes’ essentials as well along with Docker essentials. Here are some of the docs to help you understand the concepts of Kubernetes.

You should have a Microsoft Azure Account. You can get a free account for one year. You should see the below screen after you login.

Azure Home Screen

You need to create a subscription for your account. The most common is Pay As You Go subscription.

Subscription Offers
Pay-As-You-Go Subscription

You need a subscription to be associated with your tenant so that all the cost is billed to this subscription.

Install Azure CLI and Configure

Once you have the Azure Account you can install Azure CLI. You can go to the below documentation and install Azure CLI based on your operation system. You can configure Azure CLI with your subscription.

az login

Let’s list the subscription with the following command

az account list

Dockerize the Project

Azure AKS is a managed service that makes it easy for you to run Kubernetes on Azure. The first thing you need to do is to dockerize your project.

Here is the Dockerfile and it is using multi-stage builds to reduce the image size and surface attacks.

Dockerfile

Here are the commands to build the image and run it on the Docker engine on your local machine. If you are new to Docker and check this detailed post on this topic.

// build the image
docker build -t react-dotnet-img .
// run the image
docker run -d -p 5000:80 --name react-dotnet-ui react-dotnet-img
// list the image you just built
docker images
// list the container
docker ps

Pushing Docker Image To Container Registry

Azure AKS works with any Docker registry such as Docker Hub, etc. But, in this post, we see how we can use the Azure container registry to store our Docker images. Once you set up the Azure portal account and creates a resource group as above you can create a container registry as below.

Creating Container Registry

Once you review and create you can see the following screen.

deployment is completed

You can see the main container registry page below.

container registry created

You can do the same things with the Azure CLI with the following commands. Make sure you log in to your Azure Account with CLI with this command az login before running the below commands.

// create a resource group
az group create --name k8s-demo --location westus
// create a container registry
az acr create --resource-group k8s-demo \
--name registryfrontend --sku Basic

It’s time to build and push the Docker image with the following command. Clone the above example project and go to the root folder where Dockerfile resides and run this command.

az acr build --image aksdemo/react-dotnet:v1 \
--registry registryfrontend \
--file Dockerfile .
Docker Image Upload

You can see all the details in the portal as well.

Repository Details
docker pull command

If you want to pull this repository you need to use this command.

docker pull registryfrontend.azurecr.io/aksdemo/react-dotnet:v1

Creating AKS Cluster

First, you need a resource group for all your resources. Let’s create a resource with the following command.

az group create --name k8s-demo --location westus

Let’s create a cluster with the following command. Notice that we are using the same resource group that we created above. You can see the JSON formatted result after a few minutes.

az aks create --resource-group k8s-demo --name frontend-cluster --node-count 3 --enable-addons monitoring --generate-ssh-keys

You can see the following cluster in the console.

frontend-cluster created

Configure Kuebctl With AKS Cluster

Kubectl is the command-line utility for the Kubernetes. You need to install kubectl before you configure it. Run the first command only if you don’t have kubectl on your local machine.

// install CLI
az aks install-cli
// connect to your cluster
az aks get-credentials --resource-group k8s-demo --name frontend-cluster
// get all the contexts
kubectl config get-contexts
// verify the current context
kubectl config current-context
// get the node
kubectl get nodes
Configure kubectl with AKS Cluster

Deploy Kubernetes Objects on Azure AKS Cluster

Now we have configured kubectl to use Azure AKS from our own machine. You need to integrate the container registry with the AKS. Let’s attach the container registry with the cluster with the following command. You can explore the docs here regarding this.

az aks update -n frontend-cluster -g k8s-demo --attach-acr registryfrontend

Let’s create deployment and service objects and use the image from the Azure container registry. Here is the manifest file which contains these objects.

manifest.yml

If you cloned the above example project and you are at the root folder just use this command to create objects kubectl create -f manifest.yml

K8s objects created

You can use the following commands to verify all the objects are in the desired state.

// list the deployment
kubectl get deploy
// list the pods
kubectl get po
// list the service
kubectl get svc

We can see 5 pods running since we have defined 10 replicas for the deployment.

Kubernetes Objects Running on Azure AKS

Access the WebApp from the browser

We have created a service with the LoadBalancer type. You can get the external IP from the service and access the entire from the browser.

External Load Balancer

You can access the web app with the following URL

http://13.91.21.8
Accessing from the browser

Delete the Cluster

You can just delete the cluster or the resource group. I created a resource group just for this so I am deleting the resource group with the following command. Make sure you delete if you don’t want to incur charges.

az group delete --name k8s-demo

Summary

  • AKS is Microsoft Azure’s managed Kubernetes solution that lets you run and manage containerized applications in the cloud.
  • Before starting this, you need to have docker and Kubernetes essentials. If you don’t have these essentials please go through these with the links provided.
  • You need to create a Microsoft Azure Account here.
  • You need a subscription to be associated with your tenant so that all the cost is billed to this subscription.
  • You can create the AKS cluster through a portal, Azure CLI, REST API as well.
  • You can install Azure CLI and configure it to use with your AKS Cluster.
  • Configure kubectl to use the AKS cluster.
  • Create a deployment and service with Loadbalancer so that you can access it from outside.
  • You can access the dashboard with either Kubeconfig or Token.
  • Make sure you delete if you don’t want to incur charges.

Conclusion

We have deployed a simple React application with .NET Core web API on Azure AKS Cluster and access it from the browser. In future posts, we can see more advanced use cases.

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never…

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store