Nginx unable to server static and media images

Heya,

To anyone stumbling upon this, here is a full revisited answer.

To configure Nginx to serve static files and media files for a Django web application, you’ll need to make sure your Django project is correctly configured for serving static and media files, and then set up Nginx to handle these files efficiently. Here are the steps to achieve this:

1. Configure Django for Static and Media Files: In your Django project’s settings (typically found in the settings.py file), make sure you have the following configurations set correctly:

# settings.py

# Define the URL path for static files (CSS, JavaScript, etc.).
STATIC_URL = '/static/'

# Define the absolute filesystem path to the directory that will hold your static files.
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

# Define the URL path for media files (user-uploaded files).
MEDIA_URL = '/media/'

# Define the absolute filesystem path to the directory where media files will be uploaded.
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Ensure that you’ve also added the following line to your project’s urls.py to serve media files during development:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

2. Install Nginx: If you haven’t already, install Nginx on your server:

sudo apt-get update
sudo apt-get install nginx

3. Create an Nginx Configuration File for Your Django Project: Create an Nginx configuration file for your Django project in the /etc/nginx/sites-available/ directory. Replace your_project_name with a meaningful name for your project:

sudo nano /etc/nginx/sites-available/your_project_name

server {
    listen 80;
    server_name your_domain.com; # Replace with your domain or IP address

    location /static/ {
        alias /path/to/your/static/root; # Replace with the actual path to your STATIC_ROOT
    }

    location /media/ {
        alias /path/to/your/media/root; # Replace with the actual path to your MEDIA_ROOT
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/path/to/your/project.sock; # Replace with your project's Unix socket
    }

    location /favicon.ico {
        alias /path/to/your/static/root/favicon.ico; # Replace with the path to your favicon
    }

    location /robots.txt {
        alias /path/to/your/static/root/robots.txt; # Replace with the path to your robots.txt file
    }

    error_page 500 502 503 504 /static/500.html;
}

Save the file and exit the text editor.

4. Enable the Nginx Configuration and Test: Create a symbolic link to enable the site configuration and then test the Nginx configuration:

sudo ln -s /etc/nginx/sites-available/your_project_name /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

5. 1. Adjust Permissions: Make sure that the Nginx user (www-data on Ubuntu) has read access to your static and media directories. You can adjust permissions with the following commands:

sudo chown -R www-data:www-data /path/to/your/static/root 
sudo chown -R www-data:www-data /path/to/your/media/root

That’s it! Nginx should now be correctly configured to serve your Django project’s static and media files. Make sure to replace placeholders like your_domain.com, /path/to/your/static/root, /path/to/your/media/root, and /path/to/your/project.sock with your actual values.