Относительные пути CSS Django не работают в Amazon S3 - PullRequest
0 голосов
/ 30 апреля 2018

В основном я использую S3 для своих статических файлов для веб-сайта. На большинство изображений ссылаются в шаблонах, но я замечаю, что каждое изображение или файл, на которые есть ссылки, (особенно шрифты) не работают.

Я сделал все файлы общедоступными в S3 и могу обращаться к ним с помощью публичных ссылок

Это мой setting.py

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'app/static'),
]

AWS_ACCESS_KEY_ID = ''
AWS_SECRET_ACCESS_KEY = ''
AWS_STORAGE_BUCKET_NAME = 'abc-bucket'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME

AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400',
}

AWS_LOCATION = 'static'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATIC_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)

DEFAULT_FILE_STORAGE = 'app.storage_backends.MediaStorage'

Я удалил доступ к AWS и секретные ключи для этого поста.

Файл fonts.css содержит следующее:

@font-face {
    font-family: 'rt-icons-2';
    src:url('../../fonts/rt-icons-23dab.eot?wz19bt');
    src:url('../../fonts/rt-icons-2d41d.eot?#iefixwz19bt') format('embedded-opentype'),
        url('../../fonts/rt-icons-23dab.ttf?wz19bt') format('truetype'),
        url('../../fonts/rt-icons-23dab.woff?wz19bt') format('woff'),
        url('../../fonts/rt-icons-23dab.svg?wz19bt#rt-icons-2') format('svg');
    font-weight: normal;
    font-style: normal;
}

и структура папок AWS:

 static
 - content
   - css 
     - fonts.css
 - fonts
   - rt-icons-23dab.eot
   - rt-icons-2d41d.eot
   - rt-icons-23dab.ttf
   - rt-icons-23dab.woff
   - rt-icons-23dab.svg

Я знаю, что CSS работает, так как все стили в порядке, поэтому к fonts.css обращаются нормально, но относительные пути нарушены, и все значки шрифтов отсутствуют. Они работали нормально, пока я не запустил коллектор и перевел их на S3.

1 Ответ

0 голосов
/ 01 мая 2018

Нашел ответ здесь . Конфигурация CORS была проблемой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...