How to connect Angular frontend with Node.js backend on Kubernetes

Frontend
1

I’m working with a local minikube environment and have multiple services deployed. I need assistance in connecting my Angular frontend service to my Node.js backend service.

Here’s the current setup:

  • The Angular application is hosted in its own service.
  • The Node.js backend is also in a separate service and connects to a MongoDB service via DNS.
  • Both services exist within the same Kubernetes cluster.

The challenge: My frontend application cannot resolve the backend service name through DNS. When making API calls, it doesn’t know how to locate the backend service.

Currently, the only workaround is to set the backend service to NodePort and manually specify the URL and port in the frontend configuration. This approach seems inefficient and unscalable.

I am aware that in a production scenario with a LoadBalancer service type, an external IP is assigned, but I would still face the challenge of having to rebuild the frontend image if the backend URL changes.

Backend service configuration:

apiVersion: v1
kind: Service
metadata:
  name: backend
  labels:
    app: some-app
    tier: backend
spec:
  type: NodePort
  ports:
  - port: 3000
  selector:
    app: some-app
    tier: backend

When attempting to access the backend using its fully qualified name, I receive the following error:

OPTIONS http://backend.default.svc.cluster.local:3000/signup/ net::ERR_NAME_NOT_RESOLVED

What’s the best way to manage communication between the frontend and backend services in Kubernetes without resorting to hardcoded URLs?

2

Interesting setup! You might be mixing up where DNS resolution happens. Your browser can’t hit cluster DNS directly - that’s why you’re getting the error. Have you tried using environment variables during the Angular build to inject the backend URL dynamically? What’s your deployment strategy? Are you building the Angular app at runtime or build time?

3

your browser can’t resolve k8s dns names directly. set up an ingress with path-based routing - /api hits the backend, / hits the frontend. or proxy requests through your angular service to the backend using internal dns. that way only pods need to resolve the backend service, not your browser.

4

You’re encountering a common networking issue in Kubernetes. DNS resolution occurs only between pods, not from external browsers. To resolve this, implement a reverse proxy using an ingress controller or nginx to direct requests based on URL paths. You can configure your setup to route all /api/* requests to your Node.js backend while serving static files from your Angular frontend. In your Angular application, utilize a relative path for the API base URL. This approach mitigates the need for hardcoded URLs and enhances scalability, eliminating the need to rebuild images when backend endpoints change.