Django Admin CSS Not Loading in Production Even Though Static Files Are Served (200 OK)

I'm experiencing an issue where my Django admin panel appears unstyled on my production server, even though all static files are being served correctly. The admin HTML includes proper <link> tags, and I can confirm that the CSS files are accessible via direct URL.

Environment Details:

• Production: Azure VM
• Django: latest
• Application Server: Gunicorn
• Web Server: nginx on Ubuntu
• Middleware: Removed WhiteNoise (to avoid conflicts)
• Static Files: Collected using python manage.py collectstatic --noinput

Note: I am using same azure VM for my django backend and react frontend

What I’ve Done/Verified:

1. Django Settings:

• Set STATIC_URL and configured STATIC_ROOT

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

2. Nginx Configuration:

server {
    listen 80 default_server;
    server_name _;

    client_max_body_size 200M;

    # Favicon
    location = /favicon.ico {
        access_log off;
        log_not_found off;
    }

    location /static/ {
      alias /home/ubuntu/example/staticfiles/;
      autoindex on;
    }

    # Serve media files
    location /media/ {
        root /home/ubuntu/example;
        autoindex on;
    }

    # Proxy API requests to Django backend
    location /api/ {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }

    # Proxy Django admin requests to the Django backend
    location /admin/ {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }

    # Serve the React frontend from its build output
    location / {
       root /home/ubuntu/frontend/dist;  # Adjust path if needed
       try_files $uri /index.html;
    }
}

3. Static Files Verification Running

curl -I https://skumapper.x-demand.com/static/admin/css/base.css

returns a 200 OK with the proper content-type (text/css).

The Django admin login page’s HTML includes:

<link rel="stylesheet" href="/static/admin/css/base.css">

The browser network tab shows that all required CSS and JS files are returning a 200 status

4. Additional Checks:

• I cleared the browser cache and even tested in incognito mode.
• I verified file permissions on /home/ubuntu/example/staticfiles/ (owned by www-data, with permissions set to 755).
• I confirmed that collectstatic has placed all the necessary files in the staticfiles directory.

The Issue: Despite all static files being accessible and the links in the admin page HTML looking correct, the Django admin panel remains unstyled. There are no 404 errors or mixed-content warnings in the browser console.

Questions:

• What might cause the Django admin CSS (and potentially other static assets) to not apply even though they’re being served properly?
• Are there any potential caching or path issues (such as with memory cache) that could cause the admin interface to remain unstyled?
• What additional debugging steps can I take to isolate the problem?

Any help or insights would be greatly appreciated!

Вернуться на верх