Gerenciando Arquivos Estáticos no Django: Um Guia Completo

Neste tutorial, examinaremos o que são arquivos estáticos no Django, os benefícios de gerenciá-los de forma eficiente, seu propósito em aplicativos web e configuraremos um projeto de demonstração para ilustrar como gerenciar e servir arquivos estáticos usando diferentes métodos e ferramentas.

Django é um framework de desenvolvimento web de alto nível em Python que fornece aos desenvolvedores web uma poderosa ferramenta para criar aplicativos web rapidamente e de forma eficiente.

Embora o Django seja ótimo para criar aplicativos web rapidamente e de forma eficiente, é igualmente importante cuidar do visual e do aspecto dos aplicativos web que você desenvolve. Para fazer isso, você precisa aprender a gerenciar os ativos que suportam e fornecem o visual e o aspecto de seus aplicativos.

Arquivos Estáticos no Django

No Django, os arquivos estáticos são aqueles arquivos que são servidos diretamente ao cliente sem nenhum processamento pelo servidor.

Estes geralmente incluem arquivos CSS, JavaScript, imagens, ícones, fontes e outros ativos necessários para o visual e o aspecto de seu aplicativo web.

O Django fornece mecanismos para gerenciar e servir esses arquivos estáticos de forma eficiente, garantindo uma experiência do usuário suave.

Gerenciamento eficiente de arquivos estáticos

Para garantir que os usuários de seu aplicativo web tenham uma boa experiência do usuário e que o aplicativo funcione conforme o esperado, você precisa gerenciar os arquivos estáticos de forma eficiente.

Organizar e cachear corretamente os arquivos estáticos garantirá tempos de carregamento de página rápidos e melhorará a resposta, melhorando a satisfação geral do usuário.

O Django oferece várias ferramentas e convenções para ajudar no gerenciamento de arquivos estáticos.

Propósito dos arquivos estáticos em aplicativos web

Os arquivos estáticos são muito importantes, pois definem como um aplicativo web se parece e se sente. Eles definem como os componentes em um aplicativo são estilizados, como se comportam em resposta às interações do usuário e, eventualmente, o que um usuário vê quando visita um determinado aplicativo web.

Ao servir arquivos estáticos de forma eficiente, você poderá criar uma interface do usuário visualmente atraente e responsiva, tornando o aplicativo mais envolvente e amigável para o usuário.

Configurando um Projeto de Demonstração

Para ilustrar os conceitos de gerenciamento de arquivos estáticos no Django, criaremos um projeto de demonstração do zero.

Este projeto incluirá a criação de um projeto Django, a configuração das definições de arquivos estáticos e a integração de arquivos estáticos em um aplicativo web simples.

Ao acompanhar o projeto de demonstração, você obterá experiência prática no gerenciamento de arquivos estáticos no Django e entenderá sua importância na web development.

Para os propósitos deste tutorial, criaremos uma página inicial de forma que, quando os usuários visitarem a página inicial do nosso projeto, verão um título estilizado os recebendo ao site. Também exibiremos a data de hoje usando JavaScript, e também serviremos uma imagem para completar a página.

Criando um diretório para abrigar o projeto

Vamos começar criando um diretório que abrigará o projeto de demonstração usando o seguinte comando:

mkdir sitepoint_django_static_tut

Criando um ambiente virtual

Recomenda-se que você crie e isole novos projetos dentro de ambientes virtuais. Isso significa que cada projeto terá suas próprias dependências sem afetar a instalação global do Python.

Vamos utilizar o pacote virtualenv para criá-lo. Se não estiver instalado em seu ambiente de desenvolvimento, instale-o usando pip install virtualenv, e crie um ambiente virtual com o seguinte comando:

virtualenv myenv

O comando acima cria um ambiente virtual chamado myenv. Para usar o ambiente virtual, você precisa ativá-lo:

Linux/macOS:

. myenv/bin/activate

Windows:

. myenv\Scripts\activate

Instalando dependências

Uma vez que o ambiente virtual esteja ativo, agora você pode prosseguir e instalar as dependências do seu projeto. Para começar, vamos instalar o Django. Instalaremos outras dependências à medida que chegarmos às seções que demonstram seu uso:

pip install Django

