1

I am using istio on EKS

I deployed an Angular micro front end application on EKS

This is the base href in my micro font end's index.html

<base href="/ui-spa">

I am using the following VirtualService:

apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
 name: ui-spa-virtual-service
 namespace: ui-spa-namespace
spec:
 hosts:
 - "*"
 gateways:
 - default/ui-spa-gateway
 http:
 - match:
   - uri:
       prefix: "/ui-spa/login"
   rewrite:
     uri: "/index.html"
   route:
   - destination:
      host: ui-spa-service
      port:
        number: 80

When I reply this Virtual service, the following curl command works fine:

curl "istio-loadbalancer/ui-spa/login"

The curl command returns the index.html page successfully.

However when I run the same URL in a browser, I get a blank page

When I looked at the developer tools page on chrome, I noticed that index.hml returned with a 200 status but all the other dependencies like javascript files and image files were returning 404 error.

How do I make sure all the js and image files are also returned on the browser?

Should I change the virtual service?

I also tried the suggestion here:

https://rinormaloku.com/istio-practice-routing-virtualservices/

... and added this to my virtual service as well. But it didn't work:

  http:
  - match:
    - uri:
        exact: /
    - uri:
        exact: /callback
    - uri:
        prefix: /static
    - uri:
        regex: '^.*\.(ico|png|jpg)$'

The above virtual service also gave 404 for js and image files.

Biju
  • 820
  • 1
  • 11
  • 34

1 Answers1

0

A slash at the end of the match uri did the trick. Now all dependencies load like a charm!

http:
  - match:
    - uri:
          prefix: /ui-spa/
Biju
  • 820
  • 1
  • 11
  • 34