Entrar Ainda não tem acesso?
3
respostas

[Bug] Bug: CSS nao renderiza

Referente ao curso Django: CRUD e persistência no S3, no capítulo Melhorando a persistência e atividade Fotografias no bucket

por Silas Inenami Matsumoto
| 28.4k xp | 5 posts

Ja tentei diversos metodos para solucionar este problema porem nenhum ate agora funcionou. 

# AWS Configuracao

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.console.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/5.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/'

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas
por Armano Barros Alves Junior
| 2136k xp | 4428 posts
Alura Scuba Team Monitor | Suporte Educacional

Olá Silas! Tudo bem?

Com esse trecho do arquivo "settings.py" não consigo identificar um grande problema que esteja causando esse conflito, então recomendo que compartilhe todo o seu projeto, usando o GitHub ou Drive do Google para que eu possa fazer testes.

Adiantando um ponto sobre o que você compartilhou, o trecho que compartilhei abaixo está diferente do que foi estabelecido em aula:

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'))
        },
    },
}

Deve ser possível que este seja o causador do problema, mas precisarei realizar testes para confirmar a minha hipótese.

Espero ter ajudado e bons estudos!

Fico no aguardo e à disposição
por Silas Inenami Matsumoto
| 28.4k xp | 5 posts

Repositório

por Armano Barros Alves Junior
| 2136k xp | 4428 posts
Alura Scuba Team Monitor | Suporte Educacional

Bom dia, Silas! Joia?

Fazendo testes com o código que você compartilhou, identifiquei que o problema estava localizando em duas configurações do Bucket S3 no seu arquivo settings.py.

  1. O trecho que comentei acima que cria um objeto Storeges com os atributos default e staticfiles pode apresentar problemas em alguns casos, então recomendo que altere para a mesma estrutura utilizada no curso.

    Então, altere disso:

        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'))
        },
    },
}

    Para isso:

    DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

STATICFILES_STORAGE = 'storages.backends.s3boto3.S3StaticStorage'

  2. Agora o outro trecho que precisa de ajuste é o AWS_S3_CUSTOM_DOMAIN. Você está utilizando um complemento diferente, e ele está causando um conflito no acesso do Bucket que foi criado.

    Altere então isso:

    AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.sa-east-1.console.amazonaws.com'

    Para que fique assim:

    AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'

  3. Por fim, antes de iniciar o projeto novamente, rode o comando python manage.py collectstatic para enviar a sua pasta "static" para o Bucket criado no AWS.

Ao seguir essas alterações e fazer o envio da pasta, o seu projeto deve carregar o estilo da página de forma correta.

Espero ter solucionado o problema!