Isso instalará a versão estável mais recente do Django, que, na época da redação, é a versão 5.0.

Criando um projeto Django

Após a instalação bem-sucedida do Django, você agora tem acesso aos comandos de gerenciamento do Django. Vamos usá-los para criar um projeto Django no ambiente virtual:

django-admin startproject sitepoint_django .

O comando acima criará um projeto Django chamado sitepoint_django e o ponto no final indica que pretendemos criar o projeto na pasta atual.

Criando um app de demonstração

Para ilustrar os diversos conceitos de gerenciamento de arquivos estáticos, precisamos criar pelo menos um aplicativo Django em nosso projeto:

python manage.py startapp  static_demo

Isso criará um novo app em nosso projeto chamado static_demo. Para que ele seja reconhecido pelo nosso projeto, precisamos adicioná-lo à configuração de apps instalados no arquivo settings.py do nosso projeto. Abra sitepoint_django/settings.py, vá para a configuração INSTALLED_APPS e adicione static_demo.apps.StaticDemoConfig ao final da lista, conforme mostrado abaixo:

# sitepoint_django/settings.py

INSTALLED_APPS = [
    # outros apps
    'static_demo.apps.StaticDemoConfig',
]

Criando o template da página inicial

Renderizaremos algum HTML quando o usuário visitar a página inicial do nosso site. No app static_demo, crie um diretório templates, e dentro dele crie outro diretório e nomeie-o static_demo. Nesse diretório, crie um template e dê-lhe o nome index.html, então o caminho será static_demo/templates/static_demo/index.html.

Coloque o seguinte código em index.html:

<!-- static_demo/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sitepoint Django Tutorial</title>
</head>
<body>
    <h2>Hello there, welcome to our great site!</h2>
</body>
</html>

Criando a visualização do índice

Para que o template seja mostrado aos usuários sempre que eles visitarem a página inicial do nosso app, precisamos criar uma função de visualização que será acionada para renderizar o template home.html. Abra o arquivo static_demo/views.py e insira o seguinte código:

# static_demo/views.py

from django.shortcuts import render

def index(request):
    return render(request, "static_demo/home.html")

Criando o arquivo de URL do static_demo

Queremos que a visualização do índice no aplicativo static_demo renderize a página inicial sempre que um usuário visitar nosso site. Portanto, criaremos um esquema de URL para a função de visualização que renderizará a página inicial. Para isso, precisamos criar um arquivo urls.py para o aplicativo static_demo, e depois conectar o arquivo de URL do static_demo ao arquivo de URL do projeto.

Portanto, no aplicativo static_demo, crie um arquivo e nomeie-o urls.py e adicione o seguinte código nele:

# static_demo/urls.py

from django.urls import path
from .import views

app_name = 'static_demo'

urlpatterns = [
    path('', views.index, name="index"),
]

O código acima cria uma URL para a visualização do índice do nosso projeto, então, se um usuário visitar algo como http://oursite.com/, ou se você visitar http://127.0.0.1:8000 no desenvolvimento, a visualização do índice será chamada para responder a isso.

Vamos adicioná-lo ao arquivo de URL do projeto. Abra o arquivo sitepoint_django/urls.py e adicione o seguinte código:

# sitepoint_django/urls.py

from django.contrib import admin
from django.urls import path, include # adicione uma importação para include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('static_demo.urls')), # adicione esta linha
]

O código acima faz algumas alterações no arquivo urls.py padrão. Adicionamos uma importação para a função include, que informa ao Django que estamos incluindo o static_demo.urls.

Testando o projeto

A configuração inicial do projeto foi concluída neste ponto. Vamos executar o servidor de desenvolvimento para ver se tudo está bem amarrado.

Execute o projeto com o seguinte comando:

python manage.py runserver

Se tudo estiver configurado corretamente, você deverá ser capaz de visitar http://127.0.0.1:8000. Você verá um texto sem formatação dando as boas-vindas ao site.

Servindo Arquivos Estáticos no Desenvolvimento

Para adicionar formatação à página, JavaScript para a data e a imagem, temos que fazer alterações no projeto. Vamos fazê-lo incrementalmente e ver como podemos servir os diferentes arquivos estáticos de diferentes maneiras, começando com o ambiente de desenvolvimento.

