Azure — Deploying React App With .NET Web API on AKS
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
- 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
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.
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
- If you are not familiar with the process or you want to know before studying this guide, I would recommend you going through it.
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.
- Docker Docs
- Docker — A Beginner’s guide to Dockerfile with a sample project
- Docker — Image creation and Management
- Docker — Container Management With Examples
- Understanding Docker Volumes with an example
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.
Microsoft Azure Account
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.
You need to create a subscription for your account. The most common is 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.
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.
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
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.
Once you review and create you can see the following screen.
You can see the main container registry page below.
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 .
You can see all the details in the portal as well.
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.
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
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.
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
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.
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.
You can access the web app with the following URL
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
- 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.
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.