部署React(ViteJS)应用至AKS时.mjs文件MIME类型为text/html的问题

核心原因分析 #

该错误源于浏览器请求JS模块时，服务器返回了text/html类型而非正确的application/javascript，通常由以下两种情况引发：

• Ingress路径规则未正确配置，静态资源请求被错误路由到SPA入口HTML文件
• Vite构建时的base路径与Ingress部署路径不匹配，导致资源加载路径错误

步骤1：补充并修正Ingress资源配置 #

你目前仅提供了Deployment和Service配置，缺少关键的Ingress资源。添加以下Ingress配置（根据实际域名和路径调整）：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: aks-helloworld-one-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    nginx.ingress.kubernetes.io/use-regex: "true"
    # 确保静态资源MIME类型正确识别
    nginx.ingress.kubernetes.io/configuration-snippet: |
      types {
        application/javascript js mjs;
        text/javascript js;
      }
spec:
  ingressClassName: nginx
  rules:
  - host: your-domain.com # 替换为实际域名
    http:
      paths:
      - path: /(.*)
        pathType: Prefix
        backend:
          service:
            name: aks-helloworld-one
            port:
              number: 5173

关键配置说明 #

• rewrite-target: /$1：确保所有路径请求正确转发到服务器，避免静态资源请求被重定向到入口HTML
• configuration-snippet：显式指定JS模块的MIME类型，覆盖Nginx默认配置可能的缺失

步骤2：检查Vite构建的base路径配置 #

若应用部署在子路径下（如your-domain.com/app），需在vite.config.ts中设置对应base路径：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/app/' // 替换为Ingress子路径，末尾必须带斜杠
})

设置完成后重新执行tsc && vite build，重新构建Docker镜像并推送，更新AKS Deployment的镜像版本。

步骤3：（可选）替换Serve为Nginx托管静态资源 #

Serve虽简单，但在K8s环境下，Nginx托管静态资源更稳定且易配置。修改Dockerfile如下：

FROM nginx:alpine
COPY build /usr/share/nginx/html
# 添加自定义Nginx配置，支持SPA history模式
COPY nginx.conf /etc/nginx/conf.d/default.conf

创建nginx.conf文件：

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    # 支持SPA history模式，所有路径重定向到index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 确保JS模块MIME类型正确
    types {
        application/javascript js mjs;
        text/javascript js;
    }
}

重新构建镜像后更新Deployment，此方式能更可靠地处理静态资源和路由问题。

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