Проблема с загрузкой статических файлов и изображений с Amazon S3 в Django

# Amazon S3 Configuration
AWS_ACCESS_KEY_ID = "<your-access-key-id>"
AWS_SECRET_ACCESS_KEY = "<your-secret-access-key>"
AWS_STORAGE_BUCKET_NAME = "<your-bucket-name>"
AWS_S3_REGION_NAME = "us-east-2"
AWS_S3_CUSTOM_DOMAIN = f"https://{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com"

AWS_S3_OBJECT_PARAMETERS = {"CacheControl": "max-age=86400"}
AWS_S3_QUERYSTRING_AUTH = False

# STORAGES Configuration
STORAGES = {
    "default": {
        "BACKEND": "storages.backends.s3boto3.S3Boto3Storage",
            "OPTIONS": {
            "location": "media",  # Directory for media files
            "file_overwrite": False,  # Prevent overwriting files
        },
    },
    "staticfiles": {
        "BACKEND": "storages.backends.s3boto3.S3StaticStorage",
        "OPTIONS": {
            "location": "static",  # Directory for static files
        },
    },
 }

# Configuration during development
STATIC_URL = "/static/"  # URL for static files
STATICFILES_DIRS = [BASE_DIR / "config" / "static"]  # Directories for static files
STATIC_ROOT = BASE_DIR / "staticfiles"  # Root directory for collected static files

MEDIA_URL = "/media/"  # URL for media files
MEDIA_ROOT = os.path.join(BASE_DIR, "media")  # Root directory for media files

# S3 Configuration for production
if not DEBUG:
    STATIC_URL = f"{AWS_S3_CUSTOM_DOMAIN}/static/" 
    MEDIA_URL = f"{AWS_S3_CUSTOM_DOMAIN}/media/"

Использованная документация была взята с сайта https://django-storages.readthedocs.io/en/latest/backends/amazon-S3.html.

Я использую Django версии 5.1.4.

Хотя статические файлы (CSS, JS, активы) собираются корректно, при обращении к приложению верстка нарушается, не применяются стили и не загружаются изображения из папки static/assets.

Может ли кто-нибудь помочь мне решить эту проблему и убедиться, что статические файлы загружаются правильно в производственной среде?

Использованная документация была взята с сайта https://django-storages.readthedocs.io/en/latest/backends/amazon-S3.html.

Я использую Django версии 5.1.4.

Хотя статические файлы (CSS, JS, активы) собираются корректно, при обращении к приложению верстка нарушается, не применяются стили и не загружаются изображения из папки static/assets.

Может ли кто-нибудь помочь мне решить эту проблему и убедиться, что статические файлы загружаются правильно в производственной среде?

Мне удалось решить проблему, но я оставлю здесь вопрос с моим решением на случай, если кто-то столкнется с такой же проблемой:

Шаги для настройки сегмента S3:

Проверьте права доступа к вашему ведру:

  • Отключите все опции в разделе "Блокировать публичный доступ" (настройки корзины).

  • Добавьте следующую политику в свою корзину (замените your_bucket на ваше фактическое название корзины):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your_bucket/media/*"
        }
    ]
}

Конфигурация CORS (совместное использование ресурсов разных источников): Добавьте конфигурацию CORS, чтобы разрешить необходимый доступ:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST",
            "PUT",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Конфигурация в Django:

Вот необходимые настройки для интеграции S3 для хранения мультимедиа и обслуживания статических файлов через ваш сервер (например, PythonAnywhere):

# Amazon S3 configuration for media
AWS_ACCESS_KEY_ID = "your_access_key_id"
AWS_SECRET_ACCESS_KEY = "your_secret_access_key"
AWS_STORAGE_BUCKET_NAME = "your_bucket"
AWS_S3_REGION_NAME = "your_region"

AWS_S3_OBJECT_PARAMETERS = {"CacheControl": "max-age=86400"}
AWS_S3_QUERYSTRING_AUTH = False

# Storage configuration for S3 for media
DEFAULT_FILE_STORAGE = "storages.backends.s3boto3.S3Boto3Storage"
STATICFILES_STORAGE = "django.contrib.staticfiles.storage.StaticFilesStorage"

# Static and media directories
STATIC_URL = "/static/"
STATIC_ROOT = BASE_DIR / 'staticfiles'
STATICFILES_DIRS = [BASE_DIR / "config" / "static"]  # Static files folder on the server

# In production, serve static files locally and media through S3
if not DEBUG:
    STATIC_URL = "/static/"
    MEDIA_URL = f"https://{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com/media/"

При таких настройках статические файлы будут обслуживаться PythonAnywhere, в то время как медиафайлами будет управлять Amazon S3.

Моя проблема была вызвана переменной AWS_S3_CUSTOM_DOMAIN. Хотя я не смог точно определить причину ошибки, я подозреваю, что она связана с SSL-сертификатом. Мое предложение состоит в том, чтобы избежать настройки URL-адреса и оставить эту настройку AWS, позволив ей автоматически управлять доменом.

Вернуться на верх