Configurando um diretório de arquivos estáticos

O Django recomenda que todos os ativos estáticos sejam gerenciados por aplicativo: ou seja, todos os arquivos CSS, JS e imagens que um determinado aplicativo precisa devem estar dentro desse aplicativo. Então, vamos atualizar o aplicativo static_demo e criar um diretório chamado static, e dentro dele criar outro diretório chamado static_demo. Em seguida, no diretório static_demo, crie mais três diretórios: css, js e images. No final, teremos uma estrutura semelhante à mostrada abaixo:

static_demo/
    └── static/
        └── static_demo/
            ├── css/
            ├── js/
            └── images/

A razão pela qual você gostaria de criar um diretório static_demo no diretório static é para ajudar a nomear seu espaço de nomes para seus ativos estáticos. Se você tem mais de um aplicativo e tem o CSS em ambos os aplicativos nomeados como styles.css, o Django só trabalharia com o primeiro arquivo de folha de estilo que encontra, pois não seria capaz de distinguir entre os outros. Portanto, nomeamos eles para que o Django possa saber qual arquivo de ativo estamos nos referindo em nossos templates.

Criando os arquivos estáticos

Neste passo, vamos configurar apenas ativos estáticos mínimos que demonstrem como você pode servir arquivos no ambiente de desenvolvimento.

No diretório js, crie um arquivo e dê-lhe o nome todays_date.js, e adicione o seguinte código:

/* static_demo/js/todays_date.js */

let formattedDate = new Date().toLocaleDateString();

document.getElementById('todaysDate').innerText = `The date today is ${formattedDate}`;

O código acima obtém a data de hoje do JavaScript, formata-a em uma string e a exibe em uma div com um ID de todaysDate.

No diretório css, crie um arquivo, dê-lhe o nome styles.css, e adicione o seguinte código:

/* static_demo/css/styles.css */

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
}

h2 {
    font-size: 24px; 
    color: green;
}

O código acima usa o layout Flexbox para centralizar todos os itens na página tanto horizontal quanto verticalmente. Também define o tamanho da fonte do elemento H2 como 24px e sua cor como verde.

Para a imagem, você pode usar qualquer imagem de sua preferência. Basta copiar alguma imagem para o diretório images e anotar o nome.

Configurando as configurações de arquivos estáticos

Para servir arquivos estáticos no desenvolvimento, várias coisas devem ser definidas no arquivo settings.py do Django. Abra o arquivo sitepoint_django/settings.py e verifique se você possui as seguintes configurações:

# sitepoint_django/settings.py`

DEBUG=True

No desenvolvimento, é geralmente recomendado definir DEBUG como True nas configurações do seu projeto Django. Essa configuração ativa várias funcionalidades de depuração, incluindo mensagens de erro detalhadas e rastreamentos de pilha, que são inestimáveis para diagnosticar e corrigir problemas durante o desenvolvimento.

Além disso, quando DEBUG está definido como True, o aplicativo django.contrib.staticfiles serve automaticamente arquivos estáticos a partir do diretório static de cada aplicativo. Esse comportamento simplifica o processo de desenvolvimento eliminando a necessidade de configuração manual para servir arquivos estáticos.

No ajuste INSTALLED_APPS, verifique se você adicionou o django.contrib.staticfiles. Se não, adicione-o acima das aplicações que você tem no projeto. Por exemplo, neste projeto, adicione-o acima da string static_demo app, como mostrado abaixo:

# sitepoint_django/settings.py`

INSTALLED_APPS = [

    'django.contrib.staticfiles',
    'static_demo.apps.StaticDemoConfig',
]

O aplicativo django.contrib.staticfiles fornecido pelo Django é essencial para servir arquivos estáticos durante o desenvolvimento. Por padrão, ele percorre os aplicativos do seu projeto para localizar diretórios de arquivos estáticos em cada aplicativo. No entanto, se você possui ativos estáticos adicionais que não estão associados a nenhum aplicativo em particular, ainda pode torná-los acessíveis ao django.contrib.staticfiles definindo o ajuste STATICFILES_DIRS no arquivo settings.py do seu projeto. Este ajuste permite especificar diretórios adicionais onde os arquivos estáticos estão localizados. Por exemplo:

