I am running a Hello World vuejs application in Kubernetes using the below ingress:

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: my-frontend
  namespace: samples
spec:
  rules:
  - host: myhost.internal
    http:
      paths:
      - backend:
          serviceName: my-frontend
          servicePort: 8080
        path: /
  tls:
  - hosts:
    - myhost.internal
    secretName: tls-secret
status:
  loadBalancer:
    ingress:
    - {}

Which works fine:

$ curl -i https://myhost.internal
HTTP/2 200 
...

I need to add a backend using the same hostname (myhost.internal). So I either need to change the path for my frontend or my backend since they cannot both be accessed at / from the outside.

I have decided I want to access my frontend at myhost.internal/frontend even though it internally still serves content under /.

Based on:

https://kubernetes.github.io/ingress-nginx/examples/rewrite/

I first tried:

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
  nginx.ingress.kubernetes.io/rewrite-target: /
  name: my-frontend
  namespace: samples
spec:
  rules:
  - host: myhost.internal
    http:
      paths:
      - backend:
          serviceName: my-frontend
          servicePort: 8080
        path: /frontend
  tls:
  - hosts:
    - myhost.internal
    secretName: tls-secret
status:
  loadBalancer:
    ingress:
    - {}

That seems to work fine as well:

$ curl -i https://myhost.internal/frontend
HTTP/2 200 

But after accessing the new url in my browser a few times (chrome and firefox) the browser page is just blank without any errors but when inspecting with chrome developer mode (F12):

I see lots of 404 on different resources that's needed in the browser. But strange it works the first few times...

I then tried to update my Ingress to (https://kubernetes.github.io/ingress-nginx/examples/rewrite/):

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
  nginx.ingress.kubernetes.io/rewrite-target: /$2
  nginx.ingress.kubernetes.io/enable-rewrite-log: "true" 
  name: my-frontend
  namespace: samples
spec:
  rules:
  - host: myhost.internal
    http:
      paths:
      - backend:
          serviceName: my-frontend
          servicePort: 8080
        path: /frontend(/|$)(.*)
  tls:
  - hosts:
    - myhost.internal
    secretName: tls-secret
status:
  loadBalancer:
    ingress:
    - {}

But same error as before in the browser (I also tried to clear browser cache, private incognito mode).

Based on:

https://github.com/vuejs/vue-cli/issues/1955#issuecomment-565826822

I have tried to create vue.config.js file in root of repo with:

module.exports = {
  publicPath: ''
};

But still same error.

Not sure if I need to update something in the vuejs application of if its a k8s/Ingress miss-configuration.

Possibly related to:

https://discourse.drone.io/t/404-when-using-ingress-on-non-root-path/9358

Any suggestions?