[Bug] Mesmo problema na renderização do css

Olá! Entendo que você está tendo problemas com a renderização do CSS no Django. Vamos tentar algumas soluções que podem ajudar.

Primeiro, certifique-se de que os arquivos estáticos estão sendo coletados corretamente. Você pode fazer isso executando o comando python manage.py collectstatic no terminal. Este comando coleta todos os arquivos estáticos da sua aplicação e os coloca no local especificado pela variável STATIC_ROOT no seu arquivo settings.py.

Outra coisa que você pode verificar é se a URL dos arquivos estáticos está correta. No seu arquivo settings.py, a variável STATIC_URL deve apontar para o local onde os arquivos estáticos estão sendo armazenados. No seu caso, parece que você está usando o AWS S3 para armazenar seus arquivos estáticos, então a STATIC_URL deve ser algo como https://{AWS_S3_CUSTOM_DOMAIN}/static/.

Além disso, verifique se o caminho para os arquivos CSS está correto no seu template. Por exemplo, se você tem um arquivo CSS chamado style.css na pasta static/styles/, você deve referenciá-lo no seu template usando a tag {% static 'styles/style.css' %}.

Por último, certifique-se de que o middleware django.middleware.security.SecurityMiddleware e whitenoise.middleware.WhiteNoiseMiddleware estão adicionados corretamente no arquivo settings.py. Eles devem estar na lista MIDDLEWARE e whitenoise.middleware.WhiteNoiseMiddleware deve estar logo após o django.middleware.security.SecurityMiddleware.

Espero que essas sugestões possam te ajudar a resolver o problema. Lembre-se, essas são apenas sugestões e podem não resolver completamente o seu problema, pois pode haver outros fatores envolvidos que não estão claros a partir da descrição do seu problema. Espero ter ajudado e bons estudos!

Infelizmente nenhuma das tentativas foram bem sucedidas...estava tudo funcionando corretamente, porém ao implementar o AWS parou. Caso houver mais tentativas e puder envia-las, ficarei grato. OBS: escrevi space errado propositalmente (ficando "espace")

Também chequei aqueles que estão recebendo os arquivos estáticos: Aparentemente correto...na tentativa de rodar o "python manage.py collectstatic" obtive o seguinte resultado:

Ao configurar o AWS S3 minha aplicação tinha perdido o CSS. Voltou a funcionar após rodar o comando python manage.py collectstatic

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!

O meu retorna esse erro sempre, CSS nao esta funcionando de forma alguma.

(.venv) C:\Users\carlo\OneDrive\Documentos\Work\Prog\Alura\Alura_Space>python manage.py collectstatic

You have requested to collect static files at the destination location as specified in your settings.

This will overwrite existing files! Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel: yes Traceback (most recent call last): File "C:\Users\carlo\OneDrive\Documentos\Work\Prog\Alura\Alura_Space\manage.py", line 22, in main() File "C:\Users\carlo\OneDrive\Documentos\Work\Prog\Alura\Alura_Space\manage.py", line 18, in main execute_from_command_line(sys.argv) File "C:\Python311\Lib\site-packages\django\core\management_init.py", line 442, in execute_from_command_line utility.execute() File "C:\Python311\Lib\site-packages\django\core\management_init.py", line 436, in execute self.fetch_command(subcommand).run_from_argv(self.argv) File "C:\Python311\Lib\site-packages\django\core\management\base.py", line 412, in run_from_argv self.execute(*args, **cmd_options) File "C:\Python311\Lib\site-packages\django\core\management\base.py", line 458, in execute output = self.handle(*args, **options) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Python311\Lib\site-packages\django\contrib\staticfiles\management\commands\collectstatic.py", line 209, in handle collected = self.collect() ^^^^^^^^^^^^^^ File "C:\Python311\Lib\site-packages\django\contrib\staticfiles\management\commands\collectstatic.py", line 135, in collect handler(path, prefixed_path, storage) File "C:\Python311\Lib\site-packages\django\contrib\staticfiles\management\commands\collectstatic.py", line 368, in copy_file if not self.delete_file(path, prefixed_path, source_storage): ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Python311\Lib\site-packages\django\contrib\staticfiles\management\commands\collectstatic.py", line 278, in delete_file if self.storage.exists(prefixed_path): ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Python311\Lib\site-packages\storages\backends\s3.py", line 500, in exists self.connection.meta.client.head_object(Bucket=self.bucket_name, Key=name) File "C:\Python311\Lib\site-packages\botocore\client.py", line 535, in _api_call return self._make_api_call(operation_name, kwargs) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Python311\Lib\site-packages\botocore\client.py", line 980, in _make_api_call raise error_class(parsed_response, operation_name) botocore.exceptions.ClientError: An error occurred (403) when calling the HeadObject operation: Forbidden

Olá, Carlos! Você ja alterou seu código para o novo padrão do Django 4.2? Se já, eu recomendaria que você checasse as permissões do seu bucket e do usuário IAM, em último caso até apagasse e os criasse novamente. Pois sua mensagem de erro indica falta de permissões adequadas para acessar os objetos no bucket AWS.