# sitepoint_django/settings.py`

STATICFILES_DIRS = [
    "/dir/with/staticfiles/static",
    "/someother/dir/static",
    "/home/example.com/static",
]

Além de DEBUG e STATICFILES_DIRS, outra configuração importante a ser incluída no arquivo de configurações do seu projeto Django é STATIC_URL. Embora Django forneça um valor padrão para STATIC_URL, você pode definir explicitamente em seu arquivo settings.py se ainda não estiver presente.

A configuração STATIC_URL especifica a URL base a partir da qual os ativos estáticos serão servidos. Por exemplo, a configuração STATIC_URL = "static/" instrui o Django a servir ativos estáticos a partir do caminho de URL /static/. Isso significa que, por exemplo, o arquivo de estilos localizado no aplicativo static_demo estará acessível em uma URL como http://127.0.0.1:8000/static/static_demo/css/styles.css.

Atualizando o template

Para usar os arquivos estáticos no template, precisamos atualizá-lo com o seguinte HTML:

<!-- static_demo/index.html -->

<!-- adicionar funcionalidade de manipulação de arquivos estáticos -->
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sitepoint Django Tutorial</title>

    <!-- link para css abaixo -->
    <link rel="stylesheet" href="{% static 'static_demo/css/styles.css'%}"> 
</head>
<body>
    <h2>Hello there, welcome to our great site</h2>
    <p id="todaysDate"></p>
    <!-- link para imagem abaixo -->
    <img src="{% static 'static_demo/images/flowerImage.png' %}" alt="Flower Image"> 

    <!-- link para js abaixo -->
    <script src="{% static 'static_demo/js/todays_date.js' %}"></script>
</body>
</html>

Essa atualização no template nos apresenta uma nova tag: {% load static %}. Esta tag carrega a funcionalidade de manipulação de arquivos estáticos fornecida pelo mecanismo de templates Django. Incluir essa tag em um arquivo de template Django nos permite usar tags e filtros de template relacionados a arquivos estáticos.

Por exemplo, ao utilizá-lo em nossa template, nos permite referenciar arquivos estáticos como imagens, CSS e JS em elementos HTML. Usá-lo também permite que o Django gere URLs para os ativos estáticos referenciados:

<link rel="stylesheet" href="{% static 'static_demo/css/styles.css'%}"> 

<img src="{% static 'static_demo/images/flowerImage.png' %}" alt="Flower Image"> 

<script src="{% static 'static_demo/js/todays_date.js' %}"></script>

Com essas configurações e a atualização do template em vigor, devemos executar o projeto e verificar se os arquivos estão sendo servidos em desenvolvimento. Execute o projeto usando o seguinte comando:

python manage.py runserver

Se tudo estiver configurado corretamente, devemos ter o servidor de desenvolvimento rodando em http://127.0.0.1:8000. Se visitarmos esse link, devemos ter uma página semelhante à mostrada abaixo.

Ter uma imagem semelhante mostra que os arquivos estáticos foram aplicados corretamente.

Você deve notar que no desenvolvimento do Django, quando DEBUG=True em suas configurações do projeto, e django.contrib.staticfiles está habilitado, isso permite que o servidor de desenvolvimento do Django (runserver) sirva arquivos estáticos. Nessa situação, quaisquer alterações feitas em arquivos estáticos, como CSS, JavaScript ou imagens, são detectadas e aplicadas automaticamente pelo Django. Esse processo integrado simplifica muito o desenvolvimento, pois você verá instantaneamente os efeitos das suas alterações sem precisar atualizar manualmente ou reiniciar o servidor.

No entanto, em ambientes de produção, servir arquivos estáticos geralmente envolve o uso de um servidor web separado ou CDN. Neste caso, mudanças em arquivos estáticos podem não ser detectadas e aplicadas automaticamente pelo Django, exigindo intervenção manual para garantir que os arquivos atualizados sejam servidos aos usuários. Além disso, se você optar por servir arquivos estáticos manualmente usando um método diferente, como a visualização django.views.static.serve(), a detecção automática e aplicação de mudanças pode não ocorrer, e você pode precisar implementar seus próprios mecanismos para lidar com atualizações de arquivos estáticos.

