3 min de leitura ·

Como fiz deploy de uma aplicação web com API + banco de dados custando R$ 0,00

Introdução

Estou sempre criando projetos paralelos ao meu trabalho, seja para estudar ou para tentar criar algum serviço útil e diversificar minha fonte de renda.

Estou acostumado a utilizar React + Vite + MUI 5 no front-end, NestJS + Prisma no back-end e Postgres como banco de dados. Esta é uma stack muito poderosa e produtiva. Entretanto, criar o back-end, o front-end e depois ainda ter que me preocupar com o deploy de cada parte separadamente dá bastante trabalho e leva muito tempo, sendo que muitas vezes quero apenas criar uma POC (Proof Of Concept ou Prova de Conceito) para validar a ideia.

Então, basicamente, o que eu quero é: criar novas aplicações rapidamente, me preocupando majoritariamente com o que a aplicação vai fazer, regras de negócio e experiência do usuário.

Solução

Para resolver o "problema" descrito eu utilizei a seguinte stack:

Descrevendo um pouco os itens listados acima, mas sem me extender muito (usem os links para saber mais sobre):

O Next.js é um framework web criado pela Vercel que permite a criação de aplicações full-stack com Node.js e React. O Prisma é um Object-Relational Mapping (ORM), em português, mapeamento objeto-relacional, ele facilita MUITO a manipulação de banco de dados. Já o PlanetScale é um serviço de banco de dados MySQL altamente escalável, totalmente gerenciado na nuvem.

Com estes três você cria o front com React usando qualquer biblioteca de componentes que desejar (ou use CSS puro, CSS-in-JS, você que manda), cria o back-end utilizando as rotas de API do Next.js (saiba mais), cria o banco de dados MySQL no PlanetScale, usa o Prisma ORM para se conectar ao banco de dados e depois de programar tudo você sobe a aplicação na Vercel.

Custos

Inicialmente custa: R$ 0,00
Cartão de crédito: Não é necessário ❤️

Mas calma, porque se o projeto escalar você pode precisar pagar alguma coisa para ele continuar no ar, porém os limites são bem generosos.

Vou deixar os links das precificações do PlanetScale e da Vercel abaixo ao invés de adicioná-los no post, porque eles podem mudar dependendo da data que você estiver lendo:

Preços Vercel: https://vercel.com/pricing
Preços PlanetScale: https://planetscale.com/pricing

Projeto Desenvolvido

Para estudar mais do Next.js e todas as especificidades desta nova stack criei uma aplicação para compartilhar prompts de IA chamada Copy My Prompt.

Ela consiste em duas telas: uma para criar um novo prompt e outra para visualizar o prompt criado e copiar ele para o clipboard. Depois de criar o prompt você pode pegar a URL dele e compartilhar com quem quiser!

Link da Aplicação: https://copy-my-prompt.vercel.app

Escalabilidade

Você notou que esta stack é altamente escalável? A melhor parte é que não precisamos fazer nada para escalar, conforme o número de usuários cresce, a Vercel e a PlanetScale conseguem segurar a onda por nós. Mas é claro que teremos que pagar por este escalonamento, e certamente o preço será um pouco salgado conforme a aplicação cresce.

Mas eu acho que vale super a pena pagar por serviços que economizam tempo (porque tempo é dinheiro) e se definirmos uma boa estratégia de monetização para nossas aplicações certamente poderemos pagar por estes serviços em núvem.

Outros Serviços Que Economizam Tempo

Estes aqui já usei e garanto que são excelentes:

Firebase (hosting praticamente de graça, não precisa de cartão de crédito, firestore...) - https://firebase.google.com
Railway (deploy de container de banco postgres, API Node.js...) - https://railway.app

Conclusão

Espero ter ajudado alguém com estas informações! Vou adorar saber a opnião de vocês e conhecer a stack e bibliotecas TS/JS que ajudam a economizar tempo e colocar aplicações para rodar mais rapidamente! 🚀

tharsissoares

1 ano atrás

Estou usando a ferramenta e estou achando fantástica!! Só uma situação que estou emperrando para conseguir, quando vai alterar o schema do prisma, atualiza o banco sem perder os dados com migrate dev, no planetscale é sugerido db push que apaga a tabela e refaz do zero, mas os dados vão embora...
tem um flagzinho para iterar a tabela e nao perder os dados?? e talvez quando rodar o banco deve permitir nulo porque os anteriores não terão ne?? :)

Honorio

5 meses atrás

Por padrão o prisma mantem os dados, porém se tiver algum conflito ele avisa que para fazer a alteração é necessário zerar os dados

Schema inicial

model User {
    id       String @id @default(uuid())
    email    String
    password String

}

Mantém os dados

Se eu quiser adicionar o propiedade name e manter os dados, devo idicar um valor padrão:

model User {
    id       String @id @default(uuid())
    name     String @default("usuário")
    email    String
    password String

}

ou podemos tornar a propriedade opcional, assim o valor será setado como NULL

model User {
    id       String @id @default(uuid())
    name     String?
    email    String
    password String

}

Zera os dados

Se não indicar um valor padrão ele zera os dados, pois a propriedade é obrigátoria mas já existem usuários na tabela que não tem essa propriedade

model User {
    id       String @id @default(uuid())
    name     String
    email    String
    password String

}

kallebysantos

1 ano atrás

Eu gosto de usar a conta gratuita da Oracle Cloud, dá pra ter várias VPS lá e dá pra hospedar praticamente qualquer coisa já que você tem controle total das máquinas. Além disso eles te dão IP público e mais um monte de recurso que eu até hoje nem consegui mexer com tudo. Precisa associar cartão mas o plano free tier é 100% gratuito, sendo que estes que comentei em cima são grátis para sempre.