[RUBRICA] Resolução da dinâmica do dia 7.2

[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

  • Comando

    heroku create --app frontend-trybe --buildpack mars/create-react-app

• Subir o código no repositório git do heroku (deploy)

  • Alterar o package.json para utilizar o node 16.x
  • Comando

   "engines": { 
   	"node": "16.x"
   }

  • Comando

    git push heroku main

  • 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

  • Comando

    heroku open

Deploy do Backend

• Clonar Backend e abrir no vs code

• Criar um dockerfile

  • Dockerfile

    FROM node:alpine
    
    WORKDIR /app
    
    COPY package.json .
    
    RUN npm install
    
    COPY . .
    
    CMD ["npm", "start"]

• Criar o heroku.yml

  • heroku.yml

    build:
      docker:
        web: Dockerfile
    run:
      web: npm start

• Criar o app no heroku

  • comando

    heroku create --app nome_app

• Setar o ambiente do container (criar a stack)

  • comando

    heroku stack -a nome_app
    
    heroku stack:set container -a nome_app

• Subir o app no heroku

  • comando

    git add .
    git commit -m "up"
    git push heroku master
    git push heroku main:master

• 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

  • config.js

    require('dotenv').config();
    module.exports = {
      development: {
        username: 'root',
        password: null,
        database: 'database_development',
        host: '127.0.0.1',
        dialect: 'postgres',
      },
      test: {
        username: 'root',
        password: null,
        database: 'database_test',
        host: '127.0.0.1',
        dialect: 'postgres',
      },
      production: {
        username: process.env.DB_USER,
        password: process.env.DB_PASSWORD,
        database: process.env.DB_NAME,
        host: process.env.DB_HOST,
        dialect: 'postgres'
      },
    };

• Configurar as variáveis de ambiente no Heroku

  • comandos

    heroku config:set DB_HOST=db.syudaesldphgtohlateg.supabase.co --app backend-trybe
    
    heroku config:set DB_USER=postgres --app backend-trybe
    
    heroku config:set DB_NAME=postgres --app backend-trybe
    
    heroku config:set DB_PASSWORD=weqjoc-1Durse-divwad --app backend-trybe
    
    heroku config:set DB_DIALECT=postgres --app backend-trybe

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

  • Criar as variáveis de ambiente

    • .env

      DB_USER=weqjoc-1Durse-divwad
      DB_PASSWORD=postgres
      DB_NAME=postgres
      DB_HOST=db.syudaesldphgtohlateg.supabase.co
      DB_DIALECT=postgres

  • Alterar o script para usar a lib dotenv

    • testSequelizeConnection.js

      require('dotenv').config();
      const env = process.env.NODE_ENV || 'development';
      const configToTest = require('../src/sequelize/config/config')[env];

  • 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

  • comandos

    npm install -g sequelize-cli
    npx sequelize-cli db:migrate --env production
    npx sequelize-cli db:seed:all --env production

Conectar Frontend com Backend

• Preparar o backend para aceitar request via browser (Ativar o cors)

  • instalar cors

    npm i cors

  • app.js

    // const express = require('express');
    // const rescue = require('express-rescue');
    // const UserController = require('../controllers/user');
    // const errorMiddleware = require('../middlewares/error');
    
    // const app = express();
    
    const cors = require('cors');
    app.use(cors());
    
    // app.get('/users', rescue(UserController));
    
    // app.use(errorMiddleware);
    
    // module.exports = app;

  • commit push

    git add .
    git commit -m "add cors"
    git push heroku main:master

• Apontar o frontend para url do backend

  • App.js

    // import './App.css';
    
    // import React, { useEffect, useState } from 'react';
    
    const API_ENDPOINT = 'https://backend-trybe.herokuapp.com/users';
    ...

• Carregar o frontend e ver tudo lindo funcionando

  • URL

    https://frontend-trybe.herokuapp.com/

Configurar lint no Github Actions

• Adicionar o script para rodar lint no package.json

  • package.json

    "scripts": {
        "test": "jest tests",
        "start": "node src/api/server.js",
        **"lint": "eslint --no-inline-config --ext .js,.jsx --no-error-on-unmatched-pattern -c .eslintrc.json .",**
        "dev": "nodemon src/api/server"
      },

• Criar action no github

  • .github/workflows/main.yml

    on: [push, pull_request]
    
    jobs:
      eslint:
        runs-on: ubuntu-latest
        steps:
          - name: Checkout
            uses: actions/checkout@v1
          - name: Instala dependências
            run: npm install
          - name: Roda ESlint
            run: npm run lint

• Subir código NO GITHUB em uma branch

  • comandos

    git add .
    git commit -m "lint"
    git checkout -B rafa-martins
    git push --set-upstream origin rafa-martins