Skip to content

Deploy

Para realizar o deploy para o projeto 2 precisaremos efetuar duas etapas: o deploy do frontend e o deploy do backend.

Deploy do backend

Assim como no projeto 1B, vamos realizar o deploy do backend utilizando o serviço Render.

Resumo do deploy

Criando PostgreSQL no Render

O primeiro passo é criar um banco de dados PostgreSQL utilizando o Render.

Visite o site https://render.com/ e preenche o campo name com um nome para o banco de dados. Os outros campos são opcionais.

Escolha a opção gratuita. Não é necessário adicionar nenhuma informação de pagamento. Em seguida, clique em Create Database.

Será necessário esperar um pouco até que o banco de dados seja criado.

Quando o status estiver como Available, desça a página e procure a área chamada Connections. Dentro dessa área, procure o campo External Database URL, essa informação será utilizada para conectar o banco de dados com a aplicação.

Clique no botão Copy e guarde essa informação, pois vamos precisar dela mais tarde.

Guarde o valor contido no campo External Database URL, pois vamos utilizá-lo mais tarde.

Conectando a aplicação com o banco de dados PostgreSQL

  • Abra o seu projeto 2 Django REST.

  • Instale a dependência dj-database-url: 

    pip install dj-database-url

  • Adicione o import no começo do arquivo settings.py (Pode ser logo após o código from pathlib import Path):

import dj_database_url
  • ainda no arquivo settings.py, procure pelo dicionário DATABASES e substitua pelo código abaixo:
DATABASES = {
    'default': dj_database_url.config(
        default='',
        conn_max_age=600,
        ssl_require=not DEBUG
    )
}

No campo default adicione a informação aquela informação que havíamos copiado anteriormente. (O campo External DATABASE URL)

Mais configurações do projeto

  • Instale a dependência gunicorn: 
    pip install gunicorn

Outras modificações nas configurações

Aproveite que está com o settings.py aberto e modifique o valor da constante DEBUG para False. Além disso, procure pela lista ALLOWED_HOSTS, ela deve ser uma lista vazia, ou seja, ALLOWED_HOSTS = [] altere para:

  1. Debug para False: 

    DEBUG = False

  2. Allowed Hosts para ['*']: python ALLOWED_HOSTS = ['*']

Atualizando o arquivo requirements.txt

Vamos criar o arquivo requirements.txt com as dependências do projeto. Para isso, rode o comando:

pip freeze > requirements.txt

Dê uma olhada no arquivo requirements.txt e verifique se não há dependências desnecessárias.

Faça um commit e um push para o seu repositório no Github.

Arquivos desnecessários

O seu repositório deve possui um arquivo .gitignore com o seguinte conteúdo:

Conteúdo do arquivo .gitignore do projeto Django 
# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
*$py.class

# C extensions
*.so

# Distribution / packaging
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
pip-wheel-metadata/
share/python-wheels/
*.egg-info/
.installed.cfg
*.egg
MANIFEST

# PyInstaller
#  Usually these files are written by a python script from a template
#  before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec

# Installer logs
pip-log.txt
pip-delete-this-directory.txt

# Unit test / coverage reports
htmlcov/
.tox/
.nox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
*.py,cover
.hypothesis/
.pytest_cache/

# Translations
*.mo
*.pot

# Django stuff:
*.log
local_settings.py
db.sqlite3
db.sqlite3-journal

# Flask stuff:
instance/
.webassets-cache

# Scrapy stuff:
.scrapy

# Sphinx documentation
docs/_build/

# PyBuilder
target/

# Jupyter Notebook
.ipynb_checkpoints

# IPython
profile_default/
ipython_config.py

# pyenv
.python-version

# pipenv
#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
#   However, in case of collaboration, if having platform-specific dependencies or dependencies
#   having no cross-platform support, pipenv may install dependencies that don't work, or not
#   install all needed dependencies.
#Pipfile.lock

# PEP 582; used by e.g. github.com/David-OConnor/pyflow
__pypackages__/

# Celery stuff
celerybeat-schedule
celerybeat.pid

# SageMath parsed files
*.sage.py

