Hospedagem e deploy
Aula 11 de 26 do curso “Vibe coding”. Grátis, com animações e teste.
Hospedagem: um computador que não dorme
Exemplo: você montou com a IA um site para a sua banda. Por enquanto ele só abre no seu notebook. Fechou a tampa, o site sumiu. Hospedagem é um computador na nuvem que fica ligado o tempo todo e entrega o seu site para qualquer pessoa que abrir o link. No esquema é a nuvem com o servidor. Você não precisa de um servidor próprio: o serviço de hospedagem cuida disso.
Deploy: publicando uma nova versão
Deploy é publicar uma nova versão do site para as pessoas verem. Antes os arquivos eram enviados ao servidor na mão. Hoje é mais simples: você conecta seu repositório do GitHub à hospedagem uma vez. Depois disso, cada push na main, ou seja, enviar commits para a branch principal, dispara o deploy sozinho. No esquema a seta vai do GitHub, passa pelo build e chega ao site no ar. Colocou fotos do show, deu push, e logo o site atualiza.
Build: do projeto aos arquivos prontos
O navegador só entende HTML, CSS e JavaScript. Mas um projeto feito com IA muitas vezes usa um framework, ou seja, um esqueleto pronto com regras práticas, e precisa ser processado. Isso é o build: a hospedagem roda um comando de build, por exemplo npm run build, e coloca os arquivos prontos numa pasta de saída, por exemplo dist. A barra de progresso do esquema é essa etapa. Em geral a hospedagem descobre essas configurações sozinha.
O build falhou? O site continua no ar
Sem pânico. Se o build falha com erro, a hospedagem não publica a versão quebrada. As pessoas continuam vendo a antiga, que funciona: é a nota vermelha do esquema. O que fazer: abra o log do build, o registro onde a hospedagem anota cada passo. Procure linhas vermelhas perto do fim. Copie o erro inteiro e passe para a IA, como na aula sobre pedir tarefas. Corrigiu, deu push, e o build roda de novo.
Uma prévia para cada branch
Lembra das branches e dos Pull Requests? Uma hospedagem ligada ao GitHub normalmente faz o build de cada branch separado e dá a ela um link de prévia: uma cópia do site que não mexe no site no ar. Exemplo: numa branch você testa uma página nova com a agenda de shows. Abre a prévia no celular e manda o link para o baterista. Todo mundo curtiu: você faz merge na main, e o site no ar atualiza sozinho.
Site estático ou com servidor
Um site estático é só frontend: páginas prontas, iguais para todo mundo. O site de uma banda com fotos e agenda é exatamente assim, e é o mais fácil de hospedar. Se você precisa fazer algo escondido do navegador, como receber inscrições ou guardar uma chave de IA, vai precisar de funções de servidor: pedacinhos de backend que a hospedagem roda quando alguém pede. Muitas hospedagens fazem as duas coisas.
Teste-se
- O que é um deploy?
Resposta certa: Publicar uma nova versão do site para as pessoas. O deploy coloca a nova versão na hospedagem, onde todos veem. Um commit só salva a versão no Git, e o domínio é comprado à parte. - O build falhou com erro. O que os visitantes veem?
Resposta certa: A versão antiga, que funcionava. Um build quebrado não é publicado, então a versão anterior continua no ar. Você lê o log e corrige. - Você quer mostrar uma página nova a um amigo sem mexer no site no ar. O que usa?
Resposta certa: O link de prévia da branch. A branch ganha sua própria cópia do site num link separado. Um push na main mudaria o site no ar na hora.
← O terminal em 10 minutos Cloudflare: Pages, Workers e proteção →