Vite React tsx app run fine in my local using nginx web server with Docker container. But when I run the app in Digital Ocean K8s cluster with nginx ingress controller. I am getting following error.
index-IS_bIaLF.js:1 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.
my nginx.conf file:
worker_processes 4;
events {
worker_connections 1024;
}
http {
server {
listen 4173;
root /usr/share/nginx/html/nginx-test;
include /etc/nginx/mime.types;
location / {
# root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
}
}
Docker file:
# stage1 as builder
FROM node:21-alpine as builder
WORKDIR /app
# Copy the package.json and install dependencies
COPY package*.json ./
RUN npm install
# Copy rest of the files
COPY . .
# Build the project
RUN npm run build
FROM nginx:alpine as production-build
COPY nginx.conf /etc/nginx/nginx.conf
## Remove default nginx index page
RUN rm -rf /usr/share/nginx/html/*
# Copy from the stage 1
COPY --from=builder /app/dist /usr/share/nginx/html/nginx-test
EXPOSE 4173
WORKDIR /usr/share/nginx/html/nginx-test
COPY ./env.sh .
# Expose port 4173 for the Nginx server
EXPOSE 4173
# Add bash
RUN apk add --no-cache bash
# Make our shell script executable
RUN chmod +x env.sh
# Start Nginx server
CMD ["/bin/bash", "-c", "/usr/share/nginx/html/nginx-test/env.sh && nginx -g "daemon off;""]
It runs fine in my Local. but in Cloud only I am getting Black White page.
K8s ingress.
kind: Ingress
apiVersion: networking.k8s.io/v1
metadata:
name: test124
namespace: test
labels:
app: ggg
annotations:
cert-manager.io/issuer: letsencrypt-nginx
nginx.ingress.kubernetes.io/rewrite-target: /
spec:
ingressClassName: nginx
tls:
- hosts:
- ragon.com
secretName: letsencrypt-nginx
rules:
- host: ragon.com
http:
paths:
- path: /*
pathType: Prefix
backend:
service:
name: service
port:
number: 80
index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<script type="module" crossorigin src="./assets/index-IS_bIaLF.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-DiwrgTda.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
New contributor
akash is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.