Issue: Incomplete HTML Loading (CSS and JS Not Loading) with NGINX Ingress Controller

[Med_amine_Boujelbene]

Description:

I am encountering an issue with deploying the Open edX application on a browser via an NGINX Ingress Controller. The HTML content loads correctly, but CSS and JS files are not found, resulting in improper display of the user interface.

Problem Details:

When inspecting the page in the browser, I see several 404 errors for CSS and JS files. Here are some excerpts from the errors:

• djangojs.0f66acafc573.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
• lms-style-vendor.68e48093f5dd.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
• logo.b6c374d66d57.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Ingress Configuration:

Here is the current Ingress configuration for the application:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: example
  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: /static/(.*)
        pathType: Prefix
        backend:
          service:
            name: lms
            port:
              number: 8000
      - path: /cms(/|$)(.*)
        pathType: Prefix
        backend:
          service:
            name: cms
            port:
              number: 8000
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: example-static
  annotations:
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    nginx.ingress.kubernetes.io/rewrite-target: /static/$2
spec:
  ingressClassName: nginx
  rules:
  - http:
      paths:
      - path: /static(/|$)(.*)
        pathType: Prefix
        backend:
          service:
            name: lms
            port: 
              number: 8000

Observations:

• CSS and JS files are marked as not found (404).
• The Ingress configuration seems correct for handling /static/ and /cms/ paths.
• Images and other static resources are also affected.

Questions:

1. Does the Ingress configuration look correct for serving static files?
2. Are there any additional annotations or settings needed to ensure proper loading of CSS and JS files?
3. What are some troubleshooting steps to diagnose and resolve this issue?

Thank you for your assistance!