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 caixa de ferramentas para criar aplicativos web rapidamente e de forma eficiente.

Enquanto o Django é ótimo para criar aplicativos web rapidamente e de forma eficiente, é igualmente importante cuidar do visual e do sentimento dos aplicativos web que você desenvolve. Para fazer isso, você precisa aprender a gerenciar os ativos que suportam e fornecem o visual e o sentimento 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 sentimento 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.

Gerenciando arquivos estáticos de forma eficiente

Para garantir que os usuários de seu aplicativo web tenham uma boa experiência do usuário e que o aplicativo funcione como esperado, você deve 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 que a resposta melhore, aumentando a satisfação geral do usuário.

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

O 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 a interações do usuário e, finalmente, o que um usuário vê quando visita um determinado aplicativo web.

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

Configuração de um Projeto Demo

Para ilustrar os conceitos de gerenciamento de arquivos estáticos no Django, montaremos um projeto demo do zero.

Esse 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 simples aplicativo web.

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

Para os fins deste tutorial, criaremos uma página inicial de forma que, quando os usuários acessarem a página inicial do nosso projeto, verão um cabeçalho estilizado os cumprimentando no 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 demo 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 criar isso. 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 está 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 a seções que demonstram seu uso:

pip install Django

Isso instalará a versão estável mais recente do Django, que, no momento da escrita, é a versão 5.0.

Criando um projeto Django

Após a instalação bem-sucedida do Django, agora você tem acesso a 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 significa que pretendemos criar o projeto no diretório atual.

Criando um aplicativo de demonstração

Para ilustrar os vários 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á até a configuração INSTALLED_APPS e adicione static_demo.apps.StaticDemoConfig no 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

Vamos renderizar 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 como static_demo. Neste diretório, crie um template e nomeie-o como index.html para que o caminho seja 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 então 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 feita neste ponto. Vamos executar o servidor de desenvolvimento para ver se tudo está bem conectado.

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 Ambiente de Desenvolvimento

Para adicionar formatação à página, JavaScript para a data e a imagem, precisamos fazer alterações no projeto. Vamos fazer isso 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 CSS, JS e imagens que um determinado aplicativo precisa devem residir 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ê desejaria criar um diretório static_demo no diretório static é para ajudá-lo a nomear espaço para seus ativos estáticos. Se você tiver mais de um aplicativo e tiver o CSS em ambos os aplicativos com o nome styles.css, o Django só funcionará com o primeiro arquivo de folha de estilo que encontrar, pois não seria capaz de distinguir entre os outros. Portanto, nomeamos espaço 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 ativos estáticos mínimos que demonstrarão como você pode servir arquivos no ambiente de desenvolvimento.

Na pasta js, crie um arquivo chamado 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 em JavaScript, formata-a em uma string e a exibe em uma div com o ID todaysDate.

Na pasta css, crie um arquivo, nomeie-o como 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 utiliza 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 a pasta images e anotar o nome.

Configurando as configurações de arquivos estáticos

Para servir arquivos estáticos no desenvolvimento, várias configurações devem ser definidas no arquivo Django settings.py. 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 indispensá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. Essa funcionalidade 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 dentro de cada aplicativo. No entanto, se você tiver ativos estáticos adicionais que não estejam associados a nenhum aplicativo em particular, ainda poderá torná-los acessíveis ao django.contrib.staticfiles definindo o ajuste STATICFILES_DIRS no arquivo settings.py do seu projeto. Esse 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 explicitamente definir isso 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, definindo 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 do 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 usá-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 em execução 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 seletivo simplifica muito o desenvolvimento, pois você verá instantaneamente os efeitos de 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, as alterações nos 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 e aplicação automática de alterações podem 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 com WhiteNoise

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

No entanto, ao passar para a produção, configurações como DEBUG=True devem ser desativadas e os arquivos estáticos podem ser servidos de um CDN ou outro servidor. Isso exige uma solução que ligue 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-se 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 de seu projeto Django.

Instalamos o WhiteNoise da seguinte forma:

pip install whitenoise

Após a instalação bem-sucedida, acesse 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 nesse diretório chamado staticfiles.

O próximo passo é 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 SecurityMiddleware do Django 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 controle do gerenciamento de arquivos estáticos. No entanto, para se beneficiar de um comportamento semelhante no desenvolvimento e em produção, é uma boa ideia usá-lo para servir arquivos no desenvolvimento também.

Para fazer isso, desabilitaremos o gerenciamento de arquivos estáticos do Django e permitiremos que o WhiteNoise assuma, simplesmente editando o arquivo de configurações e adicionando o WhiteNoise à lista INSTALLED_APPS configurando 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 ao 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 eles sejam armazenados em cache de forma segura.

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. Nesta configuração, recursos como espaço em disco, largura de banda e poder de processamentos são compartilhados entre vários usuários, tornando-se uma opção econômica para hospedar sites de pequeno a médio porte.

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

Desafios de gerenciamento de arquivos estáticos em hospedagem compartilhada

Embora a hospedagem compartilhada ofereça uma solução de hospedagem econômica 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 ajustes 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 servir 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 alto tráfego ou utilização de recursos.

Configurar para usar WhiteNoise

WhiteNoise é um pacote Python que se integra perfeitamente com Django, tornando-o 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 arquivos estáticos de forma eficiente 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 compartilhados fornece um cPanel que permite fazer configurações de servidor e uploads de arquivos. Então, uma vez que você tenha enviado seus arquivos, você 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 no cpanel
# use public_html se estiver trabalhando no seu domínio principal como https://example.com
STATIC_ROOT='/home/username/public_html/static'

# OU 
# use o nome da pasta se estiver trabalhando em um subdomí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 acima de STATIC_ROOT, 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.

O 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 comecem com os serviços AWS sem custo por um determinado período ou até limites específicos de uso. 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, acesse o painel do S3 e clique no botão Criar bucket.

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

Habilite ACL para o bucket.

Permita o acesso público ao 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 o 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

Acesse a 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 do IAM, selecione Usuários no painel à esquerda e clique no botão Criar usuário.

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

Sob a opção Definir permissões, deixe a opção Adicionar usuário ao grupo como a opção 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 aba Credenciais de segurança e então clique em Criar chave de acesso. Escolha Código local e clique no botão Próximo.

Depois disso, 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 a partir 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 a partir do S3. Para fazer isso, vá ao 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 baixo nível 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 sua aplicação Django de forma transparente:

pip install boto3 django-storages

Configuração de configurações

Para que nosso projeto possa servir arquivos 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 container de configuração centralizado para definir vários backends de armazenamento utilizados 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 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 estão 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 irá coletar todos os arquivos estáticos em nossas aplicações do projeto, movê-los para o bucket S3 e colocá-los em uma pasta static conforme definido no dicionário STORAGES. A bandeira --no-input instrui o Django a executar 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 qualquer intervenção manual por parte do usuário.

Executando o projeto

Uma vez que todas as configurações estejam em vigor, você pode executar o projeto. Vamos executar o projeto no ambiente de desenvolvimento e servir os arquivos a partir do bucket S3:

python manage.py runserver

Para verificar se você está realmente servindo arquivos do S3, pode-se visualizar 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, percebe-se que de fato 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 fornece 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.

Ao configurar adequadamente as configurações do Django e aproveitar 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 sem problemas.

Nós cobrimos 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 através do 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: