Deploy a Full Stack Web App to Azure Kubernetes Service with Docker
A quick walkthrough of the AKS workflow.
Introduction
This hands-on tutorial will walk you through the process of getting a full-stack application up and running on AKS. Our sample calculator app has a separated React frontend and Flask backend. Both of them are built into a Docker image and pushed to Docker Hub.
What we will cover:
- Azure Kubernetes Service
- NGINX Ingress Controller
- Docker Container
- Azure CLI
- Kubectl, Helm
- React frontend, Flask backend
Overview
We will create two Kubernetes deployments, one for the React frontend and the other for the Flask API. Two Kubernetes services will also be created for us to access the deployed application.
After having both frontend and backend running on Kubernetes cluster, we create an ingress resource to route traffic to each application. By using an ingress controller and ingress rules, a single IP address can be used to route traffic to multiple services in a Kubernetes cluster.
Getting Started
Create AKS Cluster
The first thing we have to do is create an AKS cluster. After creating a resource group in your preferred region, we can create an AKS cluster with a similar method. Personally, I like to create it with the UI, which is a pretty straightforward approach with the friendly Azure Portal Interface. Or you can also create it with Azure CLI following the Microsoft Docs.
Connect to Cluster
We use kubectl to manage the Kubernetes cluster. Run the command below in Azure CLI (red box) to configure kubectl and connect to the cluster we previously created.
az aks get-credentials --resource-group myResourceGroup --name myAKSCluster
Create an NGINX Ingress Controller
# Create a K8s namespace for the ingress resources
kubectl create namespace ingress-basic# Add the ingress-nginx repository
helm repo add ingress-nginx https://kubernetes.github.io/ingress-nginx # Use Helm to deploy an NGINX ingress controller
helm install nginx-ingress ingress-nginx/ingress-nginx \
--namespace ingress-basic \
--set controller.replicaCount=2 \
--set controller.nodeSelector."beta\.kubernetes\.io/os"=linux \
--set defaultBackend.nodeSelector."beta\.kubernetes\.io/os"=linux
Run the Application
Application is deployed by applying a YAML file to the cluster. The two deployments and each corresponding service are created using the YAML file below.
In this example, we create this file by typing code calculator.yaml on Azure CLI. Paste the manifest below and save it. Please note that on line 17 and line 54, we are pulling the prebuilt image from Docker Hub. Feel free to use your own image.
Run the frontend and backend in the namespace we created using kubectl apply
kubectl apply -f calculator.yaml --namespace ingress-basic
Create an Ingress Route
Both the frontend and backend are now running on the Kubernetes Cluster. Now we create an ingress resource to configure the rules that route traffic to our website and API. This resource can also be created with Azure CLI, just like what we did for the calculator.yaml
code ingress.yamlThe most important part of this file is from line 15 ~ 22. We route the traffic from the root URL to our website service. Similarly, we route the traffic from /api to our API service.
Create the ingress resource
kubectl apply -f ingress.yamlTry it!
The Kubernetes load balancer service is created for the NGINX ingress controller, we can access our app with the assigned dynamic public IP address.
kubectl --namespace ingress-basic get services -o wide -w nginx-ingress-ingress-nginx-controllerOpen up your browser and go to the EXTERNAL-IP (red box).
We can reach the calculator UI because our traffic is routed from the root URL to the website page by NGINX ingress controller.
Once we press the calculate button, it will send a HTTP POST request to /api. Similarly, the traffic to /apiis routed to the API service by the NGINX ingress controller. The answer is calculated by the backend API. Responded answer is taken by the frontend website and used to generate a pop up on the site. Cheers!