Servindo Arquivos Estáticos Usando WhiteNoise

No desenvolvimento, enquanto django.contrib.staticfiles simplifica o processo de servir ativos estáticos, garantindo atualizações suaves à medida que você faz alterações.

No entanto, ao passar para a produção, configurações como DEBUG=True devem ser desativadas, e arquivos estáticos podem ser servidos de um CDN ou outro servidor. Isso requer uma solução que conecte ambos os ambientes — permitindo o serviço suave de arquivos durante o desenvolvimento enquanto reflete com precisão o ambiente de produção.

Entra o pacote WhiteNoise. Desenvolvido para integrar perfeitamente com o Django, o WhiteNoise oferece uma solução robusta para servir arquivos estáticos em ambos os ambientes de desenvolvimento e produção, fornecendo uma abordagem unificada que garante consistência e confiabilidade em todas as etapas de implantação. Vamos explorar o WhiteNoise.

Instalando e configurando o WhiteNoise no Django

Começar com o WhiteNoise é simples. Nesta seção, percorremos o processo de instalação e orientamos você sobre como configurar o WhiteNoise dentro do seu projeto Django.

Instalamos o WhiteNoise da seguinte forma:

pip install whitenoise

Após a instalação bem-sucedida, vá até o sitepoint_django/settings.py, role até o final e encontre a configuração STATIC_URL. Logo abaixo, adicione a configuração STATIC_ROOT:

# sitepoint_django/settings.py

STATIC_ROOT = BASEDIR / "staticfiles"

A configuração acima informa ao Django que, quando o collectstatic for executado, todos os ativos estáticos em todos os aplicativos do seu projeto serão coletados e armazenados nesta pasta chamada staticfiles.

A próxima coisa a fazer é executar o comando de gerenciamento collectstatic:

python manage.py collectstatic

Para ativar o WhiteNoise, você precisa adicioná-lo à lista de configurações MIDDLEWARE, edite o arquivo settings.py e adicione o middleware WhiteNoise após o Django SecurityMiddleware e antes de todos os outros middlewares:

# sitepoint_django/settings.py

MIDDLEWARE = [
    # ...
    "django.middleware.security.SecurityMiddleware",
    "whitenoise.middleware.WhiteNoiseMiddleware",
    # ...
]

Usando o WhiteNoise no desenvolvimento

Com apenas os passos acima, o WhiteNoise pode servir seus arquivos estáticos em produção. Mas se você executar o projeto neste momento, o servidor de desenvolvimento do Django assumirá automaticamente o gerenciamento de arquivos estáticos. Mas para se beneficiar de um comportamento semelhante no desenvolvimento e em produção, é uma boa ideia usá-lo também para servir arquivos no desenvolvimento.

Para fazer isso, desabilitaremos o tratamento de arquivos estáticos do Django e permitiremos que o WhiteNoise assuma, simplesmente editando o arquivo de configurações e adicionando o WhiteNoise à lista de INSTALLED_APPS acima do django.contrib.staticfiles:

# sitepoint_django/settings.py

INSTALLED_APPS = [
    # ...
    "whitenoise.runserver_nostatic",
    "django.contrib.staticfiles",
    # ...
]

Você também precisa desabilitar DEBUG definindo-o como False:

# sitepoint_django/settings.py

DEBUG=False

Com esses passos, você pode servir seus ativos estáticos de forma integrada usando o pacote WhiteNoise.

Para verificar se o WhiteNoise está realmente servindo seus arquivos, você pode remover ou comentar a opção django.contrib.staticfiles da lista de configuração INSTALLED_APPS. No entanto, é importante notar que remover django.contrib.staticfiles tornará algumas comandos de gerenciamento de arquivos estáticos indisponíveis, como o comando collectstatic. Esse comando é essencial para coletar e consolidar arquivos estáticos de seus aplicativos em um único diretório para um serviço eficiente em ambientes de produção.

Opções avançadas de configuração do WhiteNoise

Embora os passos acima sejam suficientes para a maioria dos casos, o WhiteNoise oferece algumas opções adicionais de configuração. Por exemplo, você pode adicionar compressão e suporte a cache ao seu projeto. Para ativá-lo, abra o arquivo sitepoint_django/settings.py e adicione as seguintes configurações:

