Here is a simple step-by-step guide to setting up an empty Next.js React app in Azure Kubernetes. Don't forget to clean up afterward to avoid unnecessary billing. During my experiment, I had it running for 4 days, resulting in a $15 charge.
Prerequisites
Install Node.js and npm from https://nodejs.org. Verify it by running
node -v
andnpm -v
Install Azure CLI from https://docs.microsoft.com/en-us/cli/azure/install-azure-cli.
Verify it by running
az --version
Login by running
az login
Install Docker from https://www.docker.com/products/docker-desktop. Verify it by running
docker --version
Setup AKS (Azure Kubernetes Service)
Register the required providers
az provider register --namespace Microsoft.OperationsManagement
az provider register --namespace Microsoft.OperationalInsights
az provider register --namespace Microsoft.Insights
az provider register --namespace Microsoft.ContainerService
az provider register --namespace Microsoft.ContainerRegistry
Verify them as registered
az provider show -n Microsoft.OperationsManagement -o table
az provider show -n Microsoft.OperationalInsights -o table
az provider show -n Microsoft.Insights -o table
az provider show -n Microsoft.ContainerService -o table
az provider show -n Microsoft.ContainerRegistry -o table
Create a resource group
az group create --name myResourceGroup --location southeastasia
where location can be chosen from this list
az account list-location -o table
Create an AKS cluster (takes a few minutes)
az aks create -g myResourceGroup -n myAKSCluster --enable-managed-identity --node-count 1 --enable-addons monitoring --generate-ssh-keys
More details at https://docs.microsoft.com/en-us/azure/aks/kubernetes-walkthrough
Install kubectl to interact with AKS by running
az aks install-cli
Configure kubectl to connect to the Kubernetes cluster
az aks get-credentials --resource-group myResourceGroup --name myAKSCluster
Verify the connection by running
kubectl get nodes
Step 1: Create a Next.js app
Install using create-next-app https://nextjs.org/docs/getting-started/installation
npx create-next-app@latest
Run the app
npm run dev
and use a browser to openhttp://localhost:3000
And in case you need to stop it later, press Ctrl+CTo modify the page content, edit the
src/app.page.tsx
. The page in the browser will be automatically hot-reloaded every time you save your changes.
Step 2: Dockerize the Next.js app
Create a new file named
Dockerfile
in your project folder# Use one the official Node.js image as a base image # https://snyk.io/blog/choosing-the-best-node-js-docker-image/ FROM node:20.5.0-bullseye-slim # Set the working directory inside the container WORKDIR /src/app # Copy the package.json and package-lock.json files to the container COPY package*.json ./ # Install app dependencies RUN npm install # Copy the rest of the application code to the container COPY . . # Build the Next.js app RUN npm run build # Expose the port that Next.js uses at runtime EXPOSE 3000 # Start the Next.js app CMD ["npm", "start"]
Run the Docker Desktop or daemon on your local machine
Build the Docker image
docker build -t my-nextjs-app .
(note the dot at the end)
See also: https://snyk.io/blog/10-best-practices-to-containerize-nodejs-web-applications-with-docker/
Step 3: Push the Docker image to ACR
Login to Azure using
az login
Create ACR (Azure Container Registry)
az acr create --resource-group myResourceGroup --name myhandsonprojectacr --sku Basic
Login to ACR
az acr login --name myhandsonprojectacr
Tag the Docker image with ACR's login server
docker tag my-nextjs-app myhandsonprojectacr.azurecr.io/my-nextjs-app:v1
Push the Docker image to ACR
docker push myhandsonprojectacr.azurecr.io/my-nextjs-app:v1
Step 4: Deploy the Next.js app in AKS
Grant AKS access to the ACR
az aks update --resource-group myResourceGroup --name myAKSCluster --attach-acr
Create a Kubernetes deployment YAML file,
e.g.my-nextjs-app-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: my-nextjs-app-deployment
spec:
replicas: 2 # You can adjust the number of replicas as needed
selector:
matchLabels:
app: my-nextjs-app
template:
metadata:
labels:
app: my-nextjs-app
spec:
containers:
- name: my-nextjs-app
image: myhandsonprojectacr.azurecr.io/my-nextjs-app:v1
ports:
- containerPort: 3000
Apply the Kubernetes deployment
kubectl apply -f my-nextjs-app-deployment.yaml
Expose the deployment as a Kubernetes service
kubectl expose deployment my-nextjs-app-deployment --type=LoadBalancer --port=80 --target-port=3000
Wait for the external IP to be assigned to the server. Verify by running these
kubectl get svc my-nextjs-app-deployment
kubectl describe svc my-nextjs-app-deployment
kubectl get pods
Open your web browser and type the external IP into the address bar
Clean up!
Delete kubernetes deployment
kubectl delete deployment my-nextjs-app-deployment
kubectl delete service my-nextjs-app-deployment
Delete AKS cluster
az aks delete --resource-group myResourceGroup --name myAKSCluster --yes --no-wait
Delete ACR
az acr delete --name myhandsonprojectacr --resource-group myResourceGroup --yes
Verify
az aks list
az acr list