Wagtail admin icons disappear when running collectstatic and putting everything on S3

user_1502378 0
Viewed 829

I've been working locally and on my server and everything looks good. Then I configure django-storages to store static files and media on my S3 bucket. Everything works except for the icons/glyphicons on the admin interface. Instead of the nice pretty graphic icons, I see letters.

For example once you log in, you have the search bar on the left side. Normally you would see a looking glass in the search box. I lost the looking glass and now I just see a lowercase f.

My question is this. What do I search for to start debugging this? What wagtail file is collectstatic not collecting?

Steps to Reproduce

  1. Set up a wagtail site
  2. Set up a bucket on s3
  3. Install django-storages
  4. Configure django-storages to use your bucket
  5. ./manage.py collectstatic

Technical details

  • Python version: 3.5.2
  • Django version: 1.11.5
  • Wagtail version: 1.12.2
  • Browser version: firefox, chromium, chrome

selection_031

wagtail python-3.x amazon-s3 django
4 Answers

This happens because Wagtail uses an icon font, and current browsers don't allow loading fonts from remote domains unless they include valid CORS HTTP headers. You can configure the django-storages S3 backend to add the appropriate headers by adding the following lines to your settings file:

AWS_HEADERS = {
    'Access-Control-Allow-Origin': '*'
}

and re-running ./manage.py collectstatic. See https://github.com/wagtail/wagtail/issues/633#issuecomment-55935529 for some additional notes.

user_18535230

I ran into this issue too. Since v1.9 of django-storages, it has used boto3 instead of boto. The "AWS_HEADERS" fix by gasman does not work for boto3. However, setting these CORS rules in Amazon S3, which I found here, resolved the issue for me: 

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

As mentioned in the linked github response, it's probably best to update

<AllowedOrigin>*</AllowedOrigin>

to 

<AllowedOrigin>http://www.example.com</AllowedOrigin>

Here is the Amazon documentation for CORS settings.

user_124128440

I'm using wagtail==2.10.1 and django==3.1.1 and using Digital Ocean Spaces (DO version of AWS s3). I ran into this same problem but solutions did not work (it has been two years since this was posted after all...). I realized this was beacuse since the solution was posted, django-storages and boto3 have updated. The format for their config settings have changed.

So if you are using boto3 dependency with django-storage on wagtail, you can replace this solution from @gasman:

AWS_HEADERS = {
    'Access-Control-Allow-Origin': '*'
}

with this updated code:

AWS_S3_OBJECT_PARAMETERS = {
        'ACL':'public-read',
}

I understand that there may be security issues with having public-read, but this is what got it working for me.

user_103431820

I used wagtail==2.5.1 and django==2.2.1 static get from aws s3. And the issue was in credentials to boto s3. When I updated credentials and make manage.py collectstatic all static loaded and site work well))

user_89922670
Related