Vue.js app returns no script with Nginx Ingress on subpath (EKS Kubernetes)

12/1/2020

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

-- Cataklix
kubernetes
nginx-ingress
vue.js

0 Answers