Kubernetes Ingress does not accommodate CSS files for Visual Studio Generated ASP.NET MVC Hello World WebApp

Question

I'm following these instructions https://docs.microsoft.com/en-us/azure/aks/ingress-basic using Docker for Desktop/Kubernetes on Windows 10 again. The tutorial works great and now I want to enhance it by adding my C#/ASP.NETCore3 MVC WebApp called KubernetesHelloWorldASPNET (available on docker hub here). This is basically the template created by Visual Studio 2019 for a C# ASP.NET/MVC Core WebApp.

Here is the hello-world-ingress.yaml:

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: hello-world-ingress
  namespace: ingress-basic
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
  rules:
  - http:
      paths:
      - backend:
          serviceName: aks-helloworld-one
          servicePort: 80
        path: /hello-world-one(/|$)(.*)
      - backend:
          serviceName: aks-helloworld-two
          servicePort: 80
        path: /hello-world-two(/|$)(.*)
      - backend:
          serviceName: kuberneteshelloaspnet
          servicePort: 80
        path: /kuberneteshelloaspnet(/|$)(.*)
      - backend:
          serviceName: todolistclient
          servicePort: 80
        path: /todolistclient(/|$)(.*)
---
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: hello-world-ingress-static
  namespace: ingress-basic
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    nginx.ingress.kubernetes.io/rewrite-target: /static/$2
spec:
  rules:
  - http:
      paths:
      - backend:
          serviceName: aks-helloworld-one
          servicePort: 80
path: /static(/|$)(.*)

This is working with the above ingress tutorial in the sense that I can see the web page for KubernetesHelloWorldASPNET from the browser (http://localhost/kuberneteshelloaspnet) via ingress. However, it is not formatted properly. I believe the problem is that ingress is not allowing the browser to get the CSS and other static files generated by Visual Studio.

How can I make my little HelloWorld program display properly with the CSS?

The web page looks fine when run directly with Visual Studio (no docker, no kubernetes, no ingress).

Thu Sep 09 2020 Update

As per Matt's comments, I used the developer tools in the browser and confirmed that I'm getting 404 errors for for bootstrap.min.css, boostrap.bundle.min.js, site.js, jquery.min.js.

I found a similar post here. However, it looks like the solution precludes having ingress accommodate multiple web sites each having their own CSS and JS directories. They are creating rules for paths like "/css" and "/js" and that makes me think that all the applications must share the same css and js directories?

I'm following the tutorial and creating a path that has wild cards in it. So I have

path: /kuberneteshelloaspnet(/|$)(.*)

This should accommodate (in my example using docker for desktop kubernetes) http://localhost/kuberneteshelloaspnet/lib/jquery/dist/jquery.min.js -- correct? Well it does not seem to be working!

Now that developer tools network display in Chrome seems to indicate that the js and css files have only a file name and no path. But when click on "Inspect" I see the the HTML and the HTML is referencing child directories like "lib" and "css" and this is consistent with the Visual Studio generated project directory.

So apparently my ingress rules are allowing access to the home MVC controller at http://localhost:80/kuberneteshelloaspnet but is not allowing access to http://localhost:80/kuberneteshelloaspnet/lib/jquery/dist/jquery.min.js (for example).

How do I modify my ingress rules to accommodate these child directories of static files?

Sat Sep 12 2020 Update: Progess!

This version of hello-world-ingress.yaml works for a single web-app:

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: hello-world-ingress
  namespace: ingress-basic
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
spec:
  rules:
  - http:
      paths:
      - backend:
          serviceName: kuberneteshelloaspnet
          servicePort: 80
        path: /
---
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: hello-world-ingress-static
  namespace: ingress-basic
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
spec:
  rules:
  - http:
      paths:
      - backend:
          serviceName: kuberneteshelloaspnet
          servicePort: 80
        path: /lib(/|$)(.*)

It was just a guess and I don't know why it works. The web page seems to be working because it is formatted properly and I don't see any more 404 errors in the chrome developer tools panel.

1. Please help me understand the contents of this hello-world-ingress.yaml file. I was expecting to see kind: service and later kind: deployment and instead I just see kind: Ingress twice. Is this file defining a service or a deployment or both
2. Is it possible to enhance my solution so I host multiple web sites where each has a separate path and each has has separate sub-paths like /js and /css and /lib so each web site can have its own copy of (for example) jquery.min.js because they need different versions of jquery?
3. Among other things, I deleted the rewrite rules. When would I want to use rewrite rules? Could rewrite rules help me accommodate multiple web sites?

Fri Sep 18 2020: Progress? I may have found the solution of using the function UsePathBase in this blog. The symptoms described in this blog match mine. However, as I describe here, I cannot make this work! Calling the function UseBasePath seems to have no affect.

Thanks

Siegfried

Answer 1

I had been using the Microsoft Ingress Example that demonstrates the rewrite rule.

The problem with using the rewrite rule is that it does not accommodate multiple web-apps that have different copies of static files like jquery.min.js.

The solution for C#/VB.NET ASP.NET Core programmers is to use UseBasePath.

I wish the above tutorial/example would explain these different options and their perils and merits. Obviously UseBasePath won't work with java or python webapps (although there might be counterparts).

I did not realize that since the rewrite rule executes first to remove the root segment of the path, then there is nothing for the UseBasePath to remove and it seems to have no affect.

The solution is to remove the rewrite rule after having added a call to UseBasePath.

Answer 2

In chrome check what path is missing. Hit the URL in chrome developer mode(press F12) then you will be to find. Add that path & this will be resolved. I faced the same issue.