Django by default to store the files in your local file system. To make your files load quickly and secure we need to go for any third party storage systems. AWS s3 is one of the storage service for the Internet. It is designed to make web-scale computing easier for developers. django has a package called django-storages which can be used to store the files in the amazon s3. and serve them from its cloud front service.

Implementing django-storages with amazon s3 as storage service in your django application:

To implment django-storages in your django application you need to follow the following steps.

1. Install django-storages: We can install django-storages with the following command.

pip install django-storages

2. Keep storages in your installed apps.

INSTALLED_APPS = (
    ...
    'storages',
    ...
)

3. Change your DEFAULT_FILE_STORAGE setting in your settings.py file: Django by default comes with a setting called DEFAULT_FILE_STORAGE which deals with file storage. By default its value is 'django.core.files.storage.FileSystemStorage'. By keeping this value to DEFAULT_FILE_STORAGE, django, by default tries to store the files on your local machine. To store your files in amazon s3 just change that value to 'storages.backends.s3boto3.S3Boto3Storage'

DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

4. Configure your AWS ACCESS_KEY and SECRET_KEY with the following settings:

AWS_ACCESS_KEY_ID = "your aws access key"
AWS_SECRET_ACCESS_KEY = "your aws secret key"

5. Keep your bucket in the settings file: A bucket is a logical unit of storage in Amazon Web Services (AWS) object storage service, Simple Storage Solution S3. Buckets are used to store objects, which consist of data and metadata that describes the data. Create a bucket on AWS S3 web console and give that name in your settings file.

AWS_STORAGE_BUCKET_NAME = "your bucket name"

6. Keep file permissions with AWS_DEFAULT_ACL setting: There are some permissions for every file that is stored in your S3 bucket. There are 2 permissions in particular which will be used by default. They are private and public-read. To make a file accessable to only admin we have to make it private, If we make the file permission as public-read it can be accessable to public with read permissions.

AWS_DEFAULT_ACL = "public-read" # to make sure all your files gives read only access to the files

7. Keep your file specific meta information with AWS_HEADERS: This setting will be useful in keeping the file's meta information like Expires and Cache-Control which will play major role in the google page speed score. In fixing the Leverage Browser Caching issue we have to keep Cache-Control setting value and keep Expires value in fixing the keep expiration header issue in your google page speed validator.

AWS_HEADERS = {
    'Expires': 'Thu, 15 Apr 2010 20:00:00 GMT',
    'Cache-Control': 'max-age=86400',
}

By keeping all the above settings, we are ready to use the AWS S3 as a storage service for all the files in our project. But to make our files serve from cloud front we have keep other settings that relates to cloudfront in our application .

What is cloud front?

Amazon CloudFront is a web service that speeds up distribution of your static and dynamic web content, such as .html, .css, .php, and image files, to your users. CloudFront delivers your content through a worldwide network of data centers called edge locations. When a user requests content that you're serving with CloudFront, the user is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance. 

To make sure our files served from cloudfront we have to keep the following settings in our application.

CLOUDFRONT_DOMAIN = "your cloudfornt domain"
CLOUDFRONT_ID = "your cloud front id"
AWS_S3_CUSTOM_DOMAIN = "same as your cloud front domain" # to make sure the url that the files are served from this domain

Thats all you have to do, now all the files that the user uploads or the static files will be stored in the S3 bucket that you gave and served from cloudfront. To make your static files load from cloudfront, first you need to do python manage.py collectstatic, using which all your static CSS and JS files will be stored in your S3 bucket under the folder of STATICFILES_DIR setting you gave.