static files don't work with NGINX

Using Django Deployment
1

Hi everybody,

I clone my project on server ubuntu 22.04 from digitalocean and then I followed all the steps to configure django with postgresql, gunicorn and nginx. Finally when I open mi domain on chrome, it doesn’t show all the static files.

This is my settings.py

DEBUG = False

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

#STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATICFILES_FINDERS=[
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]

nginx file:

server {
    server_name 159.203.14.228 bearcreektechnology.com www.bearcreektechnology.com;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/bearcry/bcmdir;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/bearcreektechnology.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/bearcreektechnology.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
    if ($host = www.bearcreektechnology.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    if ($host = bearcreektechnology.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80;
    server_name bearcreektechnology.com www.bearcreektechnology.com;
    return 404; # managed by Certbot
}

I run python3 manage.py collectstatic and reset gunicorn and nginx but static files don’t work.
Any idea ?

2

This is one common source of problems. Having your static files in your home directory is not a good practice. You want your static files to be located in an areas generally and typically available to nginx - something like /var/www/static or /var/www/project/static depending upon whether you’re running multiple applications in this instance.

Other things to check are to verify that collectstatic has copied the files in the right directory structure to the right target and verifying that your references to those static files are coded properly using the static tag in your templates. (This is particularly useful in those cases where some files work and some don’t.)

1 Like
3

Hello I am having the same issue here, I have tried everything I have found online. The only thing loading is the HTML. I was running it on my dev PC with whitenoise, DEBUG disabled, everything works properly. Then I uploaded it to a Ubuntu server on the cloud and configured it with gunicorn and nginx. The website runs, just not loading the images, css and js files (static files). I don’t know what else to do.

in the ubuntu VPS
Static files are living at /var/www/site/static/website

Ran the collectstatic and moved all static files to the above location

(env) ubuntu@localhost:~$ python project/manage.py collectstatic

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

/var/www/site/static

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

Type ‘yes’ to continue, or ‘no’ to cancel: yes

125 static files copied to ‘/var/www/site/static’.

my static tag in the template
{% load static %} at the begining
ex: href=“{% static ‘website/images/logo.png’ %}”

settings.py
STATIC_URL = ‘/static/’
STATIC_ROOT = ‘/var/www/site/static/’

my nginx config for this site
server {
listen 80;

server_name website.com;

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

location /static/ {
root /var/www/site/static/website/;
}

location /media/ {
root /var/www/site/static/website/;
}

location / {

include proxy_params;

proxy_pass http://unix:/run/site.sock;

}

}

4

Welcome! We’ll be more than happy to help you try to resolve this. However, this particular topic is over a year old and has been marked as solved. I suggest you open a new topic for this issue - it’s likely to attract more attention that way.

Also, when you do, please enclose the text of your code and configuration files between lines of three backtick - ` characters. This means you’ll have a line of ```, then the code (or conf file), then another line of ```.