Search code examples
kubernetesnginxurl-rewritingkubernetes-ingressnginx-ingress

Rewrite target issue with nginx ingress kubernetes

I am having issue to load a website from a docker nginx container in a AKS cluster. I've installed an nginx ingress controller, and deployed the following:

Deployment + Service

apiVersion: apps/v1
kind: Deployment
metadata:
  name: articles
spec:
  replicas: 1
  selector:
    matchLabels:
      app: articles
  template:
    metadata:
      labels:
        app: articles
    spec:
      containers:
      - name: articles
        image: myimage/personal:articles
        imagePullPolicy: Always
        ports:
        - containerPort: 80
        env:
        - name: TITLE
          value: "Articles"
---
apiVersion: v1
kind: Service
metadata:
  name: articles
spec:
  type: ClusterIP
  ports:
  - port: 80
  selector:
    app: articles

Ingress

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: personal
  annotations:
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
  ingressClassName: nginx
  rules:
  - http:
      paths:
      - path: /articles(/|$)(.*)
        pathType: Prefix
        backend:
          service:
            name: articles
            port:
              number: 80
      - path: /(.*)
        pathType: Prefix
        backend:
          service:
            name: landing-page
            port:
              number: 80

And here is a part of the content of the index.html file that makes the website; I intentionally hide the content of the body as the problem is only with the external files that need to be loaded (css and js files)

<!DOCTYPE HTML>
<html>
    <head>
        <title>Editorial by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="./assets/css/main.css" />
    </head>
    <body class="is-preload">

        <!-- Scripts -->
            <script src="./assets/js/jquery.min.js"></script>
            <script src="./assets/js/browser.min.js"></script>
            <script src="./assets/js/breakpoints.min.js"></script>
            <script src="./assets/js/util.js"></script>
            <script src="./assets/js/main.js"></script>

    </body>
</html>

Files are located in the following folder:

/usr/share/nginx/html/assets

With that, let's say the ingress address is 20.200.200.200, when I go to 20.200.200.200/articles/ , everything is working fine and the page is loading correctly, while when I go to the address 20.200.200.200/articles (note the trailing slash is missing there), the external files can't be loaded ... I have the following errors in the console:

Uncaught SyntaxError: Unexpected token '<' (at jquery.min.js:1:1)
Uncaught SyntaxError: Unexpected token '<' (at browser.min.js:1:1)
Uncaught SyntaxError: Unexpected token '<' (at breakpoints.min.js:1:1)
Uncaught SyntaxError: Unexpected token '<' (at util.js:1:1)
Uncaught SyntaxError: Unexpected token '<' (at main.js:1:1)

I understand that it might be a problem when rewriting the url however I can't figure out how to solve this ...

Tried various rewrite-target options, tried to modify the default.conf file of the nginx container without success

Solution

  • Found out how to handle this thanks to this post ...

    The following ingress configuration makes it work with/without trailing slash:

    apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: articles
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    nginx.ingress.kubernetes.io/configuration-snippet: |
      rewrite ^(/articles)$ $1/ redirect;
spec:
  ingressClassName: nginx
  rules:
  - http:
      paths:
      - path: /articles(/|$)(.*)
        pathType: Prefix
        backend:
          service:
            name: articles
            port:
              number: 80