[TEMPLATE] Baby Steps resolução de exercícios

[rafamarts]

7.2 - Deploy com Heroku e CI/CD e Docker

Pré-Requisito

• Instalar Heroku-CLI

  • URL

    https://devcenter.heroku.com/articles/heroku-cli#install-the-heroku-cli

Exercício

• Página com o exercício

Deploy do Frontend

• Clonar Frontend e abrir no vs code
• Criar um app no heroku
  - [ ] Lembrar que o builder mars não suporta o Heroku 22, sendo necessário executar antes: heroku stack:set heroku-20
• Subir o código no repositório git do heroku (deploy)
  - [ ] Alterar o package.json para utilizar o node 16.x
  - Comando
  ```json
  "engines": {
  "node": "16.x"
  }

       - [ ] Se ao realizar deploy no Heroku o `package-lock.json` causar erros de build, não enviá-lo para deploy
  

• Abrir o app e verificar que o loading irá aparecer

Deploy do Backend

• Clonar Backend e abrir no vs code

• Criar um dockerfile

• Criar o heroku.yml

• Criar o app no heroku

• Setar o ambiente do container (criar a stack)

• Subir o app no heroku

• Criar o banco de dados no SUPABASE e copiar as credenciais

  • Credenciais encontra em Setting→Database→Seção Connection Info

• Configurar o config.js do sequelize

• Configurar as variáveis de ambiente no Heroku

• Testar a conexão da máquina local através do script utils/testSequelizeConnection.js

  • Criar as variáveis de ambiente
  • Alterar o script para usar a lib dotenv
  • Rodar o script para testar conexão com o banco

    • comando

      NODE_ENV=production node utils/testSequelizeConnection.js
      
      NODE_ENV=production npx run utils/testSequelizeConnection.js

• Testar conexão com o banco a partir do Heroku.

  • comando

    heroku run node utils/testSequelizeConnection.js

• A rota de GET já está implementada do exercício 05

• Criar (migrate) e popular (seed) o banco

Conectar Frontend com Backend

• Preparar o backend para aceitar request via browser (Ativar o cors)
• Apontar o frontend para url do backend
• Carregar a URL do frontend e ver tudo lindo funcionando

Configurar lint no Github Actions

• Adicionar o script para rodar lint no package.json
• Criar action no github
• Subir código NO GITHUB em uma nova branch