25.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
• Subir o código no repositório git do heroku (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

#12 (comment)

25.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
• Subir o código no repositório git do heroku (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

25.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
• Subir o código no repositório git do heroku (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

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

25.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

  • Comando

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

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

  • Comando

    git push heroku main

• 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

25.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
• Subir o código no repositório git do heroku (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

25.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
• Subir o código no repositório git do heroku (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

25.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

Comando

heroku create --app frontend-trybe --buildpack mars/create-react-app
Subir o código no repositório git do heroku (deploy)

Comando

git push heroku main
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

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