Executando verificação de segurança...
46
luaneduardo
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:

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:

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! 🚀

Carregando publicação patrocinada...
2
tharsissoares

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?? :)

1
Honorio

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

}
2
kallebysantos

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.

2
Jasz157

muito bom, ainda estou me aventurando a concluir uma aplicação de ponta a ponta, já estava procurando sobre o nextjs e essa postagem me deu mais ânimo ainda, obrigado!

0
1
willianwistuba

Show de postagem! Bora fazer um vídeo tutorial agora, para quem é como eu, 0 à esquerda em back-end e banco e vive de gambiarras que rodam só front, kkkkkkkkkkkkk....tenho muitas dúvidas de back-end, banco e como integrar com o front, já aprendi a fazer tudo o que o Filipe ensina em relação à Vercel nos vídeos do Youtube (criar front, sincronizar GitHub, fazer deploy na Vercel), mas essa parte do banco e do back é triste! Já tentei usar Firebase, mas aquelas configurações todas para conseguir inserir um mísero helloword, sofri o diabo, haha...já ouvi falar de MongoDB, da AWS, mas realmente, fico em dúvida sobre a melhor solução, em especial, estas que tenham custo 0 para POC.

2
2
luaneduardo
Autor
Autor

Dá uma olhada em cursos da Udemy de R$ 30,00 sobre front-end ou back-end, certeza que vai te ajudar a iniciar os estudos, aí depois vai criando projetos que você queira criar para praticar (importante fazer algo que goste para não desistir, eu mesmo só estudo fazendo projetos que acho maneiro). Fazendo assim logo você tá manjando!

Sendo simplista, os bancos relacionais são os mais adequados para a maioria das aplicações convencionais. No início segue por ele, porque o que você aprende com ele serve para muitos outros.

O Firebase tem bancos NoSQL, que é, de forma simplificada, amazenamento de JSONs. MongoDB é NoSQL também.

Bora pra cima! 🚀

1
1
GabrielAplok

Incrível Luan!

Eu não sabia sobre PlanetScale, estava sempre resmungando "não existem bons serviços MySQL gratuitos para eu brincar sem gastar nada" e agora você me apareceu!

meu heroi! brincadeiras à parte, poderei usar e abusar dele para fins de desenvolvimento e POCs, obrigado!

1
santato

PlanetScale é bom demais, recomendo dar uma olhada na bohr.io(uma "vercel" 100% br), estou usando ela desde o início e curti muito.
Eles tem um discord para você tirar dúvidas com a comunidade e com a equipe, atualmente tem suporte a NodeJS e PHP.

1
resende

Muito bom o conteúdo. Não conhecia essa solução para bancos MySQL, já está na minha lista. Obrigado!
Eu já usei o Firebase pra projetos pessoais, são bem generosas as cotas do Firebase também, a diferença é que lá só tem banco NoSQL. Eu meio que fui do caminho contrário hehe, comecei no banco NoSQL do firebase e depois aprendi queries de SQL. Foi interessante :)
Recomendo muito essas soluções, ajudam demais.

1
luaneduardo
Autor
Autor

O Firebase é incrível não é?

Já usei para alguns projetos também e até parece que é de graça de tão barato que são algumas coisas, mas o problema é justamente o NoSQL. No começo do projeto o Firestore é perfeito, mas conforme ele crescia eu me via utilizando o Firestore como se fosse um banco SQL.

Hoje em dia eu só vou usar um banco NoSQL se eu tiver certeza que se adequa ao projeto 🤔

1
resende

É verdade, usar NoSQL só se tiver um propósito mesmo.

No meu caso eu usei praticamente só o realtime database, então era NoSQL que não acabava mais hehe!
Diversas vezes eu me perdia naqueles filhos dos filhos dos filhos dos filhos, naquele JSON gigantesco haha. Vivendo e aprendendo.

1
1
1
ian4raponga

Não conhecia o planetScale, to brincando aqui com ele e parece ser muito bom. Única coisa meio esquisita é que ele não aceitar FK por escalar na horizontal.

1
1
1
filipeabrantes

Sensacional o post! Ultimamente tenho trabalhado só como backend e quando penso em fazer algo que precise esforçar um pouco pra (re)aprender front, acabo ficando perdido nas inúmeras possibilidades.

Ainda assim, quando tiver um tempo, poderia trazer aqui alguma coisa sobre essa parte do texto? criar algum serviço útil e diversificar minha fonte de renda. hehe
Poderia ajudar a galera :)

1
luaneduardo
Autor
Autor

Até eu que trabalho diariamente com front-end me vejo perdido nas possibilidades as vezes haha!

Agora mesmo estou explorando outros design systems/UI libraries com React. Neste projeto do post eu usei o geist-ui, uma lib de componentes baseada do design system da Vercel.

