Istio Ingress routing fails with 404 for Nginx/Angular app

Question

I am deploying Nginx with angular app behind istio ingress gateway.

Expected result: https://tremend.com/tremendui/ should open the app.

Issue: But after accessing the url https://tremend.com/tremendui/, it reaches till index.html, but it fails to open other .js or .css files. It gives net::ERR_ABORTED 404.

Unrecognized Content-Security-Policy directive 'https://10.22.33.100'.
GET https://tremend.com/styles.63a1fbbeeb253678e456.css net::ERR_ABORTED 404
GET https://tremend.com/runtime-es2015.fd26fadf204671228ade.js net::ERR_ABORTED 404

If i open the link https://tremend.com/tremendui/runtime-es2015.fd26fadf204671228ade.js, the file opens correctly.

Nginx custom configuration:

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }
}

Nginx/Angular Dockerfile:

FROM node:ubuntu as build-step
ARG env=dev
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install && npm install -g @angular/cli@7.3.9
COPY . .
RUN echo "Build environment is $env"
RUN ng build --configuration=$env

FROM node:ubuntu as prod-stage
RUN DEBIAN_FRONTEND=noninteractive apt-get update && DEBIAN_FRONTEND=noninteractive apt-get -yq install nginx nginx-extras
## Remove default nginx website 
RUN rm -rf /usr/share/nginx/html/*
COPY --from=build-step /usr/src/app/dist/ /usr/share/nginx/html
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf
COPY ./nginx.conf  /etc/nginx/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Virtualservice yaml file:

apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
  name: tremendui-ingress
  namespace: apx-system
spec:
  hosts:
  - "*"
  gateways:
  - apollox-istio-gateway
  http:
  - match:
    - uri:
        prefix: /tremendui/
    rewrite:
        uri: /
    route:
    - destination:
        host: tremend-ui.default.svc.cluster.local
        port:
          number: 80

Can someone assist? Just need some directions on how to solve this. Should i change the base-href in angular or ingress virtualservice or nginx config?

Update1:
I changed my virtualservice as below:

apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
  name: tremedui-ingress
  namespace: apx-system
spec:
  hosts:
  - "tremend.com"
  gateways:
  - apollox-istio-gateway
  http:
  - match:
    - uri:
        exact: /
    route:
    - destination:
        host: tremend-ui.default.svc.cluster.local
        port:
          number: 80
  - match:
    - uri:
        prefix: /jsonserver/
    rewrite:
        uri: /
    route:
    - destination:
        host: json-server.default.svc.cluster.local
        port:
          number: 3000
  - match:
    - uri:
        prefix: /tremendapi/
    rewrite:
        uri: /
    route:
    - destination:
        host: tremend-api.default.svc.cluster.local
        port:
          number: 8000
  - match:
    - uri:
        prefix: /dynamicapi/
    rewrite:
        uri: /
    route:
    - destination:
        host: dynamic-api.default.svc.cluster.local
        port:
          number: 9000

@jt97, I considered yours and Rinor's inputs. But now it goes to the index.html from "/" and also routes to frontend. However other prefixes also routes to the frontend instead of their corresponding destination.

The path for /static, /callback and regex were not working. Because once i added them i just get a 404 error. So i added just root "/" for frontend.

Answer 1

Should i change the base-href in angular or ingress virtualservice or nginx config?

When you use rewrite you need to add path in virtual service for your dependencies like css and js.

It was well explained by @Rinor here.

---

This Istio in practise tutorial explains it well.

Let’s break down the requests that should be routed to Frontend:

Exact path / should be routed to Frontend to get the Index.html

Prefix path /static/* should be routed to Frontend to get any static files needed by the frontend, like Cascading Style Sheets and JavaScript files.

Paths matching the regex ^.*.(ico|png|jpg)$ should be routed to Frontend as it is an image, that the page needs to show.

http:
  - match:
    - uri:
        exact: /
    - uri:
        exact: /callback
    - uri:
        prefix: /static
    - uri:
        regex: '^.*\.(ico|png|jpg)$'
    route:
    - destination:
        host: frontend             
        port:
          number: 80

---

Additionally you can take a look here.

---

Let me know if you have any more questions.