Deploy de aplicação Node.js e React utilizando Heroku + PostgreSQL + Netlify

README.md

Fala Dev's, beleza? Neste tutorial venho mostrar a vocês como vocês podem fazer o deploy da sua aplicação fullstack utilizando serviços como Heroku e Netlify. Além disso você ainda vai poder conectar a um banco de dados real em Postgres.

Importante Somente siga as instruções abaixo se já estiver com o projeto totalmente pronto e testado.

Tabela de Conteúdo

• Tabela de Conteúdo
• Backend
  • Preparação
  • Configurando o Postgres Service
  • Configurando o Backend para o Deploy
    • Instalação
    • Variáveis de ambiente
    • Procfile
    • .gitignore
  • Realizando deploy no Heroku
    • Caso NÃO tenha repositório criado
    • Caso JÁ tenha repositório criado
• Frontend
  • Preparação
  • Configurando o Fronted para o Deploy
  • Realizando deploy no Netlify
    • Build

Backend

Preparação

1. Crie a sua conta no heroku, caso não possua.
2. Clique em Create new app para criar a sua aplicação
3. Escolha um nome e crie.
4. Agora você deve baixar o Heroku CLI, que serve para você fazer o deploy através do terminal.

• Feche o seu terminal caso esteja aberto e abra o novamente.

5. Faça o login no heroku através do comando

   $ heroku login

   AVISO: Caso ele seja exibido uma mensagem no terminal que não reconhece o comando "heroku", instale ele novamente ou tente reiniciar o seu computador.

   • Aperte qualquer tecla
   • Irá abrir uma nova janela no seu navegador, basta inserir os seus dados.
   • E você irá receber a mensagem abaixo

Configurando o Postgres Service

1. Abra uma aba nova no seu terminal (em qualquer caminho) e rode

   $ heroku addons:create heroku-postgresql:hobby-dev --app <nome-do-app>

   Troque onde está escrito nome-do-app pelo nome que você colocou no heroku quando criou. No meu caso seria bethehero-api

2. Para saber informações como : senha e usuário do banco de dados, execute:

   $ heroku pg:credentials DATABASE --app <nome-do-app>

   Lembrando novamente que nome-do-app é onde você digita o nome do seu app no heroku.

   As suas credenciais irão aparecer algo do tipo

Connection info string:
   "dbname=dee932clc3mg8h host=ec2-123-73-145-214.compute-1.amazonaws.com port=6212 user=user3121 password=98kd8a9 sslmode=require"

Guarde os valores após o igual pois será necessário na configuração das variáveis do Postgres.

Configurando o Backend para o Deploy

• A configuração abaixo espera que você esteja utilizando o Knex como Query Builder.

IMPORTANTE : Antes de tudo, crie uma nova branch para o deploy. Assim você não perde as alterações que já fez. Não publique esse branch no seu github/gitlab.

git checkout -b deploy

Instalação

Abra o terminal e instale os seguintes pacotes

$ yarn add dotenv pg
ou
$ npm i dotenv pg

Variáveis de ambiente

1. Acesse pasta src pelo vscode e cria a pasta config

2. Dentro dessa pasta crie 2 arquivos: index.js e .env (sim com o ponto na frente)

3. Abra o arquivo index.js da pasta config e insira

4. Abra o arquivo do seu servidor (seja app.js e server.js) e altere a porta para

5. Abra o arquivo .env e configure as variaveis abaixo com as suas credenciais do postgres

   4.1 Caso não lembre, rode o comando heroku pg:credentials DATABASE --app <nome-do-app> no terminal

   4.2 Um EXEMPLO de como preencher

"dbname=dee932clc3mg8h host=ec2-123-73-145-214.compute-1.amazonaws.com port=6212 user=user3121 password=98kd8a9 sslmode=require"

5. Agora vá no seu arquivo connection.jse altere o seu código para o seguinte
6. Por último abra o arquivo do knex knexfile.js e faça as alterações seguintes.

Procfile

• Na raiz do seu projeto backend, crie um arquivo chamado Procfile dessa forma, sem extensões. neste arquivo insira o conteúdo seguinte:

web: node src/server.js

ou

web: node src/index.js

.gitignore

• Crie o arquivo .gitignore na raiz do teu backend, caso não tenha feito ainda, e insira

node_modules
.DS_Store

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

Lembrando que isso está sendo feito no branch deploy, no master você deveria incluir o arquivo .env

Realizando deploy no Heroku

Caso NÃO tenha repositório criado

1. Crie um repositório na raiz do projeto
2. Rode os comandos

$ heroku git:remote -a <nome-do-app>
$ git add backend
$ git commit -am "Let's rock it!🔥🚀"
$ git push heroku deploy:master

Caso JÁ tenha repositório criado

Estou supondo que você incluiu o frontend e backend no mesmo repositório

$ heroku git:remote -a <nome-do-app>

$ git add backend
ou
$ git add .