Ainda quero testar esta lib aqui: https://tamagui.dev porque ela parece interessante 🤔

Qualquer dia eu posto mais sobre ganhar dinheiro criando aplicações e os erros que já cometi para ajudar a galera.

Valeu pelo comentário! 🚀

1
1
1
1
luaneduardo
Autor
Autor

Gosto bastante de usar docker e docker compose por aqui também! 😄

Mas neste projeto aqui nem cheguei a usar, porque as API routes da vercel sobem junto com o resto da aplicação ao rodar yarn dev ou npm run dev, então meio que tenho o back-end e o front-end rodando juntos no mesmo comando. 😱

Tem uma feature do PlanetScale que nem comentei também que é a possibilidade de criar branches no banco de dados, semelhante ao que fazemos com git, então eu conseguiria criar uma branch para um ambiente de staging ou de desenvolvimento, por exemplo, nem precisando subir um container MySQL local se eu não quisesse! Dá uma olhada nessa feature das branches: https://planetscale.com/docs/concepts/branching

Valeu por comentar meu caro! 🚀

1
olavomello

TabCoin mais do que merecido.
Sou totalmente adepto do mesmo pensamento. Pra mim é a estratégia perfeita para testar uma POC e até para escalar.

Post sensacional. Parabéns 🎉👏🏻

0
1
thelopesbr

Uma hospedagem muito boa e com planos gratuitos é a render.com, nela você consegue hospedar diferentes tipo de projetos, incluindo serviços web, tanto estatico como dinamico. Portanto suporta node, docker, e até mesmo banco de dados.

Ele não pede cartão de credito, e quando você passa dos limites da gratuidade, ele para sua aplicação. Ele tem funcionalidades como vincular diretamente a seu Github, além de conseguir criar instancias separadas por PR, então é possivel ter uma instancia oficial, para sua branch master/main, e ele irá criando instancias isoladas com o codigo de suas PR, e vai fechando e iniciando automaticamente conforme vai abrindo e fechando as PR no Github.

Vale muito a pena conferir para seus projetos, só não recomendo o uso em produção por conta das limitações de qualquer coisa que é free :)

1
1
LuandSouza

que dahora! nunca havia utilizado o PlanetScale para projetos pessoais... Depois de ler esse textinho, agora sei onde posso "brincar" ksks

1
1
kcalb7

Excelente!! Eu realmente estava procurando um serviço gratuito de banco de dados para projetos de estudo e POCs.. Veio em otimissíssima hora este post.

1
1
1
1
1
liverday

Tenho um projeto que estou desenvolvendo, chamado curto.io, onde eu me mantive no free tier da amazon por 9 meses, rs.

Muito boas as dicas, existem algumas ferramentas ótimas pra quem ta querendo hospedar seus primeiros projetos, portfolios e afins.

Uma sugestão que eu dou é de uma ferramenta brasileira chamada https://bohr.io, que é open-source e gratuita pra projetos pessoais e não comerciais!

1
luaneduardo
Autor
Autor

Puts, eu nem sabia que existia free tier na AWS! 😱
E acabei de ver que algumas coisas são grátis para sempre, mas com limites mensais bastante generosos.

Sempre tive certo receio em usar a AWS. Gostava bastante do Heroku quando ele tinha free tier haha.

Valeu demais pelas dicas! 🚀

1
Paadilha

Muito bom, eu gostaria de fazer projetos assim no futuro também, colocar aqueles Apps do NLW da Rocketseat para todo mundo poder ver e não ficar só no "localhost".
Não sei se estou cego ou não, mas poderia passar o repositório da aplicação que você fez ?
Seria de grande ajuda também.

1
1
1
hbm

Interessante, acho que se você disponibilizar o github do projeto seu vai ajudar alguns novatos, pois o VERCEL inclusive gerencia variáveis de ambiente para credenciais.

1
1
1
1
leandrodaher

Show!

Também estou fazendo algo parecido. No meu site (ainda em desenvolvimento) estou usando Next.js para API e Frontend com Server Side Rendering e algumas páginas estáticas.

Meu plano também é utilizar Vercel pra hospedar o site e Supabase para o banco de dados Postgres que também tem um bom limite gratuito.

Acho que vou fazer um rate-limit por IP na API utilizando o Redis no Upstash (como o Tabnews faz).

1
luaneduardo
Autor
Autor

Que legal! Eu ainda quero usar o Supabase em algum projeto para testar, me parece muito interessante 🤔

Legal que você comentou sobre o rate-limit, não conhecia o Upstash, mas com certeza vou dar uma olhada, porque se um dia eu colocar cartão de crédito nestes serviços não quero ver minhas economias indo pro ralo haha 😆

1
leandrodaher

Eu também não conhecia o Upstash, descobri olhando o código fonte do Tabnews 😆.

