Solucionado
Boa tarde,
Alguem poderia me ajudar passo a passo de como fazer o deploy desse tipo de projeto, pois não estou conseguindo e gostaria de aprender a publicar um projeto SPA que ainda usa uma APIREST de backend mas não entendi como seria os passos para publica-lo
A ideia aqui é : seu backend (a API REST) vai rodar no Render, e seu frontend (a SPA) vai rodar na Vercel. São dois deploys separados, porque são duas aplicações separadas. Parece óbvio quando a gente fala assim, mas é justamente esse o ponto que confunde muita gente — no localhost tudo parece uma coisa só, mas na hora do deploy você percebe que são dois mundos diferentes que precisam se conversar.
Pensa assim: o backend é o cozinheiro lá na cozinha do restaurante, e o frontend é o garçom que leva o pedido e traz a comida. Eles trabalham juntos, mas ficam em lugares diferentes. O deploy é basicamente dar um endereço fixo pra cada um deles.
Antes de sair fazendo deploy, vale garantir algumas coisas no seu projeto:
O seu backend precisa ter uma porta configurável via variável de ambiente. No Node.js com Express, por exemplo, é algo assim:
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
console.log(`servidor rodando na porta ${PORT}`);
});
Isso é importante porque o Render vai definir a porta automaticamente — ele não vai usar a 3001 que você colocou fixo no código. Se você não respeitar o process.env.PORT, o deploy até funciona mas o servidor não responde ninguém.
O seu frontend precisa ter a URL da API vindo de uma variável de ambiente também, não hardcoded como http://localhost:3001. No React com Vite, por exemplo, você cria um arquivo .env (que não vai pro deploy) e usa import.meta.env.VITE_API_URL. No Create React App, seria process.env.REACT_APP_API_URL. A ideia é a mesma: não deixar o endereço do backend cravado no código.
E, claro, ambos os projetos precisam estar no GitHub (ou GitLab, mas vou usar GitHub nos exemplos porque é o mais comum).
Vamos começar pelo backend porque o frontend precisa saber o endereço dele pra funcionar. Faz sentido, né? Primeiro a gente dá um endereço pro cozinheiro, depois avisa o garçom onde ele tá.
Acessa render.com e cria uma conta. Dá pra usar o login do GitHub direto, o que já facilita a conexão com seus repositórios.
No dashboard do Render, clica em New e depois em Web Service. Ele vai pedir pra conectar um repositório do GitHub. Seleciona o repositório do seu backend.
Se o repositório não aparecer, provavelmente você precisa dar permissão pro Render acessar ele. Tem um link de "configure account" ali mesmo na tela que resolve isso.
Aqui é onde a mágica acontece (e onde muita gente se perde). O Render vai te pedir algumas informações:
minha-api — esse nome vai fazer parte da URL final.Oregon (US West) costuma ter uma latência razoável (não tem região no Brasil ainda, infelizmente).main ou master.backend/), coloca o caminho aqui.Node (ou a linguagem do seu backend).npm install ou yarn install. Se você usa TypeScript e precisa compilar, seria algo como npm install && npm run build.npm start ou node dist/server.js (se usa TypeScript compilado).Mais embaixo na mesma tela (ou na aba "Environment" depois de criar), você pode adicionar variáveis de ambiente. Aqui é onde você coloca coisas como:
DATABASE_URL — se você usa um banco de dadosJWT_SECRET — se tem autenticação.env local temA variável PORT você não precisa definir — o Render já cuida disso sozinho.
O Render tem um plano gratuito (Free) que funciona bem pra projetos de estudo e portfólio. O ponto é: no plano gratuito, o serviço "dorme" depois de 15 minutos sem receber requisições. Quando alguém acessa, ele "acorda", mas leva uns 30-50 segundos. Isso é normal e não significa que seu deploy deu errado — é só limitação do plano free mesmo.
Clica em Create Web Service e espera o build rodar. Você vai conseguir acompanhar os logs em tempo real ali na tela. Se tudo der certo, no final vai aparecer uma URL tipo https://minha-api.onrender.com. Essa é a URL pública do seu backend.
Anota essa URL. Você vai precisar dela daqui a pouco.
Respira. Erros no primeiro deploy são super comuns. As causas mais frequentes:
package.json (às vezes funciona local porque você instalou globalmente, mas no Render não existe)start script no package.json não existe ou tá apontando pro arquivo erradoOs logs do build são seus melhores amigos aqui. Lê com calma, geralmente a mensagem de erro é bem clara.
Esse passo é crucial e muita gente esquece. Quando o frontend (rodando em https://meu-app.vercel.app) tenta chamar o backend (rodando em https://minha-api.onrender.com), o navegador bloqueia a requisição por padrão. Isso se chama CORS (Cross-Origin Resource Sharing) — é uma proteção do navegador pra evitar que sites aleatórios acessem APIs que não deveriam.
No Express, a solução é instalar o pacote cors e configurar:
const cors = require('cors');
app.use(cors({
origin: 'https://meu-app.vercel.app' // a URL do seu frontend na Vercel
}));
Se você ainda não sabe a URL do frontend (porque não fez o deploy dele ainda), pode temporariamente usar origin: '*' pra aceitar qualquer origem. Mas depois volta e restringe pra URL correta — deixar aberto pra todo mundo não é boa prática.
Depois de ajustar o CORS, faz um novo commit e push pro GitHub. O Render vai fazer o redeploy automaticamente.
Agora que o backend tá no ar e você tem a URL dele, é hora de colocar o frontend pra jogo.
Acessa vercel.com e cria uma conta (de novo, login com GitHub é o caminho mais prático).
No dashboard, clica em Add New → Project. Seleciona o repositório do frontend no GitHub.
A Vercel é esperta — ela detecta automaticamente se é um projeto React, Next.js, Vue, Angular, etc. Na maioria dos casos, as configurações padrão já funcionam:
npm run build — ela preenche sozinha.dist, pro Create React App é build. Ela costuma acertar.frontend/), configura aqui.Aqui é onde você diz pro frontend onde o backend tá. Expande a seção Environment Variables e adiciona:
Se usa Vite:
VITE_API_URLhttps://minha-api.onrender.com (a URL que você anotou lá em cima)Se usa Create React App:
REACT_APP_API_URLhttps://minha-api.onrender.comE no seu código, as chamadas de API devem usar essa variável. Algo assim:
// com Vite
const API_URL = import.meta.env.VITE_API_URL;
// com Create React App
const API_URL = process.env.REACT_APP_API_URL;
// na chamada
const response = await fetch(`${API_URL}/api/produtos`);
Clica em Deploy e espera. A Vercel é bem rápida — geralmente leva menos de um minuto. No final, ela te dá uma URL tipo https://meu-app.vercel.app.
Pronto. Seu frontend tá no ar.
Com os dois no ar, abre a URL do frontend no navegador e testa as funcionalidades que dependem da API. Abre o DevTools (F12) e fica de olho na aba Network — ali você vai ver as requisições saindo do frontend pro backend.
Se alguma requisição estiver falhando:
origin do CORS tá com a URL certa do frontendUma coisa legal que tanto o Render quanto a Vercel fazem: deploy automático a cada push no GitHub. Ou seja, a partir de agora, toda vez que você fizer um git push na branch configurada, o deploy acontece sozinho. Você não precisa repetir nenhum desses passos manualmente.
Isso significa que seu fluxo de trabalho fica: desenvolve local → testa → commita → push → deploy automático. Simples assim.
O primeiro deploy de qualquer projeto é sempre o mais confuso. Tem variável de ambiente, tem CORS, tem diferença entre o que funciona local e o que funciona em produção. Isso é normal. Não é que você tá fazendo errado — é que o ambiente de produção tem regras diferentes do localhost, e ninguém nasce sabendo essas regras.
Se travou em algum passo, lê os logs com calma. 90% dos problemas de deploy se resolvem lendo a mensagem de erro sem pânico. E se mesmo assim não resolver, posta o erro no fórum — mas agora você já tem o mapa do caminho, o que facilita muito pra alguém te ajudar a identificar onde exatamente a coisa travou.
Professor bom dia.
Poderia me dar um exemplo mais concreto, tipo eu gostaria de aprender a fazer o deploy especificamente desse projeto para eu aprender a fazer outros meus pessoais, ai tipo como eu poderia fazer especificamente o deploy desse projeto usando o front do desafio resolvido e o backend la da versao sem docker, que é a usando API REST.
Então, eu entendo a vontade de ter o passo a passo mastigadinho pro projeto específico — mas preciso ser honesto contigo: o guia que tá ali já é concreto. Ele cobre exatamente o fluxo de pegar um backend e subir no Render, pegar um frontend SPA e subir na Vercel, e fazer os dois se conversarem. Isso é o deploy. Não muda se o projeto é o Code Connect, um e-commerce ou um to-do list.
O que muda de um projeto pro outro são os detalhes de configuração — e é aí que não existe receita de bolo. Cada projeto tem suas dependências, suas variáveis de ambiente, seus scripts de build. E a única forma real de aprender isso é começar a fazer e lidar com os erros que aparecem. Sério. Ninguém faz deploy pela primeira vez sem dar de cara com algum erro no build, um CORS bloqueando, uma variável de ambiente esquecida. Isso não é fracasso, é o processo.
Dito isso, como o Code Connect eu conheço bem (rs), posso te dar umas dicas mais específicas pra você não sair completamente no escuro:
Esse projeto usa NestJS + Prisma + PostgreSQL. No Render, você vai precisar de duas coisas: o Web Service (pro NestJS) e um banco PostgreSQL.
DATABASE_URL — anota ela.npm install && npx prisma generate && npm run build. O prisma generate é essencial — sem ele o Prisma Client não existe em produção e tudo quebra.npm run start:prod (que no NestJS roda o node dist/main).DATABASE_URL (a que o Render te deu do PostgreSQL), JWT_SECRET (inventa uma string forte) e JWT_EXPIRES_IN (tipo 7d).npx prisma migrate deploy no build command (antes do npm run build). O seed (npx prisma db seed) você roda uma vez só pra popular com dados de exemplo.Uma coisa importante: o CORS. No main.ts do projeto, o CORS tá configurado pra http://localhost:5173. Você vai precisar mudar isso pra aceitar a URL do seu frontend na Vercel (tipo https://code-connect-seunome.vercel.app). Pode fazer isso via variável de ambiente pra não ficar hardcoded — algo como process.env.FRONTEND_URL no origin do CORS.
O frontend é uma SPA React. Na Vercel, o deploy é mais direto:
npm run build e dist)..onrender.com). A chave da variável depende de como o projeto faz as chamadas — olha no código onde tá a base URL da API e adapta.vercel.json com os rewrites (tá explicado no guia).Repara que essas dicas que eu dei são basicamente "olha o projeto, entende o que ele precisa, e aplica o que o guia ensina". É isso. O guia te dá o mapa, e cada projeto é uma viagem diferente pelo mesmo mapa.
O melhor conselho que eu posso te dar: abre o Render, abre a Vercel, e começa. Vai dar erro? Vai. Lê o log, entende o erro, corrige, faz deploy de novo. Em algumas tentativas você vai ter tudo no ar. E aí, no próximo projeto, você já vai saber o caminho — não porque alguém te deu o passo a passo exato, mas porque você passou pelo processo e entendeu o que tá acontecendo por baixo dos panos.
Bora que dá bom