<p>I have a React app which I build and dockerize to be hosted on a nginx server.</p>
<pre><code>FROM nginx:latest
COPY build /usr/share/nginx/html
</code></pre>
<p>I then create a simple deployment and service for it (which I very much doubt are the problem). Next I create an nginx ingress.</p>
<pre><code>apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: my-app-ingress
  annotations:
    kubernetes.io/ingress.class: &quot;nginx&quot;
    nginx.ingress.kubernetes.io/ssl-redirect: &quot;false&quot;
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - host: &lt;MY_NGINX_CONTROLLER_EXTERNAL_IP&gt;.xip.io
    http:
      paths:
      - backend:
          serviceName: my-app-service
          servicePort: 80
        path: /myapp   
</code></pre>
<p>But when I call <code>&lt;MY_NGINX_CONTROLLER_EXTERNAL_IP&gt;.xip.io/myapp</code> I get a 404.</p>
<p>When I change <code>path: /myapp</code> to <code>path: /</code> I can reach my app with no problems on <code>&lt;MY_NGINX_CONTROLLER_EXTERNAL_IP&gt;.xip.io</code></p>
<p>I have tried numerous variations of <code>rewrite-target</code> and <code>path</code> like <code>/$1</code> and <code>/myapp/(.*)</code> but it makes no difference.</p>
<p>I believe the problem lies with using the <code>nginx.ingress.kubernetes.io/rewrite-target</code> annotation to route to a React app. Because using that annotation for any other service on my cluster works just fine.</p>
<p>Others users seem to have similar problems: <a href="https://github.com/kubernetes/ingress-nginx/issues/3770#" rel="nofollow noreferrer">https://github.com/kubernetes/ingress-nginx/issues/3770#</a>. But I was unable to find a solution.</p>
<p>A workaround would be to change the <code>basename</code> and <code>homepage</code> attributes within my react app and then update all routes. Then I would not need <code>rewrite-target</code> at all. But making it work with <code>rewrite-target</code> would be much cleaner, especially considering that the path/subdirectory will have to change regularly for my app.</p>

2um9YJ6haZ7wKP4m
<p>I got it working now. With two additional steps &quot;rewrite-target&quot; annotation is not required at all and can be removed from the ingress resource.</p>
<p>Step 1: Change the base URL within the react app. See how to do this <a href="https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/" rel="nofollow noreferrer">here</a>.</p>
<p>Step 2: Copy the react build into the corresponding subdirectory of <code>/usr/share/nginx/html</code> in the Dockerfile:</p>
<pre><code>FROM nginx:latest
COPY build /usr/share/nginx/html/myapp
</code></pre>
