My Django admin page doesn't utilize the CSS files after installing and configuring whitenoise

[reswob]

My Settings.py looks like this

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_ROOT = BASE_DIR / "staticfiles"
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"

Whitenoise ran fine and copied all the files into staticfiles; however admin page still wont use the styling correctly like it can’t see the admin folder in staticfiles and its contents.

(venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:~/cquence# ls -la
total 288
drwxr-xr-x 13 root root   4096 Sep  9 23:58 .
drwx------ 10 root root   4096 Sep  9 23:56 ..
drwxr-xr-x  4 root root   4096 Jul 31 00:27 account
drwxr-xr-x  3 root root   4096 Sep  9 23:56 config
-rw-r--r--  1 root root 233472 Sep  9 23:58 db.sqlite3
drwxr-xr-x  5 root root   4096 Sep  9 23:12 djangopaypal
-rwxr-xr-x  1 root root    662 Mar 14 16:49 manage.py
drwxr-xr-x  4 root root   4096 Jul 31 00:28 polls
drwxr-xr-x  7 root root   4096 Jul 25 22:33 productionfiles
drwxr-xr-x  7 root root   4096 Sep  5 11:50 registration
drwxr-xr-x  2 root root   4096 Sep  9 23:32 static
drwxr-xr-x  7 root root   4096 Sep  9 23:48 staticfiles
drwxr-xr-x  5 root root   4096 Sep  9 17:41 stripe_demo
drwxr-xr-x  5 root root   4096 Mar 14 16:46 venv
drwxr-xr-x  5 root root   4096 Jul 31 00:27 web
(venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:~/cquence# find staticfiles/ -type f | wc -l
594
(venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:~/cquence# ls -la staticfiles/
total 48
drwxr-xr-x  7 root root  4096 Sep  9 23:48 .
drwxr-xr-x 13 root root  4096 Sep  9 23:58 ..
drwxr-xr-x  5 root root  4096 Sep  9 23:32 admin
-rw-r--r--  1 root root    64 Sep  9 23:48 cquence.045af5b26e4a.css
-rw-r--r--  1 root root    64 Sep  9 23:32 cquence.css
drwxr-xr-x  2 root root  4096 Sep  9 23:34 css
drwxr-xr-x  2 root root  4096 Sep  9 23:32 fonts
drwxr-xr-x  2 root root  4096 Sep  9 23:32 images
drwxr-xr-x  2 root root  4096 Sep  9 23:32 js
-rw-r--r--  1 root root 10322 Sep  9 23:48 staticfiles.json

(venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:~/cquence# ./manage.py collectstatic

You have requested to collect static files at the destination
location as specified in your settings:

    /root/cquence/staticfiles

This will overwrite existing files!
Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel: yes

0 static files copied to '/root/cquence/staticfiles', 127 unmodified, 352 post-processed.
(venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:~/cquence#

I tried collecting staticfiles but the admin page is still broken

 (venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:/etc/nginx/sites-enabled# cat cquence
server {
    listen 80;
    server_name ;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /root/cquence;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
}
(venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:/etc/nginx/sites-enabled#```

I keep getting no CSS loading in my admin page.
![Screenshot 2024-09-09 170059|690x449](upload://5X7P2YgwkUZZwxnIHU6tjRUFQdI.png)
![Screenshot 2024-09-09 170059|690x449](upload://5X7P2YgwkUZZwxnIHU6tjRUFQdI.png)

[white-seolpyo]

Is debug mode true?

What does nginx error message output?

are you sure run collectstatic?

[reswob]

Thank you for the suggestion. So I got it working, but I would really like to know why I had to take the steps I took in order to fix it. I first noticed in my /var/log/nginx/error.log I had a lot of permission-denied errors.

2024/09/10 05:10:18 [error] 4574#4574: *365 open() "/root/cquence/static/admin/js/theme.ab270f56bb9c.js" failed (13: Permission denied), client: http://localhost:8000/admin/, server: http://localhost:8000/admin/, request: "GET /static/admin/js/theme.ab270f56bb9c.js Heferrer: "http://localhost:8000/admin/

So that led me to believe I needed to chmod all my static files which I set to 777 and changed the ownership to www-data based on something I saw on another site. That made the admin start working with debug=False. Then it broke again when I set debug= True.

In order to fix that I had to change this code

#if DEBUG:
#    STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
#else:
#    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

To this

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

And finally I had to change the default

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

To this

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

I would really like to know how this is all supposed to work and I can’t for the life of me understand why admin static files work fine with the default setup and then when you magically run whitenoise and collectstatic, that all stops working and you have to change permissions and have to change the BASE_DIR, none of those steps are in the setup documentation I looked up prior to installing whitenoise.

[KenWhitesell]

You’re actually mixing up a couple of concepts here.

By having:

@reswob

    location /static/ {
        root /root/cquence;
    }

You’re looking to have nginx configured to serve your static files, not whitenoise.

@reswob

Then it broke again when I set debug= True.

This is an indication of a misconfiguration.

If you’ve got everything else correct, all requests for static files would be resolved before Django even sees them. Changing the debug setting shouldn’t matter at all as far as static files are concerned.

But, the settings you have here are inconsistent - and to some degree potentially dangerous.

Serving files from your home directory is never a good idea.

Also, your STATIC_ROOT needs to match what nginx is configured to serve. The STATIC_ROOT setting tells Django where the collectstatic command is going to copy your static files. That should be the location where nginx is going to serve them from. You then need to configure nginx to serve URLs starting with STATIC_URL from STATIC_ROOT.

You should have something like:

@reswob

STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_ROOT = "/var/www/staticfiles"

with

@reswob

    location /static/ {
        root /var/www/staticfiles/;
    }

Notice now STATIC_URL corresponds to the location directive and STATIC_ROOT corresponds to the nginx root directive.

(And yes, if nginx is serving the static files, nginx needs permission to read those files.)

[white-seolpyo]

As far as I know, staticfiles are meant to be used in debug mode.

if DEBUG:
    STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
else:
    STATICFILES_DIRS = []
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')
    # Because you have set "location /static/ { root /root/cquence; }", not "location /staticfiles/".

And run collectstatic.(must be set DEBUG = False)

Additionally, BASE_DIR must point to the path where manage.py is located.(maybe /root/cquence)
Why the sudden change?

To solve the problem of www-data not having permission, it is recommended to add www-data to the group and then adjust the group permissions.

nginx Permission Denied 문제 해결방법

[reswob]

Thank you very much for the detailed response.

[reswob]

Thank you very much .