<p>My backend services is working great with ingress nginx.
I'm trying without success to add a frontend SPA react app to my ingress.</p>
<p>I did manage to get it work but I can't get both my backend AND front end to works.</p>
<p>My ingress yml is</p>
<pre><code>apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/use-regex: 'true'
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    #nginx.ingress.kubernetes.io/add-base-url: &quot;true&quot;
    
spec:
  rules:
    - host: accounting.easydeal.dev
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: frontend-srv
                port:
                  number: 3000
    - host: api.easydeal.dev
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: docker-hello-world-svc
                port:
                  number: 8088
          - path: /accounting(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: accounting-srv
                port:
                  number: 80
          - path: /company(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: dealers-srv
                port:
                    number: 80
                  
</code></pre>
<p>With this yml above i'm able to poke my backend like so -&gt; api.easydeal.dev/helloword or
api.easydeal.dev/company/* and it work !.</p>
<p>However my react app (accounting.easydeal.dev) end up with a white page a console log with this error -&gt;</p>
<pre><code>Uncaught SyntaxError: Unexpected token '&lt;'
</code></pre>
<p>The only way i'm able to make my react app work is to change rewrite-target: <strong>/$2 to /</strong> . However doing so prevent to route correctly my other apis.</p>
<p><em>I did set the homepage for the react app to &quot;.&quot; but still have the error and I also try to set path to /?(*) for my front end</em></p>
<p>here is my dockerfile</p>
<pre><code># pull the base image
FROM node:alpine

# set the working direction
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . ./

EXPOSE 3000
CMD [&quot;npm&quot;, &quot;start&quot;]
</code></pre>

Pilouk
<p>As pointed in the comments by original poster:</p>
<blockquote>
<p>Doing 2 ingress services sold this issue.</p>
</blockquote>
<p>The solution to this issue was to create 2 separate <code>Ingress</code> resources.</p>
<p>The underlying issue was that the workload required 2 different     <code>nginx.ingress.kubernetes.io/rewrite-target:</code> parameters.</p>
<p><strong>Above annotations can be set per <code>Ingress</code> resource and not per path.</strong></p>
<p>You can create 2 <code>Ingress</code> resources that will be separate entities (will have different annotations) and they will work &quot;together&quot;.</p>
<p>More reference can be found in the links below:</p>
<ul>
<li><em><a href="https://stackoverflow.com/a/60750408/12257134">Stackoverflow.com: Answer: Apply nginx-ingress annotations at path level
</a></em></li>
<li><em><a href="https://kubernetes.github.io/ingress-nginx/user-guide/basic-usage/" rel="nofollow noreferrer">Kubernetes.github.io: Ingress nginx: User guide: Basic usage</a></em></li>
</ul>
<hr />
<h3>Being specific to <code>nginx-ingress</code>:</h3>
<p><strong>By default</strong> when you provision/deploy <a href="https://kubernetes.github.io/ingress-nginx/deploy/" rel="nofollow noreferrer">NGINX Ingress controller</a> you are telling your Kubernetes cluster to create <code>Service</code> of type <code>LoadBalancer</code>. This <code>Service</code> will requests the IP address from the cloud provider (<code>GKE</code>, <code>EKS</code>, <code>AKS</code>) and will route the traffic from this IP to your <code>Ingress</code> controller where the requests will be evaluated and send further according to your <code>Ingress</code> resources definitions.</p>
<blockquote>
<p><strong>A side note!</strong></p>
<p><code>By default</code> was not used without a reason as there are other methods to expose your <code>Ingress</code> controller to the external traffic. You can read more about it by following below link:</p>
<ul>
<li><em><a href="https://kubernetes.github.io/ingress-nginx/deploy/baremetal/" rel="nofollow noreferrer">Kubernetes.github.io: Ingress nginx: Deploy: Baremetal</a></em></li>
</ul>
</blockquote>
<p>Your <code>Ingress</code> controller will have <strong>single</strong> IP address to expose your workload:</p>
<ul>
<li><code>$ kubectl get service -n ingress-nginx ingress-nginx-controller</code></li>
</ul>
<pre class="lang-sh prettyprint-override"><code>NAME                                 TYPE           CLUSTER-IP     EXTERNAL-IP   PORT(S)                      AGE
ingress-nginx-controller             LoadBalancer   10.32.6.63     AA.BB.CC.DD   80:30828/TCP,443:30664/TCP   19m
</code></pre>
<p><code>Ingress</code> resource that are using <code>kubernetes.io/ingress.class: &quot;nginx&quot;</code> will use that address.</p>
<p><code>Ingress</code> resources created in this way will look like following when issuing:</p>
<ul>
<li><code>$ kubectl get ingress</code></li>
</ul>
<pre class="lang-sh prettyprint-override"><code>NAME              HOSTS                 ADDRESS        PORTS   AGE
goodbye-ingress   goodbye.domain.name   AA.BB.CC.DD    80      19m
hello-ingress     hello.domain.name     AA.BB.CC.DD    80      19m
</code></pre>
<blockquote>
<p><strong>A second side note!</strong></p>
<p>If you are using a managed Kubernetes cluster, please refer to it's documentation for more reference on using <code>Ingress</code> resources as there could be major differences.</p>
</blockquote>
