DEV Community

Cover image for Hospede seu site Django com arquivos estáticos na Vercel gratuitamente (Novo Método)
Augusto Domingos
Augusto Domingos

Posted on • Edited on

Hospede seu site Django com arquivos estáticos na Vercel gratuitamente (Novo Método)

Hospedar um site Django completo pode ser um desafio, especialmente ao optar por plataformas gratuitas. No entanto, com a Vercel, você pode configurar seu site para ser hospedado sem custo algum 💸 , e com os arquivos estáticos funcionando corretamente utilizando esse novo método sem erros 🤩.
Neste tutorial, você será guiado por todo o processo, desde a preparação do ambiente até o deploy final.

Requisitos:

  • Ter um projeto Django funcional na sua máquina
  • Ter Python instalado

Atendendo esses requisitos, você já pode continuar o tutorial abaixo:

Preparando o ambiente

Passo 1:

Abra o arquivo wsgi.py do seu projeto, normalmente localizado dentro do seu diretorio "project_name" e adicione a seguinte linha no final:

import os
from django.core.wsgi import get_wsgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'nomedoseuprojeto.settings')

application = get_wsgi_application()

# esta linha
app = application
Enter fullscreen mode Exit fullscreen mode

Passo 2:

Navegue até a pasta raiz do seu projeto e crie o arquivo vercel.json com o seguinte código:

{
  "version": 2,
  "builds": [
    {
      "src": "nomedoseuprojeto/wsgi.py",
      "use": "@vercel/python",
      "config": { "maxLambdaSize": "15mb", "runtime": "python3.9" }
    }],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "nomedoseuprojeto/wsgi.py"
    }
  ]
}

Enter fullscreen mode Exit fullscreen mode

Substitua "nomedoseuprojeto" pelo nome do diretório onde está localizado o arquivo wsgi.py do seu projeto Django

Explicação (pode pular se quiser):

O arquivo vercel.json configura como seu projeto será construído e roteado na plataforma Vercel

  • version: Define a versão da configuração da Vercel (geralmente 1 ou 2).
  • builds: Especifica como seu projeto será construído.
    • src: Caminho para o arquivo wsgi.py do seu projeto Django.
    • use: Usa o ambiente Python da Vercel.
    • config: Configurações específicas para Python, como tamanho máximo do pacote e versão.
  • routes: Define como as solicitações HTTP são roteadas.
    • src: Todas as solicitações HTTP.
    • dest: Encaminha para wsgi.py do seu projeto.

Agora com o vercel.json criado corretamente, no próximo passo você irá adicionar um script bash para executar comandos de terminal na plataforma Vercel.

Passo 3:

Na pasta raíz do seu projeto, crie mais um arquivo build.sh com o seguinte código:

# build.sh
echo "Starting build script"

pip install -r requirements.txt

# make migrations
python3 manage.py makemigrations
python3 manage.py migrate

# collectstatic
python3 manage.py collectstatic

echo "Build script completed"

Enter fullscreen mode Exit fullscreen mode

Passo 4:

Gere um requirements.txt de todas as dependências do seu projeto, e adicione whitenoise na lista, conforme o exemplo abaixo:

# outras dependências...
Django==5.0.6
whitenoise==6.7.0

Enter fullscreen mode Exit fullscreen mode

No momento da escrita deste post, a versão atual do WhiteNoise é a 6.7.0. Sinta-se à vontade para usar uma versão mais recente no seu caso.

Explicação:

  • WhiteNoise é uma biblioteca Python que ajuda a servir arquivos estáticos em aplicações web de maneira eficiente. É frequentemente usado com Django para simplificar a configuração e melhorar o desempenho no serviço de arquivos estáticos como CSS, JavaScript e imagens, muito útil para hospedagem em plataformas cloud.

Passo 5:

Adicione o middleware do whitenoise no settings.py do seu projeto:

'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',  # Adicione esta linha
Enter fullscreen mode Exit fullscreen mode

Configure a localização dos seus arquivos estáticos:

STATIC_URL = 'static/'
STATIC_ROOT = (BASE_DIR/"static/")
Enter fullscreen mode Exit fullscreen mode

E se preferir, adicione também a seguinte configuração para ativar a compressão e armazenamento em cache, garantindo melhor performance na sua aplicação:

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
Enter fullscreen mode Exit fullscreen mode

Fazendo Deploy na Vercel

Agora que você preparou o ambiente, está pronto para fazer o deploy do seu projeto na Vercel. Siga os passos abaixo para completar o processo:

1 - Crie uma conta na plataforma Vercel se ainda não tiver
2 - Importe o repositório git do seu projeto:

Image description

3 - Configure as variáveis de ambiente se o seu projeto precisar de alguma e depois clique em "Deploy":

Image description

4 - Aguarde o processo:
Image description

5 - Finalmente, após a conclusão do processo, você deve ver uma tela semelhante a esta:
Image description

E booyah! Você conseguiu hospedar o seu projeto Django com arquivos estáticos na Vercel! Parabéns pelo feito, é um grande passo!

Prepare-se para futuras jornadas, pois, uma vez que a Vercel é serverless, você não poderá realizar tarefas de escrita diretamente na Vercel, como upload de imagens e vídeos. No entanto, não se preocupe, Em um artigo futuro, você aprenderá como fazer isso gratuitamente utilizando a API de outra plataforma gratuita que serve arquivos de mídia, sem custos. 💸🫡

Nota: Se o seu projeto Django estiver utilizando o banco de dados SQLite, que é geralmente gerado em todos os projetos Django, não será possível realizar gravações diretamente na Vercel. Para isso, será necessário utilizar um servidor de banco de dados. A Vercel oferece uma instância gratuita de PostgreSQL que pode ser configurada no seu projeto.

Links Utéis

Volte sempre! ❤️ Dúvidas? deixe nos comentários!

Top comments (0)