# Environments
.env
.venv
env/
venv/
ENV/
env.bak/
venv.bak/

# Spyder project settings
.spyderproject
.spyproject

# Rope project settings
.ropeproject

# mkdocs documentation
/site

# mypy
.mypy_cache/
.dmypy.json
dmypy.json

# Pyre type checker
.pyre/

.DS_Store

Importante

Certifique-se de o arquivo db.sqlite3 foi comitado, assim como as pastas "pycache" e "env".]

Caso tenha comitado o arquivo db.sqlite3, execute o comando a seguir e faça um commit e um push:

git rm --cached db.sqlite3

Caso tenha comitado a pasta env, execute o comando a seguir e faça um commit e um push:

git rm --cached -r env

Enviando o projeto para o Render

  • Acesse a página do Render e clique em New + e em seguida Web Service.

  • Escolha a opção de fazer o deploy a partir de um repositório do Github.

  • Procure o repositóriodo seu projeto e clique em Connect.

  • Procure a opção Start Command e troque o comando existente pelo seguinte comando: Troque XXXXXXX pelo nome do seu projeto. O nome do seu projeto é o nome da pasta que contém o arquivo settings.py.

    python manage.py migrate && gunicorn XXXXXXX.wsgi:application

  • Selecione a opção gratuita e clique em Create Web Service.

  • Caso tenha utilizado o arquivo .env será necessário adicionar as variáveis de ambiente no Render. Para isso, adicione o nome e o valor de todas as variáveis de ambiente presentes no arquivo .env no Render.

  • O Render vai iniciar o processo de deploy. Aguarde até que o deploy seja finalizado. É possível acompanhar o processo do deploy no terminal do Render.

  • Caso o deploy tenha sido realizado com sucesso, você verá a seguinte mensagem:

    É possível acessar a aplicação clicando no link que aparece no topo da página.

Passo final

Após realizar a etapa acima com sucesso, realize as últimas configurações.

Vá no arquivo settings.py e atualize a variável ALLOWED_HOSTS (A configuração da variável ALLOWED_HOSTS serve para evitar alguns ataques):

ALLOWED_HOSTS = ['tecweb-projeto-exemplo.onrender.com', 'localhost', '127.0.0.1', '0.0.0.0']
Importante: Para ALLOWED_HOSTS não deve utilizar o https://

Substitua tecweb-projeto-exemplo.onrender.com pelo link da sua aplicação gerado pelo Render.

Faça um novo commit e realize um push para o seu repositório no Github.

Sempre que você realizar um commit na branch principal, o Render fará um novo deploy.

Deploy do frontend

.gitignore

Crie um arquivo .gitignore na pasta do seu projeto frontend com o seguinte conteúdo:

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

Importante

Certifique-se de que a pasta node_modules não foi comitada. Caso tenha comitado a pasta node_modules, execute o comando a seguir e faça um commit e um push:

git rm --cached -r node_modules

Alterando localhost

Após realizar o deploy do backend, vamos realizar o deploy do frontend. Para isso, pegue o link gerado para o seu projeto backend no Render e atualize todas as requisições feitas no frontend para a rota http://localhost:8000 para o link gerado pelo Render.

Faça um commit e um push para o seu repositório no Github.

Teste

Faça algumas requisições para verificar se o backend está funcionando corretamente. Você pode utilizar o Postman.

Deploy do frontend

Vamos criar outro web service no Render para o frontend.

  • Escolha a opção Build and Deploy a New Web Service.

  • Procure o repositório com o projeto frontend e clique em Connect.

  • Coloque as seguintes configurações:

    • Root directory: Coloque a pasta que contem o arquivo package.json, caso este arquivo não esteja na raiz do projeto.
    • Build Command: npm i
    • Start Command: npm run dev -- --host

  • Escolha a opção gratuita e clique em Create Web Service.

  • O Render vai iniciar o processo de deploy. Aguarde até que o deploy seja finalizado. É possível acompanhar o processo do deploy no terminal do Render.

Por fim, adicione o link do deploy do frontend no arquivo README.md do seu repositório.