<p>I created a kubernetes cluster using <code>kubeadm</code>. Services are declared as <code>ClusterIP</code>. At the moment I'm trying to deploy my app as ingress of type <code>loadbalancer</code> 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</p>
<p>My Ingress source:</p>
<pre><code>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
</code></pre>
<p>My Deployment source:</p>
<pre><code>---
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
</code></pre>
<p>My Service source:</p>
<pre><code>---
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
</code></pre>
<p>The html file of the app:</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;title&gt;Epic Website - (⌐■_■)&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/lib/bootstrap/dist/css/bootstrap.min.css&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/site.css&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;header&gt;     
        &lt;nav class=&quot;navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3&quot;&gt;
            &lt;div class=&quot;container&quot;&gt;
                &lt;a class=&quot;navbar-brand&quot; href=&quot;/&quot;&gt;Home&lt;/a&gt;
                &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse&quot; aria-controls=&quot;navbarSupportedContent&quot;
                        aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
                    &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;div class=&quot;navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse&quot;&gt;
                    &lt;ul class=&quot;navbar-nav flex-grow-1&quot;&gt;
                        &lt;li class=&quot;nav-item&quot;&gt;
                            &lt;a class=&quot;navbar-brand&quot; href=&quot;/Home2&quot;&gt;Home2&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class=&quot;nav-item&quot;&gt;
                            &lt;a class=&quot;navbar-brand&quot; href=&quot;/Home/ItWorks&quot;&gt;Click me!&lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/nav&gt;
    &lt;/header&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;main role=&quot;main&quot; class=&quot;pb-3&quot;&gt;
                &lt;h2&gt;Want this taco?&lt;/h2&gt;
    &lt;pre&gt;
    {\__/}
    ( ●.●)
    ( &gt;🌮
    &lt;/pre&gt;
     
        &lt;/main&gt;
    &lt;/div&gt;

    &lt;footer class=&quot;border-top footer text-muted&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
            &amp;copy; 2020 - &lt;a href=&quot;/Home/Privacy&quot;&gt;Privacy&lt;/a&gt;
        &lt;/div&gt;   
    &lt;/footer&gt;
    &lt;script src=&quot;/lib/jquery/dist/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/lib/bootstrap/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/js/site.js?v=8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U&quot;&gt;&lt;/script&gt;
    
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>If I open up the console in browser I can see that there is <code>404 not found</code> on all elements of type <code>&lt;script&gt;</code>.</p>

<p>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 <code>css/site.css</code> file)  in the path <code>tasty.taco.com/css/site.css</code> and as Ingress Controller doesn't have definition for prefix <code>/css</code> in it's definition it is returning 404 error code.</p>
<p>The static content is available in the following path <code>tasty.taco.com/web1/css/site.css</code> - look that I used <code>web1</code> prefix so Ingress knows to which service re-direct this request.</p>
<p>Generally, using annotation <code>nginx.ingress.kubernetes.io/rewrite-target</code> in the apps that are requesting static content often causes issues like this.</p>
<p>Fix for this is <strong>not</strong> to use this annotation and add to your app possibility to setup base URL, in your example by using <a href="https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.builder.extensions.usepathbasemiddleware?view=aspnetcore-5.0" rel="nofollow noreferrer"><code> UsePathBaseMiddleware</code> class</a>.</p>
<blockquote>
<p>Represents a middleware that extracts the specified path base from request path and postpend it to the request path base.</p>
</blockquote>
<p>For detailed steps, I'd recommend following steps presented in <a href="https://stackoverflow.com/questions/56625822/asp-net-core-2-2-kubernetes-ingress-not-found-static-content-for-custom-path/57212033#57212033">this answer</a>.</p>
