Hospede seu site Django com arquivos estáticos na Vercel gratuitamente (Novo Método)
Tags: tutorial, vercel, django, python
Published: 2024-07-12 18:24:17

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: 2**: 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](vercel.com)** se ainda não tiver
2 - **Importe o repositório git do seu projeto:**

 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofxm3mrj6r05597cgktq.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fyuy3y220fb5xnloijo3.png)

4 - **Aguarde o processo:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5evm86nak4qd03wcvjny.png)

5 - **Finalmente, após a conclusão do processo, você deve ver uma tela semelhante a esta:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w00kf5n9swjuc3cfgeom.png)

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!