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

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"
    }
  ]
}

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"

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

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

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

STATIC_URL = 'static/'
STATIC_ROOT = (BASE_DIR/"static/")

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'

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:

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

4 - Aguarde o processo:

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

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

• Código-fonte do Projeto usado para deploy neste tutorial: https://github.com/AghastyGD/ai-interview-django/tree/deploy (acesse a branch deploy)
• Documentação do Whitenoise: https://whitenoise.readthedocs.io/en/stable/django.html

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