Deploy Next.js React in Azure Kubernetes

Deploy Next.js React in Azure Kubernetes

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