Deploying Your Dockerized Angular App to Kubernetes

🚢 Blog 3: Deploying Your Dockerized Angular App to Kubernetes (Minikube on Windows)

Welcome to Part 3 of our DevOps with Angular & Minikube series! Now that our Angular app is containerized, it’s time to deploy it to a Kubernetes cluster using Minikube — all from your Windows machine (PowerShell or Git Bash, no Docker Desktop needed!).

🤔 What Do These Terms Mean and Why Use Them?

• Kubernetes (K8s): An open-source container orchestration platform that automates the deployment, scaling, and management of containerized applications.
  • Why? Manages complex applications with many containers, providing high availability and scalability.
• Deployment (Kubernetes Resource): A way to describe the desired state for your application's pods (e.g., how many copies, what image to use).
  • Why? Handles updates, rollbacks, and ensures a set number of app instances are always running.
• Service (Kubernetes Resource): A stable network entry point for a set of pods.
  • Why? Pods are dynamic; a Service provides a consistent way for other services or users to access your application.
• NodePort (Service Type): A type of Kubernetes Service that exposes your app on a specific port on every node in your cluster.
  • Why? Simple for local access in Minikube from your host machine.

🎯 What You'll Learn

• Write Kubernetes Deployment and Service YAMLs
• Deploy your Angular Docker image into Minikube
• Expose it using a NodePort service
• Access the app from your browser on Windows

🧾 Step 1: Write the Kubernetes Deployment YAML

Create a file called angular-deployment.yaml in your project root:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: angular-app-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      app: angular-app
  template:
    metadata:
      labels:
        app: angular-app
    spec:
      containers:
        - name: angular-container
          image: angular-app:latest
          imagePullPolicy: Never
          ports:
            - containerPort: 80

✅ imagePullPolicy: Never tells Kubernetes to use the local image that you built inside Minikube.

🌐 Step 2: Write the Service YAML

Create another file called angular-service.yaml:

apiVersion: v1
kind: Service
metadata:
  name: angular-app-service
spec:
  type: NodePort
  selector:
    app: angular-app
  ports:
    - port: 80
      targetPort: 80
      nodePort: 30080

📌 NodePort lets you access the app on your local network via a custom port.

⚙️ Step 3: Build the Docker Image Inside Minikube

If you try docker build normally, it builds on your host machine. But Minikube won’t see that image unless it's in its own Docker environment.

💡 On Windows, open PowerShell or Git Bash and run:

minikube docker-env

It will print environment variables. Then, apply them to your current shell:

For PowerShell:

& minikube -p minikube docker-env --shell powershell | Invoke-Expression

For Git Bash:

eval $(minikube docker-env)

Then build the Docker image:

docker build -t angular-app:latest .

⚠️ This builds the image inside Minikube, so Kubernetes can use it directly.

🚀 Step 4: Apply the Deployment & Service

Deploy both YAML files using kubectl:

kubectl apply -f angular-deployment.yaml
kubectl apply -f angular-service.yaml

Check the pod and service status:

kubectl get pods
kubectl get svc

🌍 Step 5: Access the Angular App in Browser (Windows)

Open the app using Minikube’s IP:

Get Minikube’s IP:

minikube ip

Visit in browser:

http://<minikube-ip>:30080

Or use this shortcut (opens browser automatically):

minikube service angular-app-service

🧪 Troubleshooting Tips

• ImagePullBackOff? → You likely didn’t build the image inside Minikube.
• Pending pods? → Check resources using kubectl describe pod <pod-name>.
• Wrong port? → Make sure you're using nodePort: 30080 and minikube ip.

✅ Recap

By now you’ve:

• Written Kubernetes manifests
• Deployed your Angular app to Minikube
• Accessed it via NodePort on Windows