Django efficient implementation of Amazon s3 and Cloudfront CDN for faster loading.

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.

Posted On 22 January 2016 By MicroPyramid


Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
How to customize Django Oscar Models, Views and URL's

In order to customize models, views and urls, you need to fork an Oscar core app in which model/view resides. Then you should be able ...

Continue Reading...
Sending emails using sendgrid on heroku for a Django App

Integrate Sendgrid API to your Heroku app to deliver simplified emails like any notification emails, user signups etc.

Continue Reading...
Understanding Django Permissions And Groups

Django comes with a simple permissions system. It provides a way to assign permissions to specific users and groups of users. We can have permissions ...

Continue Reading...
open source packages

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties