This guide covers the steps to build, push, and deploy a React application to Azure Kubernetes Service (AKS) using the CLI.
- Azure CLI installed and logged in
- Azure Kubernetes Service (AKS) and Azure Container Registry (ACR) set up
- Docker installed
- kubectl installed
- NodeJS installed
Reference - AKS
Before building the Docker image, make sure that the environment variables in your Dockerfile are up to date. These variables are critical for your application to interact with Azure services like Cosmos DB, Blob Storage, and MongoDB.
To build the Docker image, use the following command:
docker build -t <ACR_NAME>.azurecr.io/aistudy/frontend:latest .Before pushing the Docker image to ACR, you need to log in using your ACR credentials:
-
Retrieve ACR credentials:
az acr credential show --name <ACR_NAME>
-
Log in to ACR:
docker login <ACR_NAME>.azurecr.io
Push the Docker image to your ACR:
docker push <YOUR_ACR_NAME>.azurecr.io/aistudy/frontend:latestIf you want to test the Docker image locally, use the following commands:
docker run -p 80:80 <YOUR_ACR_NAME>.azurecr.io/aistudy/frontend:latestYou can access the application at http://localhost.
Update Variables in frontend-deployment.yml
Before run the Docker image in K8S, make sure that the environment variables in your frontend-deployment.yml are up to date. These variables are critical for your application to interact with Azure services like ACR_NAME, MIDDLEWARE_SERVICE_BASE_URL, APP_CLIENT_ID, CONTENT_GENERATOR_ENDPOINT, MIDDLEWARE_SERVICE_ACCESS_KEY and AZURE_KEYVAULT_URI (refer env).
First, apply the Kubernetes deployment using the following command:
kubectl apply -f frontend-deployment.ymlTo deploy the application to AKS, ensure your kubectl is connected to your AKS cluster, then apply the deployment:
- Log in to Azure
Log in to your Azure account using the Azure CLI:
az login
- AKS Login
az aks get-credentials --resource-group <YOUR_RESOURCE_GROUP> --name <AKS_NAME>
kubectl apply -f frontend-deployment.ymlThis will deploy your application to the AKS cluster.