React in AKS gets MIME error for CSS and JS files-CodePudding

I have a React application which I'm trying to migrate to Azure, in Kubernetes. Should be straightforward enough, one would think. After setting up Certificates & Ingress according to this, I have a ClusterIP which exposes the React deployment. Inside the React pod, I use Nginx to host the static build, see files below. When I try access the host, the page blanks with the following error.

The stylesheet XXXXX/static/css/2.743d7424.chunk.css was not loaded because its MIME type, “text/html”, is not “text/css”. 
The stylesheet XXXXX/static/css/main.44331b01.chunk.css was not loaded because its MIME type, “text/html”, is not “text/css”.

First thing I check was the image, which runs fine locally. Second thing I checked was to connect the pod to a public load balancer without ingress or TLS, also worked fine. Therefore, the issue must lay at either my Ingress, or the Nginx-controller that manages the certificates.

I'm not the only one with this problem, but the issue remains open and the solution doesn't work. https://github.com/kubernetes/ingress-nginx/issues/5265

Setup:

Ingress yaml

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: basic-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    cert-manager.io/cluster-issuer: letsencrypt-prod
    nginx.ingress.kubernetes.io/rewrite-target: /
    # FrontendConfig: redirect-config
    kubernetes.io/ingress.allow-http: "true"
spec:
  tls:
  - hosts:
    - mydomain.com
    secretName: tls-secret
  rules:
  - host: mydomain.com
    http:
      paths:
      - path: /*
        pathType: Prefix
        backend:
          service:
            name: react-app
            port:
              number: 80

Dockerfile

FROM node:16-alpine as builder
WORKDIR /usr/src/frontend
COPY package.json package-lock.json /usr/src/frontend/
RUN apk add git && npm ci
COPY . .
RUN npm run build

# NGINX build
FROM nginx:1.20.2-alpine
RUN rm /etc/nginx/conf.d/default.conf
COPY default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /usr/src/frontend/build/ /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

Default.conf

server {
    listen 80;
    server_name platform.amplo.ch;
    server_tokens off;
    
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

CodePudding user response：

So the Github issue did actually reveal the solution. The problem is with the paths and/or the rewrite-target. Credits to @az-iddouch.

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
  rules:
    - http:
        paths:
          - path: /?(.*)
            backend:
              serviceName: client-cluster-ip-service
              servicePort: 3000
          - path: /api/?(.*)
            backend:
              serviceName: server-cluster-ip-service
              servicePort: 5000