1
resposta

[Solução] Problema de renderização do CSS

O problema é que o Django, a partir da versão 4.2, atualizou a forma de configurar o S3 pelo django storages (https://django-storages.readthedocs.io/en/latest/backends/amazon-S3.html), tornando algumas coisas ditas pelo instrutor, desatualizadas. Outro problema é a exposição das chaves da AWS, elas devem ser inseridas no arquivo .env junto com a secret key do Django.

SECRET_KEY='sua-secret-key-do-django'
AWS_ACCESS_KEY_ID='sua-access-key'
AWS_SECRET_ACCESS_KEY='sua-secret-access-key'
AWS_STORAGE_BUCKET_NAME='seu-bucket-name'

E desta forma inserindo 'str(os.getenv( ' antes da key

Seu código em settings.py, deve ficar assim:

# settings.py

# ... outras configurações ...

# AWS Settings

AWS_ACCESS_KEY_ID = str(os.getenv('AWS_ACCESS_KEY_ID'))
AWS_SECRET_ACCESS_KEY = str(os.getenv('AWS_SECRET_ACCESS_KEY'))
AWS_STORAGE_BUCKET_NAME = str(os.getenv('AWS_STORAGE_BUCKET_NAME'))
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.sa-east-1.amazonaws.com'
AWS_DEFAULT_ACL = 'public-read'
AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400'
}
AWS_LOCATION = 'static'
AWS_QUERYSTRING_AUTH = False
AWS_HEADERS = {
    'Access-Control-Allow-Origin': '*',
}

STORAGES = {
    "default": {
        "BACKEND": "storages.backends.s3.S3Storage",
        "OPTIONS": {
            "access_key": str(os.getenv('AWS_ACCESS_KEY_ID')),
            "secret_key": str(os.getenv('AWS_SECRET_ACCESS_KEY')),
            "bucket_name": str(os.getenv('AWS_STORAGE_BUCKET_NAME'))
        },
    },
    "staticfiles": {
        "BACKEND": "storages.backends.s3.S3Storage",
        "OPTIONS": {
            "access_key": str(os.getenv('AWS_ACCESS_KEY_ID')),
            "secret_key": str(os.getenv('AWS_SECRET_ACCESS_KEY')),
            "bucket_name": str(os.getenv('AWS_STORAGE_BUCKET_NAME'))
        },
    },
}


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/

STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'setup/static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

# Media
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/media/'

# ... outras configurações ...

Outra informação importante, que vai impedir o CSS de renderizar, é que você precisa incluir o protocolo ‘https://’ antes de STATIC_URL e MEDIA_URL.

Espero ter ajudado!

1 resposta

Oi Igor, tudo bem?

Muito obrigada por compartilhar sua solução! Isso é muito valioso para a comunidade e pode ajudar muitas pessoas que estão enfrentando o mesmo problema.

Sua solução parece estar correta, você fez um bom trabalho ao atualizar as configurações do Django para a versão 4.2 e ao usar o arquivo .env para proteger suas chaves da AWS. Isso é uma prática de segurança muito importante.

Além disso, você também fez um bom trabalho ao atualizar o código em settings.py e ao adicionar o protocolo 'https://' antes de STATIC_URL e MEDIA_URL. Isso é essencial para garantir que o CSS seja renderizado corretamente.

Parabéns por contribuir com a comunidade.

Um abraço e bons estudos.