Deploying an Angular Authentication App with Kubernetes

In this tutorial, we will deploy an Angular authentication app using Kubernetes. The deployment will include an Angular frontend, a Node.js backend for authentication, and a MongoDB database for user data. We will also use Kubernetes resources such as Deployments, Services, and Ingress to expose the app.

Prerequisites

Before starting, ensure you have the following:

• Docker installed
• Kubernetes (Minikube, Kind, or a cloud-based cluster like GKE, EKS, or AKS)
• kubectl configured
• Helm (optional, for easier package management)

Step 1: Build the Angular App

First, build your Angular authentication app:

ng build --prod

Next, create a Dockerfile for the Angular app:

FROM nginx:alpine
COPY dist/angular-auth-app /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build and push the image to Docker Hub or a container registry:

docker build -t myrepo/angular-auth-app .
docker push myrepo/angular-auth-app

Step 2: Build the Node.js Authentication API

Create a simple Node.js authentication API and a Dockerfile:

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

Build and push the image:

docker build -t myrepo/auth-api .
docker push myrepo/auth-api

Step 3: Create Kubernetes Deployments and Services

Create a k8s directory and add the following YAML files.

Angular Frontend Deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: angular-auth-app
spec:
  replicas: 2
  selector:
    matchLabels:
      app: angular-auth-app
  template:
    metadata:
      labels:
        app: angular-auth-app
    spec:
      containers:
        - name: angular-auth-app
          image: myrepo/angular-auth-app
          ports:
            - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: angular-auth-service
spec:
  type: ClusterIP
  selector:
    app: angular-auth-app
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80

Node.js Authentication API Deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: auth-api
spec:
  replicas: 2
  selector:
    matchLabels:
      app: auth-api
  template:
    metadata:
      labels:
        app: auth-api
    spec:
      containers:
        - name: auth-api
          image: myrepo/auth-api
          ports:
            - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: auth-api-service
spec:
  type: ClusterIP
  selector:
    app: auth-api
  ports:
    - protocol: TCP
      port: 3000
      targetPort: 3000

Step 4: Configure Ingress

If you use an Ingress controller (like Nginx Ingress), configure it as follows:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: auth-app-ingress
spec:
  rules:
    - host: myapp.local
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: angular-auth-service
                port:
                  number: 80
          - path: /api
            pathType: Prefix
            backend:
              service:
                name: auth-api-service
                port:
                  number: 3000

Apply the configuration:

kubectl apply -f k8s/

Step 5: Access the Application

If using Minikube, enable the Ingress controller:

minikube addons enable ingress

Then, add myapp.local to your /etc/hosts file, pointing to Minikube’s IP:

echo "$(minikube ip) myapp.local" | sudo tee -a /etc/hosts

Conclusion

You have successfully deployed an Angular authentication app with Kubernetes. This setup ensures scalability, resilience, and ease of management. You can further enhance security with TLS and integrate external authentication providers.

Happy coding!