AKS 中的 React 获取 CSS 和 JS 文件的 MIME 错误答案

【问题标题】：React in AKS gets MIME error for CSS and JS filesAKS 中的 React 获取 CSS 和 JS 文件的 MIME 错误
【发布时间】：2021-11-29 10:47:35
【问题描述】：

我有一个 React 应用程序，我正试图在 Kubernetes 中迁移到 Azure。应该足够直截了当，人们会想。根据this 设置证书和入口后，我有一个 ClusterIP，它公开了 React 部署。在 React pod 中，我使用 Nginx 来托管静态构建，请参阅下面的文件。当我尝试访问主机时，页面空白并显示以下错误。

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

我首先检查的是图像，它在本地运行良好。我检查的第二件事是将 pod 连接到没有入口或 TLS 的公共负载均衡器，也可以正常工作。因此，问题必须出在我的 Ingress 或管理证书的 Nginx 控制器上。

我不是唯一遇到此问题的人，但问题仍然存在，解决方案不起作用。 https://github.com/kubernetes/ingress-nginx/issues/5265

设置：

入口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;"]

默认配置

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

【问题讨论】：

标签： reactjs azure nginx azure-aks nginx-ingress

【解决方案1】：

所以 Github 问题确实揭示了解决方案。问题在于路径和/或重写目标。感谢@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

【讨论】：