How to serve Static Files and Media Files of your Django app in Production using NGINX

Introduction

Setting up Django Applications is tedious and challenging for a beginner. Moreover, you must have come across various StackOverflow answers, blogs, and other informational websites stating that Static files must be served via your webserver and not your application server. You must be surfing around trying to grasp the exact step by step way on how to serve static and media files for your django app. In this article we will show you 

Follow this article if you have questions or phrases similar to these: Why is my Django admin panel is missing CSS files when DEBUG=True? Why there is no style in my Django app? Error 404 style.css not found in Django. Where did all my uploaded files go from my Django App? Or if you google static files in django 404

To solve all the above problems follow these steps.

Step 1: Activate your virtual environment.

1. source <path_to_your_virtual_environment>/env/bin/activate

Step 2: Run collectstatic from your project directory.

1. cd /<your_project_directory_path>

2. python manage.py collectstatic

Once you complete the above steps your project directory will have a new folder created whose name will be similar to what you have provided in your settings.py file for STATIC_ROOT and MEDIA_ROOT value. Follow our Django Deployment article if you don't know how to do a basic Django deployment on a VPS. In our case, it is like this:

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'web/static'),
]
STATIC_ROOT =  os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

So by running collectstatic command on our Django project based on these settings will create a directory named "static" and "media".

Step 3: Access your NGINX webserver's config files.

1. sudo nano /etc/nginx/sites-enabled/<your_config_file_name>.conf

Step 4: Add a location in your config file.

location /static/{
    autoindex on;
    alias /<your_path_to the_static_folder>/;
}

location /media/{
    autoindex on;
    alias /<your_path_to the_media_folder>/;
}

Step 5: Reload your NGINX server and it's done.

1. sudo systemctl reload nginx

Conclusion

Hope you found this article helpful, please do share it on your social media, it will allow us to reach out to more people who are in need for help.