how to make Nginx load staticfiles from a Django site

I deployed my django site with nginx, but my staticfiles such as css,js or media files are not being loaded, therefore I need help configurating it

my site where the static files are not being loaded

In web console i'm getting this error:

16Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

my settings.py:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


STATIC_URL = '/static/'
STATIC_ROOT = 'deploystatic'
STATICFILES_DIRS = [BASE_DIR / 'static']


MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'


# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

my configuration in nano /etc/nginx/sites-available/myproject

server {
    listen 80;
    server_name ecommerce.jamelaumn.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name ecommerce.jamelaumn.com;
    ssl_certificate something/fullchain.pem;
    ssl_certificate_key somethingblablabla/privkey.pem;


    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

my nginx.conf probably everything there is default configuration

Solution

First of all run this command:

python manage.py collectstatic

and then update your nginx file like this:

server {
    listen 80;
    server_name ecommerce.jamelaumn.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name ecommerce.jamelaumn.com;
    ssl_certificate something/fullchain.pem;
    ssl_certificate_key somethingblablabla/privkey.pem;

    location /static/ {
        alias /path/to/your/staticfiles/;
    }

    location /media/ {
        alias /path/to/your/mediafiles/;
    }

    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Make sure to replace /path/to/your/staticfiles/ and /path/to/your/mediafiles/ with the actual paths to your static files directory and media files directory, respectively. To test if your nginx works properly:

sudo nginx -t

and if it is fine then restart the nginx to apply the changes:

sudo service nginx restart

hope it helps ...