# sitepoint_django/settings.py

STORAGES = {
    # ...
    "staticfiles": {
        "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
    },
}

A configuração acima garantirá que o WhiteNoise comprima e faça o hash dos arquivos estáticos para um nome único, para que sejam armazenados em cache com segurança.

Usando o WhiteNoise em ambientes de hospedagem compartilhada

A hospedagem compartilhada é um tipo de serviço de hospedagem na web onde múltiplos sites são hospedados em um único servidor físico. Neste arranjo, recursos como espaço em disco, largura de banda e potência de processamento são compartilhados entre vários usuários, tornando-o uma opção econômica para hospedar sites de pequeno a médio porte.

Ambientes de hospedagem compartilhada são geralmente gerenciados por provedores de hospedagem, que lidam com a manutenção do servidor, segurança e suporte técnico, permitindo que os proprietários do site se concentrem na construção e gestão de seus sites sem precisar se preocupar com tarefas de administração do servidor.

Desafios de gerenciamento de arquivos estáticos em hospedagem compartilhada

Embora a hospedagem compartilhada ofereça uma solução de hospedagem acessível e conveniente para muitos sites, também possui limitações em comparação com outros tipos de hospedagem, como servidores virtuais privados (VPS) ou servidores dedicados. Essas limitações incluem o seguinte:

Restrições às configurações e definições do servidor, limitando a capacidade de personalizar o software do servidor ou instalar ferramentas adicionais.
Restrições de recursos, como espaço em disco, também desempenham um papel, pois pode haver limitações no volume de largura de banda que pode ser usado para fornecer esses arquivos aos visitantes.
O desempenho pode ser outra desafio no hosting compartilhado, pois compartilhar recursos com outros usuários pode resultar em tempos de carregamento mais lentos para arquivos estáticos, especialmente durante períodos de alta trafego ou utilização de recursos.

Configurando para usar WhiteNoise

WhiteNoise é um pacote Python que se integra perfeitamente com Django, tornando-se uma escolha ideal para servir arquivos estáticos em ambientes de hospedagem compartilhada. Ao contrário de outras instalações de software como Apache e Nginx, que podem não ser permitidas em certos ambientes de hospedagem, o WhiteNoise pode ser facilmente instalado junto com seus outros pacotes de projeto.

Ao configurar o Django para usar o WhiteNoise, você pode servir de forma eficiente arquivos estáticos diretamente de sua aplicação Django sem a necessidade de software de servidor adicional. Isso simplifica o processo de configuração e garante a compatibilidade com uma ampla gama de provedores de hospedagem.

A maioria dos provedores de hospedagem compartilhada oferece um cPanel que permite fazer configurações de servidor e uploads de arquivos. Então, uma vez que você tenha carregado seus arquivos, pode fazer as seguintes alterações no arquivo settings.py do projeto:

# sitepoint_django/settings.py

STATIC_URL='static/'

# substitua username pelo seu nome de usuário do cpanel
# use public_html se estiver trabalhando no seu domínio principal como https://example.com
STATIC_ROOT='/home/username/public_html/static'

# OR 
# use o nome da pasta se estiver trabalhando em um sub-domínio como https://subdomain.example.com
STATIC_ROOT='/home/username/subdomain.mydomain.com/static'

Com essas configurações em vigor, tudo o que você precisa fazer é executar o comando collectstatic para que seus arquivos estáticos sejam coletados em qualquer um dos diretórios STATIC_ROOT acima, dependendo do domínio.

Servindo Arquivos Estáticos do AWS S3

O Amazon Simple Storage Service (S3) é um serviço de armazenamento de objetos escalável oferecido pelo Amazon Web Services (AWS). Ele permite que os usuários criem espaços de armazenamento conhecidos como buckets onde você pode armazenar vários tipos de dados como documentos, imagens, vídeos e, notadamente para nosso tutorial, arquivos estáticos.

A AWS oferece um nível gratuito para vários de seus serviços, incluindo o Amazon S3. O nível gratuito permite que os usuários iniciem com os serviços da AWS sem custo por um determinado período ou até limites de uso específicos. Para começar, você pode se inscrever no nível gratuito do S3. No entanto, para concluir o processo de inscrição, você precisará fornecer informações de pagamento.

