Trying out a default NextJS typescript app creation using
npx create-next-app@latest --ts . "next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0"
Followed by a basic Dockerfile setup for deployment on kubernetes minikube with minikube tunnel to access the port
FROM node:alpine
WORKDIR /app
COPY package.json .
RUN yarn install
COPY . .
CMD ["yarn", "dev"]
Encountering a blank page and console errors when running the app in a browser
Uncaught SyntaxError: Unexpected token '<'
The same image runs smoothly via docker run outside of kubernetes. Checked HTML for paths, pointing to:
While hovering over src
<div id="__next">
<script src="/_next/static/chunks/react-refresh.js?ts=1654439747173"></script>
Including deployment.yaml and ingress files
apiVersion: apps/v1
kind: Deployment
metadata:
name: front-depl
spec:
replicas: 1
selector:
matchLabels:
app: front
template:
metadata:
labels:
app: front
spec:
containers:
- name: front
imagePullPolicy: Never
image: mine/front:latest
resources:
limits:
memory: 512Mi
cpu: "1"
---
apiVersion: v1
kind: Service
metadata:
name: front-service
spec:
selector:
app: front
ports:
- name: front
protocol: TCP
port: 3000
targetPort: 3000
// ingress
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: my-ingress
annotations:
nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
rules:
- host: myhost.com
http:
paths:
- path: /?(.*)
pathType: Prefix
backend:
service:
name: front-service
port:
number: 3000
Seeking solutions to run the application successfully on kubernetes environment