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

ds97pgxw  于 2023-05-16  发布在  Kubernetes
关注(0)|答案(1)|浏览(227)

我已经使用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 Image,它按预期构建,当运行时,容器启动,应用程序可以访问,并且可以正常运行。
我一直在使用Nginx Ingress Controller的Microsoft文档:Create an ingress controller in Azure Kubernetes Service (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.

我已经做了一些搜索,但无法找到这个问题的原因/修复。

v1l68za4

v1l68za41#

.mjs文件的MIME类型必须为text/javascript
更多信息请查看MDN文档。

相关问题