Criando um Bucket S3

Para criar um bucket, vá ao painel do S3 e clique no botão Criar bucket.

Dê ao bucket um nome único compatível com DNS. Você pode, opcionalmente, selecionar uma região mais próxima de você ou de seus usuários.

Ative ACL para o bucket.

Ative o acesso público para o bucket, desativando Bloquear todo o acesso público.

Após a criação bem-sucedida, você deve ver seu bucket na página principal do S3.

Habilitando Acesso IAM

Após a criação de um bucket, você pode usar o bucket como usuário root, mas a AWS recomenda que você crie um grupo de usuários IAM (Identity Access Management) e atribua-lhes acesso apenas a um determinado bucket.

Criando Grupo IAM

Vá à página principal do IAM e selecione Grupos de usuários no menu lateral. Em seguida, clique no botão Criar grupo. Atribua ao grupo um nome.

Em seguida, em Anexar políticas de permissões, pesquise por S3 e atribua AmazonS3FullAccess e clique no botão Criar grupo.

Criando Usuário IAM

Enquanto ainda estiver na página IAM, selecione Usuários no painel à esquerda e clique no botão Criar usuário.

Dê ao usuário IAM um nome e clique no botão Próximo.

Na opção Definir permissões, deixe a opção Adicionar usuário ao grupo selecionada, depois vá para Grupos de usuários e selecione o grupo de usuários que você criou acima e clique no botão Próximo.

Revise e clique em Criar usuário.

Agora clique no nome do usuário para visualizar os detalhes do usuário. Clique na guia Credenciais de segurança e depois clique em Criar chave de acesso. Escolha Código local e clique no botão Próximo.

Após isso, clique no botão Criar chave de acesso. Você pode copiar as chaves para o seu arquivo .env se tiver um, ou baixar o arquivo CSV para uso posterior.

Configurando o Django para usar o AWS S3 para arquivos estáticos

Após criar o bucket S3, precisamos configurar o projeto para servir arquivos do S3. Na seção anterior, configuramos o WhiteNoise para servir nossos ativos estáticos. Precisamos desabilitar o WhiteNoise para que possamos servir os ativos do S3. Para fazer isso, vá para o arquivo sitepoint_django/settings.py e comente as linhas de código relevantes:

# sitepoint_django/settings.py

INSTALLED_APPS = [
    # ...
    # "whitenoise.runserver_nostatic",
    # ...
]

MIDDLEWARE = [
    # ...
    # "whitenoise.middleware.WhiteNoiseMiddleware",
    # ...
]

# STORAGES = {
#     "staticfiles": {
#         "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
#     },
# }

O código acima comenta todas as configurações que havíamos estabelecido para o WhiteNoise.

Instalação de pacotes

Para que o projeto possa trabalhar com o S3, precisamos instalar dois pacotes: boto3 e django-storages. O boto3 fornece a API Python de nível baixo para interagir com os serviços AWS, enquanto o django-storages estende as capacidades de armazenamento de arquivos do Django para integrar-se a provedores de armazenamento em nuvem como o Amazon S3, permitindo gerenciar e servir arquivos estáticos e de mídia em seu aplicativo Django de forma transparente:

pip install boto3 django-storages

Configuração de configurações

Para que nosso projeto possa servir arquivos a partir do S3, precisamos fazer algumas alterações no arquivo settings.py e atualizá-lo com o seguinte código:

# sitepoint_django/settings.py
import os  # primeiro adicione uma importação para o módulo os

# configuração de armazenamento S3
STORAGES = {
    'staticfiles': {
        'BACKEND': 'storages.backends.s3boto3.S3Boto3Storage',
        'OPTIONS': {
            'bucket_name': os.getenv('AWS_STORAGE_BUCKET_NAME'),
            'location': 'static',
            'querystring_auth': False,
        },
    }
}

As configurações acima criam um dicionário STORAGES que serve como um contêiner de configuração centralizado para definir vários backends de armazenamento usados dentro do projeto.

É importante notar que esta configuração está disponível apenas para versões do Django a partir da 4.2 e acima. Para versões anteriores, consulte a documentação.

