Expose Your Angular App with Ingress

🌐 Blog 4: Expose Your Angular App with Ingress (Clean URLs on Minikube)

Welcome to Part 4 of our 7-part DevOps series! In this blog, you'll learn how to expose your Angular app running inside Minikube using Ingress — enabling clean, user-friendly URLs like:

http://myapp.local

Instead of: http://192.168.49.2:30080

🤔 What Does This Term Mean and Why Use It?

• Ingress (Kubernetes Resource): A Kubernetes object that manages external access to services within a cluster, typically HTTP/S. It provides HTTP routing based on hostnames and paths, SSL termination, and load balancing.
  • Why? While NodePort exposes your app on a specific port, Ingress allows you to route traffic to multiple services based on URL paths or hostnames, providing clean URLs and often handling SSL/TLS. It's essential for production-like environments where you want user-friendly access and centralized traffic management.

🎯 What You'll Learn

• What Ingress is and why it's useful
• How to enable and configure Ingress in Minikube
• How to map a custom domain (myapp.local) using the hosts file on Windows
• Access your app without ports or IPs

🛠️ Prerequisites

❌ Docker Desktop is not required. ✅ Use PowerShell (Admin) or Git Bash for commands.

⚙️ Step 1: Enable Ingress in Minikube

Run this in PowerShell (as Admin) or Git Bash:

minikube addons enable ingress

Verify it’s running:

kubectl get pods -n ingress-nginx

Look for a pod named like ingress-nginx-controller and confirm it's Running.

📄 Step 2: Create an Ingress YAML File

Create a file named angular-ingress.yaml:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: angular-app-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
    - host: myapp.local
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: angular-app-service
                port:
                  number: 80

Make sure the service.name matches the Kubernetes Service for your Angular app.

Apply the ingress configuration:

kubectl apply -f angular-ingress.yaml

🖥️ Step 3: Map Domain in Windows hosts File

To use http://myapp.local in your browser, map it to Minikube’s IP.

Get Minikube's IP:

minikube ip

Let’s say it returns 192.168.49.2.

Edit hosts file as Administrator: Open Notepad as Admin Open file: C:\Windows\System32\drivers\etc\hosts Add this line at the end:

192.168.49.2   myapp.local

Save the file.

🌐 Step 4: Access the App

Now, open your browser and go to:

http://myapp.local

🎉 You should see your Angular app — no port, no IP, just a clean domain!

🧪 Troubleshooting

✅ Recap

You’ve now:

• Enabled Ingress on Minikube
• Created an Ingress rule for your Angular app
• Used the Windows hosts file to create a clean domain
• Accessed the app via http://myapp.local