How to properly configure k8s nginx ingress base url substitution to handle Angular client side routing (LocationStrategy)?

4/5/2018

We have Angular based web application hosted on Kubernetes cluster. Ingress for this application configured to add base URL:

{
  "kind": "Ingress",
  "apiVersion": "extensions/v1beta1",
  "metadata": {
    "name": "test-app",
    "namespace": "acceptance-testing",
    ...
    "annotations": {    
      "kubernetes.io/ingress.class": "nginx",
      "nginx.ingress.kubernetes.io/add-base-url": "true",
      "nginx.ingress.kubernetes.io/rewrite-target": "/",
      "nginx.ingress.kubernetes.io/ssl-redirect": "true"
    }
  },
  "spec": {
    "rules": [
      {
        "http": {
          "paths": [
            {
              "path": "/at/test-app",
              "backend": {
                "serviceName": "test-app",
                "servicePort": 80
              }
            }
          ]
        }
      }
    ]
  },
  ...
}

When we enter URL including client routing parts into the browser then ingress adds whole this URL as a base which is not correct in our scenario.

For example for https://server/at/test-app/some-page request base URL should be https://server/at/test-app/ but we receiving https://server/at/test-app/some-page/

We've switched to Angular hash routing location strategy and now it works properly but we want to know if there is some way to make location routing strategy works with nginx ingress?

Thank you in advance for your help.

Best Regards

-- Luxoft developer
angular
angular-router
kubernetes-ingress
nginx

1 Answer

2/23/2019

Sorry of my English,

I got some way to solve this problem, but maybe not best way

Here is some concept:

  1. /at/test-app/some-page/ must route to /at/test-app, this will have a Angular App, then Angular will process /some-page/
  2. Non-Angular path (e.g: .js, .css, etc...) don't rewrite it
  3. I don't know why "nginx.ingress.kubernetes.io/rewrite-target": "/at/test-app" is look like not work in my environment (gke 1.11.6-gke.2, ingress: quay.io/kubernetes-ingress-controller/nginx-ingress-controller:0.22.0)
{
    ...
    "annotations": {    
      "kubernetes.io/ingress.class": "nginx",
      "nginx.ingress.kubernetes.io/add-base-url": "true",
      "nginx.ingress.kubernetes.io/configuration-snippet": |   <-- change to this
        rewrite /at/test-app/([^.]+)$ /at/test-app break;      <--   rewrite path if no .
      "nginx.ingress.kubernetes.io/ssl-redirect": "true"
    }
    ....
}
-- Benny Leung
Source: StackOverflow