I have a Vue app that I’m trying to host on an AWS EKS Cluster behind a NLB and Nginx Ingress to access it from a subpath (/backoffice) of my Network Load Balancer. The setup is the following.
I have the following docker file :
FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist", "-p", "80"]
Then, I have setup my service and deployment as following:
apiVersion: v1
kind: Service
metadata:
name: backoffice-service
namespace: internal
spec:
type: NodePort
ports:
- port: 80
targetPort: 80
protocol: TCP
selector:
app.kubernetes.io/name: app-backoffice
---
apiVersion: apps/v1
kind: Deployment
metadata:
name: deployment-backoffice
namespace: internal
spec:
selector:
matchLabels:
app.kubernetes.io/name: app-backoffice
replicas: 1
revisionHistoryLimit: 3
template:
metadata:
labels:
app.kubernetes.io/name: app-backoffice
spec:
containers:
- name: app-backoffice
image: backoffice:0.0.1
imagePullPolicy: Always
ports:
- containerPort: 80
Then I have setup my ingress:
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
name: ingress-internal
namespace: internal
annotations:
nginx.ingress.kubernetes.io/ssl-redirect: "false"
nginx.ingress.kubernetes.io/force-ssl-redirect: "false"
nginx.ingress.kubernetes.io/rewrite-target: /
spec:
rules:
- http:
paths:
- path: /backoffice/*
backend:
serviceName: backoffice-service
servicePort: 80
I have also changed the publicPath in the vue.config.js to match the subpath used by the ingress.
When I query my load balancer, the successfully returns me the page and the assets that needs to be download in order to display the page, and the browser successfully gets it. But the app div is empty and the noscript error is shown even if JS is enabled in my browser…
This issue also happen locally when running
npm run build
http-server dist -p 80
I cannot manage to fix this issue, and my stuck for days… Does anyone has an idea ?
Thanks