将 React (ViteJS) 应用部署到 Azure Kubernetes 时，.mjs 文件的 MIME 类型为“text/html”

Question

我使用 ViteJS 和 TypeScript 构建了一个 React 应用程序。我已经使用

tsc && vite build

构建了该项目。然后我根据我的 Dockerfile 构建了 Docker 镜像：

FROM node:18.12.0
COPY build /build
RUN npm i -g serve
CMD ["serve", "-s", "build", "-p", "5173"]
HEALTHCHECK CMD wget --no-verbose --tries=1 --spider http://localhost:5173/ || exit 1

我已经在本地测试了 Docker 镜像，它按预期构建，运行时容器启动，应用程序可以访问，并且按预期进行。

我一直在遵循 Microsoft 文档来使用 Nginx 入口控制器：在 Azure Kubernetes 服务 (AKS) 中创建入口控制器

所以，我的这项服务清单如下所示：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: aks-helloworld-one  
spec:
  replicas: 1
  selector:
    matchLabels:
      app: aks-helloworld-one
  template:
    metadata:
      labels:
        app: aks-helloworld-one
    spec:
      containers:
      - name: aks-helloworld-one
        image: ghcr.io/akusasdesign/localizer:test-serve
        ports:
        - containerPort: 5173
        env:
        - name: TITLE
          value: "Welcome to Azure Kubernetes Service (AKS)"
      imagePullSecrets:
        - name: github-container-registry
---
apiVersion: v1
kind: Service
metadata:
  name: aks-helloworld-one  
spec:
  type: ClusterIP
  ports:
  - port: 5173
  selector:
    app: aks-helloworld-one

服务和部署都已创建，但是当移动到 url 时，页面是白色/空白的。检查控制台我可以看到错误消息：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

我已经进行了一些搜索，但找不到此问题的原因/解决方案。

Answer 1

.mjs

文件的 MIME 类型需要为

text/javascript

。
有关更多信息，请查看有关该主题的 MDN 文档。

Answer 2

在 kubernetes 上哪里可以配置这个？

Answer 3

您需要在 nginx 中指定

mjs

支持，如下所示：

include mime.types;
types {
  application/javascript js mjs;
}

了解更多信息：https://github.com/storybookjs/storybook/issues/20157