AKS中NextJS应用经Nginx Ingress TLS部署后样式/资源加载异常

出现Unexpected token '<'错误，说明浏览器请求的JS/CSS等静态资源实际返回的是HTML内容（通常是应用首页或404页面），结合端口转发正常、Ingress访问异常的现象，问题根源在Ingress的TLS配置冲突。

关键问题点 #

你同时配置了nginx.ingress.kubernetes.io/ssl-passthrough: 'true'注解和spec.tls字段，二者存在冲突：

• ssl-passthrough会让Nginx Ingress跳过TLS终止，直接把加密流量转发到后端服务，但你的NextJS服务监听的是3000端口的HTTP流量，无法处理加密请求，导致静态资源请求被错误解析，返回HTML而非正确的静态文件。
• 端口转发时直接访问HTTP服务，不会触发这个冲突，因此应用正常。

修复步骤 #

1. 移除冲突的Ingress注解
   删除nginx.ingress.kubernetes.io/ssl-passthrough: 'true'，让Ingress正常完成TLS终止，将解密后的HTTP流量转发到后端服务。

2. 修改后的Ingress配置

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
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

3. 应用配置并验证
   执行命令更新Ingress：

   kubectl apply -f your-ingress-file.yaml
   

   等待Nginx Ingress控制器重新加载配置后，访问域名测试静态资源是否正常加载。

额外排查点 #

如果问题依旧，检查以下内容：

• 确认NextJS应用的next.config.js中没有错误配置basePath或assetPrefix，端口转发正常的话这部分大概率没问题。
• 查看Ingress控制器日志，确认流量转发是否正常：

  kubectl logs -n kube-system -l app=nginx-ingress
  

内容的提问来源于stack exchange，提问作者Gurkang