<p>I have a problem with a simple react app that was created using <code>npx create-react-app react-app</code>. Once deployed on k8s, I got this:</p>

<p><code>Uncaught SyntaxError: Unexpected token '&lt;'</code></p>

<p>However, if I would to <code>kubectl port-forward</code> to the pod and view the app at localhost:3000 (container's pod is at 3000, cluster ip service listening on 3000 and forwarding to 3000) no problem at all. </p>

<p>The ingress routing looks to be fine as I can get to other services to work within the cluster but not to the app. Some help would be greatly appreciated.</p>

<p>Deployment yaml:</p>

<pre><code>apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-app-deployment
  # namespace: gitlab-managed-apps
spec:
  replicas: 1
  selector:
    matchLabels:
      component: react-app
  template:
    metadata:
      labels:
        component: react-app
    spec:
      imagePullSecrets:
      - name: simpleweb-token-namespace
      containers:
      - name: react-app
        image: registry.gitlab.com/mttlong/sample/react-app
        env:
        - name: "PORT"
          value: "3000"
        ports:
        - containerPort: 3000
</code></pre>

<p>Cluster ip service:</p>

<pre><code>apiVersion: v1
kind: Service
metadata:
  name: react-app-cluster-ip-service
spec:
  type: ClusterIP
  selector:
    component: react-app
  ports:
  - port: 3000
    targetPort: 3000
</code></pre>

<p>Dockerfile:</p>

<pre><code>FROM node:10.15.3-alpine as builder
WORKDIR '/app'
COPY ./package.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx
EXPOSE 3000
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build /usr/share/nginx/html
</code></pre>

<p>Ingress Service:</p>

<pre><code>apiVersion: extensions/v1beta1
kind: Ingress
metadata: 
  name: orion-ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /$2

spec:
  rules:
    - host: horizon.zeezum.com
      http: 
        paths:
          - path: /
            backend:
              serviceName: react-app-cluster-ip-service
              servicePort: 3000
          - path: /api(/|$)(.*)
            backend:
              serviceName: simple-api-nodeport-service
              servicePort: 3050
</code></pre>

<p>I ran into the same issue as you have described. I solved it by splitting up the Ingress for the front-end and the API.</p>
<p>In your case this would look something like this:</p>
<p>Front-end ingress service (without rewrite target):</p>
<pre><code>apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: orion-ingress-frontend-service
  annotations:
    kubernetes.io/ingress.class: nginx
spec:
  rules:
    - host: horizon.zeezum.com
      http:
        paths:
          - path: /
            backend:
              serviceName: react-app-cluster-ip-service
              servicePort: 3000
</code></pre>
<p>Back-end ingress service (with the /$2 rewrite-target):</p>
<pre><code>apiVersion: extensions/v1beta1
kind: Ingress
metadata: 
    name: orion-ingress-backend-service
    annotations:
        kubernetes.io/ingress.class: nginx
        nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
    rules:
        - host: horizon.zeezum.com
            http: 
                paths:
                    - path: /api(/|$)(.*)
                        backend:
                            serviceName: simple-api-nodeport-service
                            servicePort: 3050
</code></pre>
<p>The rest of you configuration should be good.</p>
