<p>Created an Ingress for my react application hosted in nginx docker container.</p>
<p>Ingress config</p>
<pre><code>apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: my-ingress
  labels:
    helm.sh/chart: home-service
    app.kubernetes.io/name: home-service
    app.kubernetes.io/instance: xrayed-vulture
    app.kubernetes.io/version: &quot;1.0.0&quot;
    app.kubernetes.io/managed-by: Tiller
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
    - host: &quot;home-service.net&quot;
      http:
        paths:
          - path: &quot;/pmr&quot;
            backend:
              serviceName: my-service
              servicePort: 8089

</code></pre>
<p>Service</p>
<pre><code>apiVersion: v1
kind: Service
metadata:
  name: my-service
  labels:
    helm.sh/chart: home-service
    app.kubernetes.io/name: home-service
    app.kubernetes.io/instance: xrayed-vulture
    app.kubernetes.io/version: &quot;1.0.0&quot;
    app.kubernetes.io/managed-by: Tiller
spec:
  type: ClusterIP
  ports:
    - port: 8089
      targetPort: 8089
      protocol: TCP
      name: http
    - port: 443
      targetPort: https
      protocol: TCP
      name: https
  selector:
    app.kubernetes.io/name: pmr-ui-app

</code></pre>
<p>Nginx <code>/etc/nginx/conf.d/default.conf</code> config in my react-app which is hosted in nginx:stable-alpine container.</p>
<pre><code>server {
        listen 8089;
        listen 443 default ssl;
        server_name localhost;

        root   /usr/share/nginx/html;

        ssl_certificate /etc/nginx/certs/nginx.crt;
        ssl_certificate_key /etc/nginx/certs/nginx.key;
        ssl_protocols        SSLv3 TLSv1;
        ssl_ciphers          HIGH:!aNULL:!MD5;

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri /index.html;
        }

        error_page 404 /404.html;

        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }

        access_log /var/log/nginx/access.log main;
        error_log   /var/log/nginx/error.log  warn;
}
</code></pre>
<p>Making a curl call to the blow address, the ingress works fine and return the right page</p>
<pre><code>curl -v http://home-service.net/pmr


message from my nginx controller container
10.251.128.1 - - [02/Sep/2020:16:33:30 +0000] &quot;GET /pmr HTTP/1.1&quot; 200 3009 &quot;-&quot; &quot;curl/7.64.0&quot; 103 0.002 [nc-my-service-8089] [] 10.x.x.26:8089 3009 0.000 200 e2407a01ffcf7607b958522574979b29

message from the react app container itself
10.x.x.27 - - [02/Sep/2020:16:33:30 +0000] &quot;GET /pmr HTTP/1.1&quot; 200 3009 &quot;-&quot; &quot;curl/7.64.0&quot; &quot;10.251.128.1&quot;

</code></pre>
<p>But visiting the browser, i see 404 for loading some .js, and css files</p>
<p>Chrome with <code>http://home-service.net/pmr</code></p>
<pre><code>Nginx controller logs
10.x.x.198 - - [02/Sep/2020:14:45:36 +0000] &quot;GET /pmr HTTP/1.1&quot; 304 0 &quot;-&quot; &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36&quot; 611 0.001 [nc-my-service-8089] [] 10.x.x.26:8089 0 0.000 304 f994cdb21f962002e73ce6d967f82550

10.x.x.200 - - [02/Sep/2020:14:51:11 +0000] &quot;GET /wf-bridge/wf-bridge/wf-bridge.esm.js HTTP/1.1&quot; 404 21 &quot;http://home-service.net/pmr&quot; &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36&quot; 495 0.001 [upstream-default-backend] [] 10.x.x.18:8080 21 0.000 404 0ba3519a8f55673cdcbb391d6102609a
10.x.x.1 - - [02/Sep/2020:14:51:11 +0000] &quot;GET /static/js/2.ae30464f.chunk.js HTTP/1.1&quot; 404 21 &quot;http://home-service.net/pmr&quot; &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36&quot; 435 0.001 [upstream-default-backend] [] 10.x.x.18:8080 21 0.000 404 b01b7b33a961df5be413f10ec14909c1
10.x.x.198 - - [02/Sep/2020:14:51:11 +0000] &quot;GET /static/js/main.d76be073.chunk.js HTTP/1.1&quot; 404 21 &quot;http://home-service.net/pmr&quot; &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36&quot; 438 0.000 [upstream-default-backend] [] 10.x.x.18:8080 21 0.000 404 c333c6dca261a75133944c6e308874af
10.210.x.200 - - [02/Sep/2020:14:51:11 +0000] &quot;GET /static/css/main.9d650a52.chunk.css HTTP/1.1&quot; 404 21 &quot;http://home-service.net/pmr&quot; &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36&quot; 455 0.000 [upstream-default-backend] [] 10.x.x.18:8080 21 0.000 404 0d8a5a6aa7d549294fcb1c147dd01294
10.x.x.198 - - [02/Sep/2020:14:51:11 +0000] &quot;GET /static/js/2.ae30464f.chunk.js HTTP/1.1&quot; 404 21 &quot;http://kda9dc8056pmr01.aks.azure.ubsdev.net/pmr&quot; &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36&quot; 435 0.000 [upstream-default-backend] [] 10.x.x.18:8080 21 0.000 404 1d8ee795cfa4e52225cf51e9fc1989d6
10.x.x.198 - - [02/Sep/2020:14:51:11 +0000] &quot;GET /static/js/main.d76be073.chunk.js HTTP/1.1&quot; 404 21 &quot;http://home-service.net/pmr&quot; &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36&quot; 438 0.001 [upstream-default-backend] [] 10.x.x.18:8080 21 0.004 404 a0952e173bfb58f418f5d600e377f18c

React Nginx container will recieve the request with 200 like this
10.x.x.25 - - [02/Sep/2020:14:25:27 +0000] &quot;GET / HTTP/1.1&quot; 200 3009 &quot;-&quot; &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36&quot; &quot;10.210.62.200&quot;

</code></pre>
<p>Why the requests are all not handled by the <code>my-service</code> alone but css and .js files are handled by the <code>upstream-default-backend</code> and resulting in 404 ?</p>
<p>Nginx ingress controller version: <code>nginx-ingress-controller:0.26.1</code></p>

Buba Conteh
<p>Your resources are rendered with the root path <code>/static</code>. That’s a separate HTTP request and will get default backend since it does not satisfy your <code>/pmr</code> path rule. You should use relative paths inside the web app for the reverse proxy to work correctly. For example drop the <code>/</code> root and just use <code>static/css/main.css</code>. Or use hostname rule instead of path rules.</p>
