Web App Dependencies (JS, CSS) fail to load when using Istio Gateway and VirtualService

Question

I'm using Helm to deploy various packages (PrestoDB, Apache Spark etc), and for each of these tools I am just using Helm to deploy them using the basic configuration.

https://github.com/helm/charts/tree/master/stable/spark

https://github.com/helm/charts/tree/master/stable/presto

Both deploy just using a ClusterIP service for exposing the Web UI, which I then create a gateway and VirtualService using Istio to the Web Apps can be exposed outside the cluster. After deploying PrestoDB using Helm, this is the Gateway and VirtualService I deploy:

kubectl apply -f - <<EOF
apiVersion: networking.istio.io/v1alpha3
kind: Gateway
metadata:
  name: presto-gateway
  namespace: warehouse
spec:
  selector:
    istio: ingressgateway # use istio default controller
  servers:
  - port:
      number: 80
      name: http
      protocol: HTTP
    hosts:
    - "*"
---
apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
  name: presto
  namespace: warehouse
spec:
  hosts:
  - "*"
  gateways:
  - presto-gateway
  http:
  - match:
    - uri:
        prefix: /ui
    route:
    - destination:
        host: presto-warehouse
        port:
          number: 8080
EOF

This works successfully, however when i go to load the PrestoDB Web UI, I only see text, and I can see in the console that it appears almost all of the JS/CSS dependencies are failing to load. I can see that when i go to "ingressgateway/ui", there is just some plain text, and all of the dependencies appear to be just loading from "ingressgateway", and not "ingressgateway/ui/vendor/xxx.js" etc. Is there a way to re-route the web app from trying to load dependencies from the base domain and prefix it with "/ui" so that it will load? This happens with multiple services when I try to launch them and sit them behind the ingress gateway - spark and others work just fine, but the web apps have trouble loading dependencies and you can only see plain text.

Thanks

What K8s and istio versions You have? Which platform/infrastructure do You have? You can install istioctl 1.4.0 and try to run istioctl x analyze -k to see if it can find any problems within istio mesh. You could try use MTLS permisive mode and check with that so we would be sure it's not policy problem. — Jakub

chd chd · Accepted Answer · 2019-11-30T18:35:08

Since You use istio Did you enable sidecar injection in your cluster?

Is there a way to re-route the web app from trying to load dependencies from the base domain and prefix it with "/ui" so that it will load?

If i understand You correctly you could use rewrite, which exist in virtual service.

There is a good example which i found in another stackoverflow question

Web App Dependencies (JS, CSS) fail to load when using Istio Gateway and VirtualService

1 Answers