$ git commit -am "Let's rock it!🔥🚀"

Caso tenha criado um branch separado para deploy, faça

git subtree split --prefix backend deploy

copie o código e cole
$ git push heroku <codigo_do_split>:master --force

Caso não, apenas execute:

$ git subtree push --prefix backend heroku master

Recebeu a mensagem abaixo ?

Deu tudo certo?

Agora vamos rodar a migração!

1. Abra o terminal novamente e rode o comando

$ heroku run knex migrate:latest

Agora chegou a hora!!! vamos testar Coloque a URL da sua aplicação no insomnia e teste.

Frontend

#PartiuReact

Preparação

• Crie a sua conta no netlify (caso não possua): clique aqui.

Configurando o Fronted para o Deploy

Na pasta raiz do projeto frontend

1. crie o arquivo .env e insira:

REACT_APP_API_URL=<url_da_sua_api_heroku>

A sua url vai ser algo como https://algumacoisa.herokuapp.com

2. Abra o arquivo api.js da sua pasta services e altere para o seguinte

Realizando deploy no Netlify

Build

1. Abra uma aba no seu terminal, acesse a pasta do frontend e rode

$ yarn build
ou
$ npm run build

2. Abra uma guia no seu navegador e acesse o site Netlify Drop
3. Abra a pasta do seu projeto frontend no explorer, e arraste a pasta build para o Netlify Drop

O deploy automático do netlify será iniciado, magic is happening! E VOILÁ!!!

O domínio da sua aplicação será algum-nome-estranho.netlify.com mas você pode alterar isso indo em

• Clique em Domain Settings
• Em custom domains clique em Options
• Vá em Edit site name
• Digite o nome que quiser e clique em Save

É isso! com isso finalizamos, o deploy de um projeto fullstack, utilizando Heroku + PostgreSQL + Netlify

Passo adicional:
Para obter a contagem de registros no postgres abra o seu controller e faça as alterações seguintes

  const total = count['count(*)'] || count['count'] || 0;
  res.header('X-Total-Count', total);

Cara tive um pequeno problema aqui, quando vou cadastrar um novo caso ele cadastra mas não da uma resposta com o id do caso cadastrado, ele responde com application error, apesar de criar o caso, isso acontece

Cara tive um pequeno problema aqui, quando vou cadastrar um novo caso ele cadastra mas não da uma resposta com o id do caso cadastrado, ele responde com application error, apesar de criar o caso, isso acontece

É que no postgres no insert no banco de dados ele retorna um array vazio, para retornar o id, você pode alterar o controller para o seguinte
, colocando o método returning

  const [id] = await connection('incidents')
    .returning('id')
    .insert({
      title,
      description,
      value,
      ong_id
   });
  return res.json({ id });

Jeferson, muito bom seu tutorial. Estou com um pequeno problema: os dados que estavam armazenados no sqlite3 não aparecem na minha versão deployada no heroku. O Postgres está configurado, mas sinto que algo está errado, pois recebo uma array vazia ao acessar todas as ongs. O banco está funcionando normalmente quando cadastro uma nova ong, mas gostaria de ter os dados do meu banco sqlite3. Sabe como posso prosseguir? Obrigado!

@flborrelli Entendi, você consegue cadastrar os dados em produção mas não consegue listar, seria isso?
E quanto ao sqlite, ele é o seu banco de dados local, certo? Você pode convertê-lo ou exportá-lo em um dump e pelo heroku inserir todos os dados no postgres.

@flborrelli Entendi, você consegue cadastrar os dados em produção mas não consegue listar, seria isso?
E quanto ao sqlite, ele é o seu banco de dados local, certo? Você pode convertê-lo ou exportá-lo em um dump e pelo heroku inserir todos os dados no postgres.

Consigo cadastrar e listar normalmente em produção, mas somente dados novos. Eu já tinha uma base de ongs cadastradas localmente antes de deployar. Após o deploy, parece que nenhum dado da minha base local (sql3) subiu para o heroku. Legal, vou pesquisar sobre dumps, não conhecia. Valeu!

Não sei se teria algum comendo para "alimentar" o meu postgres com os dados da minha base local...

@flborrelli é então são bancos diferentes, você precisaria inserir esses dados ou manualmente ou pela exportação.
Na dashboard do heroku, nessa área aqui você pode fazer as suas queries em SQL e já é feito automaticamente em produção, pode ajudar.

Cara tive um pequeno problema aqui, quando vou cadastrar um novo caso ele cadastra mas não da uma resposta com o id do caso cadastrado, ele responde com application error, apesar de criar o caso, isso acontece

É que no postgres no insert no banco de dados ele retorna um array vazio, para retornar o id, você pode alterar o controller para o seguinte
, colocando o método returning

  const [id] = await connection('incidents')
    .returning('id')
    .insert({
      title,
      description,
      value,
      ong_id
   });
  return res.json({ id });

Poh cara valeu mesmo