Kubernetes ingress css and jv not found

Question

I created a kubernetes cluster using kubeadm. Services are declared as ClusterIP. At the moment I'm trying to deploy my app as ingress of type loadbalancer with Metallb but I faced some problems. If I deploy my app as ingress some jv and css components are not found. There was no problem running the application as a service but the problem appeared while I used Ingress. It is an ASP.NET Core application

My Ingress source:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
  name: taco-ingress
spec:
  rules:
   - host: tasty.taco.com
     http:
       paths:
       - path: /web1
         pathType: Prefix
         backend:
           service:
             name: web1
             port:
               number: 80
       - path: /web2
         pathType: Prefix
         backend:
           service:
             name: web2
             port:
               number: 80

My Deployment source:

---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: web1
  labels:
    app: taco
    taco: web1
spec:
  replicas: 2
  selector:
    matchLabels:
      app: taco
      task: web1
  template:
    metadata:
      labels:
        app: taco
        task: web1
        version: v0.0.1
    spec:
      containers:
      - name: taco
        image: yatesu0x00/webapplication1:ingress-v1
        ports:
        - containerPort: 80
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: web2
  labels:
    app: taco
    taco: web2
spec:
  replicas: 2
  selector:
    matchLabels:
      app: taco
      task: web2
  template:
    metadata:
      labels:
        app: taco
        task: web2
        version: v0.0.1
    spec:
      containers:
      - name: taco
        image: yatesu0x00/webapplication2:ingress-v1
        ports:
        - containerPort: 80

My Service source:

---
apiVersion: v1
kind: Service
metadata:
  name: web1
spec:
  ports:
  - targetPort: 80
    port: 80
  selector:
    app: taco
    task: web1
---
apiVersion: v1
kind: Service
metadata:
  name: web2
spec:
  ports:
  - targetPort: 80
    port: 80
  selector:
    app: taco
    task: web2

The html file of the app:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Epic Website - (⌐■_■)</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
</head>
<body>
    <header>     
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" href="/">Home</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="navbar-brand" href="/Home2">Home2</a>
                        </li>
                        <li class="nav-item">
                            <a class="navbar-brand" href="/Home/ItWorks">Click me!</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
                <h2>Want this taco?</h2>
    <pre>
    {\__/}
    ( ●.●)
    ( >
    </pre>
     
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - <a href="/Home/Privacy">Privacy</a>
        </div>   
    </footer>
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
    <script src="/js/site.js?v=8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U"></script>
    
</body>
</html>

If I open up the console in browser I can see that there is 404 not found on all elements of type <script>.

Could you please make [your issue reproducible](https://stackoverflow.com/help/how-to-ask) by editing and adding following information to your question: `yaml` definition files of your services and deployments, information about how did you setup your Kubernetes cluster - `kubeadm`,`minikube` or other solution? — Mikolaj S., Aug 24 '21 at 12:49
Hello Mikolaj I edited my post and added the missing informations — Yatesu, Aug 24 '21 at 13:02

score 2 · Answer 1 · answered Sep 01 '21 at 15:30

If you look closer in the logs, you can find that the cause of your problem is that your app is requesting static content (example for css/site.css file) in the path tasty.taco.com/css/site.css and as Ingress Controller doesn't have definition for prefix /css in it's definition it is returning 404 error code.

The static content is available in the following path tasty.taco.com/web1/css/site.css - look that I used web1 prefix so Ingress knows to which service re-direct this request.

Generally, using annotation nginx.ingress.kubernetes.io/rewrite-target in the apps that are requesting static content often causes issues like this.

Fix for this is not to use this annotation and add to your app possibility to setup base URL, in your example by using UsePathBaseMiddleware class.

Represents a middleware that extracts the specified path base from request path and postpend it to the request path base.

For detailed steps, I'd recommend following steps presented in this answer.

Kubernetes ingress css and jv not found

1 Answers1