Rewrite target issue with nginx ingress kubernetes-CodePudding

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 >

        <!-- 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

CodePudding user response：

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