No código acima, temos uma configuração para staticfiles que identifica a configuração de armazenamento para gerenciar arquivos estáticos.

Após as configurações de STORAGES precisamos adicionar algumas configurações específicas da AWS em nosso arquivo de configurações, então role até a parte onde você encontrará a configuração STATIC_URL e faça as seguintes alterações:

# sitepoint_django/settings.py

USE_S3 = os.getenv('USE_S3')

if USE_S3:
    AWS_ACCESS_KEY_ID = os.getenv('AWS_ACCESS_KEY_ID')
    AWS_SECRET_ACCESS_KEY = os.getenv('AWS_SECRET_ACCESS_KEY')
    AWS_S3_OBJECT_PARAMETERS = {
        "CacheControl": "max-age=2592000",
    }

else:
    STATIC_URL = 'static/'
    STATIC_ROOT = BASE_DIR / 'staticfiles'

Carregando arquivos estáticos no S3

Uma vez que as configurações estejam em vigor, a próxima tarefa é carregar seus arquivos estáticos no bucket S3. Você faz isso executando collectstatic:

python manage.py collectstatic  --no-input

Isso coletará todos os arquivos estáticos em nossos aplicativos do projeto, os moverá para o bucket S3 e os colocará em uma pasta static conforme definido no dicionário STORAGES. A ausência da bandeira --no-input instrui o Django a operar em modo não interativo, ignorando quaisquer prompts para entrada do usuário.

Ao ser utilizado, o Django procederá automaticamente com o processo de coleta de arquivos estáticos sem exigir intervenção manual do usuário.

Executando o projeto

Após configurar todas as definições, você pode executar o projeto. Vamos executar o projeto em desenvolvimento e servir os arquivos a partir do bucket S3:

python manage.py runserver

Para verificar se você está servindo arquivos do S3, pode inspecionar o código fonte da página inicial:

<link rel="stylesheet" href="https://sitepoint-django-static.s3.amazonaws.com/static/static_demo/css/styles.css">

<img src="https://sitepoint-django-static.s3.amazonaws.com/static/static_demo/images/flowerImage.png" alt="Flower Image">

<script src="https://sitepoint-django-static.s3.amazonaws.com/static/static_demo/js/todays_date.js"></script>

Ao analisar os elementos HTML, fica evidente que as URLs apontam para o bucket S3.

Conclusão

Em resumo, gerenciar arquivos estáticos no Django envolve avaliar os requisitos do projeto, necessidades de escalabilidade e restrições do ambiente de hospedagem para escolher o método mais adequado.

Por exemplo, o middleware WhiteNoise oferece uma solução eficiente para servir arquivos estáticos em ambientes de hospedagem compartilhados, onde restrições de recursos e acesso limitado ao servidor podem representar desafios.

Configurando adequadamente as definições do Django e aproveitando ferramentas como o WhiteNoise, os desenvolvedores podem garantir um serviço confiável e otimizado de arquivos estáticos, independentemente do ambiente de hospedagem. Cada método oferece suas próprias vantagens e considerações, exigindo uma avaliação cuidadosa para atender às necessidades específicas do projeto e oferecer uma experiência do usuário imersiva.

Nós abordamos vários pontos-chave:

Métodos para gerenciar arquivos estáticos. Discutimos várias abordagens, incluindo servir arquivos estáticos localmente, usando o servidor de desenvolvimento interno do Django, aproveitando soluções de armazenamento de terceiros como o Amazon S3, e servindo arquivos usando pacotes como o WhiteNoise. Cada método tem suas próprias vantagens e considerações, dependendo de fatores como escalabilidade, desempenho e facilidade de implantação.

Configurações e comandos comuns:

STATIC_ROOT: especifica o diretório onde os arquivos estáticos coletados serão armazenados.
STATIC_URL: define a URL base para acessar arquivos estáticos via servidor web.
STATICFILES_DIRS: especifica diretórios adicionais contendo ativos estáticos.
STATICFILES_STORAGE: configura o backend de armazenamento para lidar com arquivos estáticos.
collectstatic: coleta todos os ativos estáticos de todos os diretórios de aplicativos para o STATIC_ROOT.

Leitura adicional: