How to Fix NGINX Ingress 404/503 Errors for Static Files in a Path-Based Routing Setup?

General Discussions
1

How to Fix NGINX Ingress 404/503 Errors for Static Files in a Path-Based Routing Setup?

I am using an NGINX Ingress Controller in Kubernetes to route traffic to a frontend service deployed on my cluster. The application uses path-based routing with static files like favicon.ico, CSS, JS, and other assets located under a specific path.

Despite setting up the Ingress, I am encountering the following issues:

  1. 404 Not Found for static assets like favicon.ico and _next/static/*.
  2. 503 Service Temporarily Unavailable for specific paths, indicating that Ingress cannot properly forward requests to the backend.

Below are the detailed configurations and errors I’ve encountered.
ingress configuration

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: frontend-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    nginx.ingress.kubernetes.io/force-ssl-redirect: "false"
spec:
  rules:
  - host: apitest.bahram-tech.com
    http:
      paths:
        - path: /prod/gsp-frontend/v1.0(/|$)(.*)
          pathType: Prefix
          backend:
            service:
              name: gsp-frontend
              port:
                number: 80
        - path: /favicon.ico
          pathType: Exact
          backend:
            service:
              name: gsp-frontend
              port:
                number: 80
        - path: /_next/static/*
          pathType: Prefix
          backend:
            service:
              name: gsp-frontend
              port:
                number: 80

service config

apiVersion: v1
kind: Service
metadata:
  name: gsp-frontend
spec:
  selector:
    app: gsp-frontend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80

Deployment config

apiVersion: apps/v1
kind: Deployment
metadata:
  name: gsp-frontend
spec:
  replicas: 2
  selector:
    matchLabels:
      app: gsp-frontend
  template:
    metadata:
      labels:
        app: gsp-frontend
    spec:
      containers:
        - name: gsp-frontend
          image: myregistry/frontend:latest
          ports:
            - containerPort: 80

404 Not Found for Static Assets

GET https://apitest.bahram-tech.com/prod/gsp-frontend/v1.0/favicon.ico 404 Not Found

NGINX seems unable to properly route requests to static files in /prod/gsp-frontend/v1.0.
503 Service Temporarily Unavailable

GET https://apitest.bahram-tech.com/_next/static/media/04a7bf91ce447e64-s.p.woff2 503 Service Temporarily Unavailable

Requests to static files under _next/static/* fail with a 503.
What I Have Tried

  1. Verified that the backend service gsp-frontend is running and healthy
kubectl get svc gsp-frontend
kubectl get pods -l app=gsp-frontend

2- The service is reachable, and pods are running.
Added rewrite-target: /$2 to rewrite paths correctly, but the issue persists.
Explicitly defined paths like /favicon.ico and _next/static/* in the Ingress configuration.
Checked the NGINX logs for the Ingress controller:

kubectl logs -l app.kubernetes.io/name=ingress-nginx -n ingress-nginx

Found 404 and 503 errors for the mentioned paths.
Updated the basePath for the frontend application:
Next.js

module.exports = {
  basePath: '/prod/gsp-frontend/v1.0',
};

Environment cluster Details:
Kubernetes Version: 1.30
NGINX Ingress Controller Version: 1.7.0
Frontend Framework: Next.js with _next/static directory.
Frontend Image: myregistry/frontend:latest.

How can I properly configure the NGINX Ingress to handle path-based routing for static assets like favicon.ico and _next/static/*?
Is there a better way to rewrite or handle these specific routes in NGINX Ingress for such nested paths?
Are there any use subdomain base for all frontend project and only backend use path base ?
Are there any known issues or additional configurations required for Next.js or similar frameworks with NGINX Ingress?
Thanks a lot for any guide and help :blush: