I've built a React application utilizing ViteJS with TypeScript. I've built the project using tsc && vite build. I've then built the Docker image based on my Dockerfile:
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
I've tested the Docker Image locally, and it builds as intended and when run the container boots up and the application is accessible and wors as it should.
I've been following Microsofts documentation for utilizing an Nginx Ingress Controller: Create an ingress controller in Azure Kubernetes Service (AKS)
So, my manifest for this service looks like this:
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
The service and Deployment are both created, but when moving to the url, the page is white/blank. Checking the console I can see the error message:
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.
I've done some searching, but can't find a reason/fix for this problem.
The MIME type for .mjs files needs to be text/javascript.
For more innformation check out the MDN documentation about that topic.