Django 1.11 + Amazon S3 for collectstatic

Question

I just tried serving my static files in production using Amazon S3 on eu-central-1. I'm using Elastic Beanstalk and Django 1.11. Furthermore I use boto3 and the package Django Storages for it. My problem is that even though collectstatic worked and the files are now in the S3 bucket, the Django Admin still doesn't use static files.

For context, let me give you the settings I used:

import os

from django.core.exceptions import ImproperlyConfigured

# Static files (CSS, JavaScript, Images)

STATICFILES_DIRS = [BASE_DIR.parent / 'myproject' / 'static']

INSTALLED_APPS += ['storages', ]


def get_env_variable(var_name):
    """Get the environment variable or return exception."""
    try:
        return os.environ[var_name]
    except KeyError:
        error_msg = 'Set the {} environment variable'.format(var_name)
        raise ImproperlyConfigured(error_msg)


AWS_ACCESS_KEY_ID = get_env_variable("ACCESS_KEY_ID")
AWS_SECRET_ACCESS_KEY = get_env_variable("SECRET_ACCESS_KEY")
AWS_S3_SIGNATURE_VERSION = 's3v4'
AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400',
}
AWS_STORAGE_BUCKET_NAME = get_env_variable("BUCKET_NAME")
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com/' % AWS_STORAGE_BUCKET_NAME
AWS_LOCATION = 'static'

STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)
STATICFILES_STORAGE = 'config.settings.aws.utils.StaticRootS3BotoStorage'

DEFAULT_FILE_STORAGE = 'config.settings.aws.utils.MediaRootS3BotoStorage'
MEDIA_URL = 'https://%s.s3.amazonaws.com/media/' % AWS_STORAGE_BUCKET_NAME
MEDIA_ROOT = MEDIA_URL

ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'
S3_USE_SIGV4 = True

Those are the settings, and here are the utils functions I wrote:

from storages.backends.s3boto3 import S3Boto3Storage


def StaticRootS3BotoStorage(): return S3Boto3Storage(location='static')


def MediaRootS3BotoStorage(): return S3Boto3Storage(location='media')

Does anyone have an idea what went wrong? Why did collectstatic work, but Django Admin doesn't apply the css and the javascript?

Have you configured your S3 access policy? Open dev tools and look if there are 404 or 403 errors on URLs in S3? If you have correct links in HTML in browser then you have setup Django correctly and the issue with AWS configuration. Follow caktusgroup.com/blog/2014/11/10/…, it is a bit outdated but still provides great reference for AWS configuration. Also see CORS section so you won't have problems with fonts and some other things. — Alexandr Tatarinov
@AlexandrTatarinov "Open dev tools and look if there are 404 or 403 errors on URLs in S3?" How do I do that? Do you mean the logs for my ec2 instance in my elastic beanstalk console? There are no 404 or 403 errors. If you mean dev tools for the bucket I have no idea how to access them. — J. Hesters
@AlexandrTatarinov It does return a 403 error! But in my settings I did set the access key and secret access key. Furthermore collectstatic did work! So why would the actual website not have access? — J. Hesters
@AlexandrTatarinov You damn god! Thank you, I never would've tried to use the regular chrome dev console for debugging. Thanks to that I found out that I just had a '/' too much. Will post an answer for this, and thank you very much for your help! — J. Hesters

J. Hesters J. Hesters · Accepted Answer · 2018-05-22T08:16:03

I just hadd a '/' too much.

I just corrected the following line:

AWS_S3_CUSTOM_DOMAIN = '%s.s3.eu-central-1.amazonaws.com' % AWS_STORAGE_BUCKET_NAME

And now it works.

Django 1.11 + Amazon S3 for collectstatic

1 Answers