We are facing an issue with getting our vue.js application to work on Kubernetes (running in a container using nginx). We are using ingress to route to the site, and below is our configuration:
Dockerfile:
# build stage
FROM public.ecr.aws/docker/library/node:19 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build
FROM public.ecr.aws/nginx/nginx:1.24 as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/conf.d/default.conf
nginx:
server {
listen 80;
server_name _;
access_log /var/log/nginx/vue-access.log;
error_log /var/log/nginx/ve-error.log;
location / {
root /app;
index index.html;
try_files $uri $uri/ /index.html;
}
}
ingress:
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: -ingress
annotations:
kubernetes.io/ingress.class: alb
alb.ingress.kubernetes.io/scheme: internet-facing
alb.ingress.kubernetes.io/target-type: ip
spec:
rules:
- http:
paths:
- backend:
service:
name: vue-portal-service
port:
number: 80
path: /
pathType: ImplementationSpecific
When I access the page, the index.html loads, but the CSS and JS files are not being loaded and return a 404 error. It's strange because everything works fine when I run the Docker image on my localhost.
Any suggestions on what might be causing this issue?