Implementar ou fazer deploy de uma aplicação web na Vercel é bastante simples, ainda mais se tratando de frameworks
como o React, ou Next.js, já que ali na própria Vercel, ele consegue identificar qual é o framework da sua aplicação
e seguir a risca seu package.json para subir a aplicação para você. Aqui está um guia sobre como fazer isso:
Passo 1: Faça Login na sua Conta Vercel
Visite o site da Vercel e faça login na sua conta usando suas credenciais.
Passo 2: Crie um Novo Projeto
Assim que estiver conectado, você será direcionado para o painel da Vercel. Clique no botão "Adicionar Novo" localizado no canto superior direito do painel.
Passo 3: Escolha seu Projeto
Clique no "Projeto" para ser direcionado a Importar Repositório do seu GitHub. Lembre-se de que o projeto deve estar concluído para a Vercel poder identificar e fazer as configurações corretas. Caso não esteja, suba um commit no seu repositório com a aplicação funcionando.
Passo 4: Escolha seu Projeto
Clique no botão "Importar" para Configurar seu projeto.
Passo 5: Configure as Configurações do seu Projeto
Depois de selecionar seu repositório, você precisará configurar as configurações do seu projeto. Isso inclui selecionar o branch que deseja implantar, especificar o comando de build (se necessário) e fornecer quaisquer variáveis de ambiente necessárias para sua aplicação - se estiver disponível, caso ao contrário, pode deixar em branco que ele fará a configuração padronizada.
Passo 6: Implante/Deploy seu Projeto
Após configurar as configurações do seu projeto, clique no botão "Deploy". A Vercel começará a implantar sua aplicação web.
Passo 7: Monitore o Progresso do Deploy
Você será redirecionado para o painel de implantação, onde pode monitorar o progresso da sua implantação. A Vercel irá automaticamente construir e implantar sua aplicação. Fique atento a qualquer erro, porque através desse log que veremos se algo deu errado, se você tem dificuldade com o inglês, você pode simplesmente, copiar o erro e pedir para o ChatGPT traduzir para você ou o Google Tradutor.
Uma boa prática de projeto, é dar um npm run build ou yarn build antes de subir qualquer commit, assim, você consegue verificar o erro de build antes
de a Vercel precisar identificar isso.
Passo 8: Acesse sua Aplicação Web Implantada
Assim que a implantação/deploy estiver completo, a Vercel fornecerá a você um URL único onde sua aplicação web está hospedada. Você pode acessar seu aplicativo implantado clicando neste URL.
Você pode configurar outros nomes disponíveis dentro da hospedagem de vercel.app ou simplesmente configurar um DNS para que os usuários acessem
seuprojeto.com.br, por exemplo.
E um lance muito interessante quando se usa um DNS personalizado - caso você queira entender mais sobre, acesse registro.br e adquira seu dominio - é que você pode simplesmente configurar para que quando o usuário acessar seu dominio vercel, ele possa ser redirecionado automaticamente para o .com.br ou vice-versa.
A vantagem de se ter um dominio próprio é ter subdominios, como blog.seuprojeto.com.br ou até mesmo forum.seuprojeto.com.br e ainda assim,
cada projeto desse ser separado por repositórios diferentes, como foi o caso em que fiz com o stream.yagasaki.dev e
yagasaki.dev. Que são duas aplicações totalmente diferentes uma da outra, sendo yagasaki.dev desenvolvido em Next, enquanto
stream.yagasaki.dev ser desenvolvido usando Vite/React.
Gostou do artigo? Compartilhe com outros colegas e caso precise de alguma ajuda ou tiver alguma sugestão, você pode me chamar na Kalify Community ou através do Twitter/X.