Configuring K8s nginx ingress to route traffic to two separate Angular SPA sites

8/19/2019

I have two SPA dotnetcore/Angular sites running in my AKS cluster and am trying to configure the ingress service to route traffic to each one. Currently both applications are sitting behind separate cluster IP services and are definitely running. I have also tested them running in Docker containers and know that both are reachable on the configured ports. If I configure one of the applications to be route-able via the root subpath /?(.*) the site loads correctly.

However, the other application that is routed via any other subpath /another/?(.*) cannot load any of the static (JS, CSS, etc.) files - the requests seem to return index.html.

From ingress-controller.yaml

...
 annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    nginx.ingress.kubernetes.io/backend-protocol: "HTTPS"
spec:
  rules:
    - http:
        paths:
          - path: /?(.*)
            backend:
              serviceName: cluster-ip-app-1
              servicePort: 5001
          - path: /app2/?(.*)
            backend:
              serviceName: cluster-ip-app-2
              servicePort: 5003

Cluster-ip-app-1 is configured to listen on port 5001 as is the underlying application. The same can be said for app-2 (but on port 5003).

I have also tried adding various server-snippet/configuration-snippet's to no avail (not necessarily at the same time) e.g.

nginx.ingress.kubernetes.io/server-snippet (or configuration-snippet): |
      root   /path/to/dist;
      index  index.html index.htm;
      location / {
        if (!-e $request_filename){
            rewrite ^(.*)$ /index.html break;
        }
      }
      location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
          expires max;
          log_not_found off;
      }
      try_files $uri $uri/ /index.html?$args =404;
      try_files $uri /index.html =404;
      include  /etc/nginx/mime.types;
      rewrite /path/to/dist/([^.]+)$ /app/ClientApp/dist break;  
      rewrite /app2/?(.*) / break;

In the above configuration, app-1 loads properly when visiting the PIP over https. However, when trying to visit https:///app2/ some of the static file requests fail and others seem to be returning the index page rather than the file itself.

static resources index returning instead of resource

It should be possible to set up some an alias record for the PIP in azure if that is the only way to resolve this.

Lastly, are there any good Nginx configuration tutorials for newbies (a bonus if it is more geared towards nginx ingress)?

Thank you for your help in advanced!

-- Alex Skinner
angular
azure-aks
kubernetes
kubernetes-ingress
nginx

1 Answer

8/20/2019

What you should do is, firstly add line to you annotations:

nginx.ingress.kubernetes.io/use-regex: "true"

Try to change your location rule to: - path: /app2(/|$)(.*) and the rewrite annotation to: nginx.ingress.kubernetes.io/rewrite-target: /$2. It will looks similar to this:

...
 annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    nginx.ingress.kubernetes.io/backend-protocol: "HTTPS"
    nginx.ingress.kubernetes.io/use-regex: "true"
spec:
  rules:
    - http:
        paths:
          - path: /?(.*)
            backend:
              serviceName: cluster-ip-app-1
              servicePort: 5001
          - path: /app2(/|$)(.*)
            backend:
              serviceName: cluster-ip-app-2
              servicePort: 5003

You want to hit app1 or app2 depending on the request URL. Also, please look for documentation about mapping each path to different services.

If you still looking for interesting Nginx Ingress configuration tutorials I will recommend you those two:

I hope it will helps you.

-- muscat
Source: StackOverflow