Depois da uma conferida aqui:
https://github.com/filipedeschamps/tabnews.com.br/blob/main/infra/rate-limit.js

Legal que você comentou sobre o rate-limit, não conhecia o Upstash, mas com certeza vou dar uma olhada, porque se um dia eu colocar cartão de crédito nestes serviços não quero ver minhas economias indo pro ralo haha 😆

Entendo perfeitamente, também só vou colocar meu cartão se um dia estiver ganhando dinheiro com um projeto 😆.

1
glaucodiogo

Obrigado pela sua grande contribuição!
Quando puder, voce poderia realizar uma comparação entre o framework que usou para o front end e o netcore mvc ?

2
luaneduardo
Autor
Autor

Opa, de nada, foi muito bacana ver que ajudei muita gente (nem esperava por toda esta repercussão)!

Nunca cheguei a trabalhar com o .NET Core MVC, na verdade usei muito pouco C#, estou mais inserido no universo do JavaScript/TypeScript/Node.js

Mas seria muito legal ver um post sobre isso por aqui no TabNews!

1
1
luaneduardo
Autor
Autor

Cada rota de API é uma função serverless (serverless function). Dá uma olhada neste link da documentação da Vercel para ver mais detalhes: https://vercel.com/docs/concepts/limits/overview

Quanto ao PlanetScale também existem alguns limites quanto ao número de tabelas, colunas por tabela e queries: https://planetscale.com/docs/reference/planetscale-system-limits

E o PlanetScale também tem um limite de apenas um banco de dados por conta no plano Hobby.

Não escrevo aqui na resposta, porque isto pode ser alterado no futuro e também porque são muitos detalhes.

1
raphaelramos

Desenvolvi um site pessoal recentemente com essas plataformas. É incrível a performance, facilidade e custo inicial 0.
Para a parte do blog, usei o dev.to (mas penso em migrar para o tabnews) para publicação e obtendo eles pela API.

1
luaneduardo
Autor
Autor

É incrível mesmo!

Eu vou usar bastante agora para criar POCs e projetos pequenos. Único problema é que o PlanetScale tem um limite de apenas um banco de dados por conta no plano Hobby, então talvez eu use outro serviço 😢.

1
1
luaneduardo
Autor
Autor

O PlanetScale sai mais caro após esgotar a faixa gratuíta de uso, porque a precificação é feita por planos (scaler e team) e o preço por uso e armazenamento além da faixa destes planos é mais caro que o Firebase, este que fica na casa dos centavos de dolar.

Mas o PlanetScale e os bancos de dados que o Firebase disponibiliza são diferentes (e para casos de uso diferentes).

No Firebase existem dois bancos de dados: o Realtime Database e o Cloud Firestore, sendo que os dois são bancos de dados NoSQL (tipos não relacionais de bancos de dados).

Já o PlanetScale permite a criação de bancos de dados MySQL (são relacionais, semelhante ao PostgreSQL em muitos aspectos).

Talvez estes links te ajudem a comparar melhor os dois:

1
eliasNeto

Cara, uma coisa que ainda não tenho muito conhecimento, mas quero aprender mais sobre, é essa questão de deploy.

Valeuu por compartilhar tua experiência e abrir o tópico pra descussão. 🤙

1
luaneduardo
Autor
Autor

Fazer deploy de aplicações é um mundo totalmente a parte do desenvolvimento! Uns meses atrás eu também não tinha muito contato com isso, até porque quando a gente trabalha em empresas grandes existem pessoas responsáveis por isso.

Mas é muito legal criar algo, colocar para rodar e ver pessoas usando haha 😄.

Obrigado por comentar meu caro! 🚀

1
eliasNeto

Pow, imagino! Deve ser muito massa a sensação de conseguir desenvolver um app de cabo a rabo até colocar no ar e ver as pessoas usando.

Tmj, parceiro! 🚀🤙

1
julioNorberto

Muito bom o conteúdo! Da pra usar A Vercel pra hospedar o back-end e fazer a integração com o MongoDB Atlas também pra banco de dados, possuo um projeto hospedado dessa forma, totalmente gratuito também.

1
0
0
0
0
0
0
0
0
0
0
0
0
0
Andrefsagh

Outro serviço com plano gratuito muito bom é o fly.io. Os deploys são feitos com containers, então vc já ganha uma experiênciazinha com eles se ainda não tiver, e dá pra hospedar 24/7 tranquilamente. Uso ele pra hospedar bots do discord e telegram, nunca tive problemas.

1
luaneduardo
Autor
Autor

Bem bacana. Este ainda não cheguei a testar, mas estou salvando nos favoritos todas as opções que o pessoal está mandando aqui nos comentários haha, já juntei uns 10 links de serviços úteis!

0
0
0
0
0
0
0
0