Nextjs application behind Nginx Ingress with tls not correctly loading css and styling/assets

Question

I'm hosting a NextJS application in my AKS cluster.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: applicationName
spec:
  replicas: 1
  selector:
    matchLabels:
      app: applicationName
  template:
    metadata:
      name: applicationName
    spec:
      containers:
        - name: applicationName
          image: image
          imagePullPolicy: Always
      restartPolicy: Always
---
apiVersion: v1
kind: Service
metadata:
  name: applicationName-svc
spec:
  type: ClusterIP
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: applicationName-ingress
  annotations:
    nginx.ingress.kubernetes.io/use-regex: "true"
    cert-manager.io/cluster-issuer: letsencrypt-prod
    nginx.ingress.kubernetes.io/ssl-passthrough: 'true'
spec:
  ingressClassName: nginx
  tls:
    - hosts:
        - applicationName.domain.cloud
      secretName: prod-applicationName-tls-secret
  rules:
    - host: applicationName.domain.cloud
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: applicationName-svc
                port:
                  number: 80
                

When trying to access my application at applicationName.domain.cloud I can access some parts of the application, but most of the styling is just not applied. And I get an error from the the console:

caught SyntaxError: Unexpected token '<'
framework-2c79e2a64abdb08b.js:1 Uncaught SyntaxError: Unexpected token '<'
main-17a9a24315ee9390.js:1 Uncaught SyntaxError: Unexpected token '<'
_app-2afab9796c6a6373.js:1 Uncaught SyntaxError: Unexpected token '<'
index-b6e8e964ce5feab0.js:1 Uncaught SyntaxError: Unexpected token '<'
_buildManifest.js:1 Uncaught SyntaxError: Unexpected token '<'
_ssgManifest.js:1 Uncaught SyntaxError: Unexpected token '<'

If I port-forward the applicationName-svc all css/styling works and the application works as expected. So I'm pretty sure there is something wrong on the ingress side of things.

But this is where I'm stumped. I'm not sure where or what parts of the ingress could be making these issues for the deployed application. And all my searches and googling haven't found anything that helps me solve this issue.

Answer 1

I solved it by correctly rewriting the target using nginx.ingress.kubernetes.io/rewrite-target: /$1 annotation.

Here's the ingress that is now working for my example:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: application-ingress
  annotations:
    cert-manager.io/cluster-issuer: letsencrypt-dev
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
  ingressClassName: nginx
  tls:
    - hosts:
        - dev.application.grond.cloud
      secretName: dev-application-tls-secret
  rules:
    - host: dev.application.grond.cloud
      http:
        paths:
          - path: /?(.*)
            pathType: Prefix
            backend:
              service:
                name: application-svc
                port:
                  number: 80
                

A small caveat to the above solution. I didn't need the path: /?(.*) at first. But when adding next-translation and i18n I needed to add that.