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

1. Install Node.js and npm from https://nodejs.org. Verify it by running node -v and npm -v

2. 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

3. Install Docker from https://www.docker.com/products/docker-desktop. Verify it by running docker --version

4. 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

5. 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

1. Install using create-next-app https://nextjs.org/docs/getting-started/installation
   npx create-next-app@latest

2. Run the app npm run dev and use a browser to open http://localhost:3000
   And in case you need to stop it later, press Ctrl+C

3. To 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

1. 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"]
   

2. Run the Docker Desktop or daemon on your local machine

3. 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

1. Login to Azure using az login

2. Create ACR (Azure Container Registry)
   az acr create --resource-group myResourceGroup --name myhandsonprojectacr --sku Basic

3. Login to ACR

   az acr login --name myhandsonprojectacr

4. Tag the Docker image with ACR's login server
   docker tag my-nextjs-app myhandsonprojectacr.azurecr.io/my-nextjs-app:v1

5. Push the Docker image to ACR
   docker push myhandsonprojectacr.azurecr.io/my-nextjs-app:v1

Step 4: Deploy the Next.js app in AKS

1. Grant AKS access to the ACR
   az aks update --resource-group myResourceGroup --name myAKSCluster --attach-acr

2. 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

1. Apply the Kubernetes deployment
   kubectl apply -f my-nextjs-app-deployment.yaml

2. Expose the deployment as a Kubernetes service
   kubectl expose deployment my-nextjs-app-deployment --type=LoadBalancer --port=80 --target-port=3000

3. 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

4. Open your web browser and type the external IP into the address bar

Clean up!

1. Delete kubernetes deployment
   kubectl delete deployment my-nextjs-app-deployment
kubectl delete service my-nextjs-app-deployment

2. Delete AKS cluster
   az aks delete --resource-group myResourceGroup --name myAKSCluster --yes --no-wait

3. Delete ACR
   az acr delete --name myhandsonprojectacr --resource-group myResourceGroup --yes

4. Verify

   az aks list
az acr list