Quando estamos começando na programação existe um monte de coisas que precisamos aprender, e muitas vezes ficamos super concentrados em aprender linguagens e frameworks específicos que acabamos esquecendo de algo importante: como subir a aplicação para a web.
Nessas horas pode bater um desespero, afinal, existem milhares de opções e a tentação de tentar aplicar um monte de conceitos de nuvem e outras coisas pode atrapalhar.
Pensando nisso, decidi trazer uma opção fácil e super simples para colocar seu projeto de front (seja React, Angular, Vue, etc) no ar. Então bora lá!
Conheça o Vercel
O Vercel é uma plataforma perfeita para subir aplicações web que são baseadas em javascript como React, Angular, Vue, etc. Ele basicamente se conecta seu repositório do GitHub (e outros como gitlab, azure, etc) e voilá, seu app está online.
Um das grandes vantagens dele é que ele é tem uma versão gratuita para quem só quer subir projetos pessoais para porfólio. Além disso tem CI/CD descomplicado, SSL automático, funções serverless e muito mais.
Fazendo deploy no Vercel
Em primeiro lugar, você precisa criar uma conta na Vercel, você pode usar sua própria conta do Github, Gitlab, Bitbucket ou usar email e senha mesmo. Depois disso, a configuração é bem simples.
Na página inicial da sua conta, você terá a opção de importar seu próprio projeto ou utilizar um modelo (template) pronto deles, selecione o provedor Git do qual você gostaria de importar seu projeto.
Para fazer a importação você precisará instalar o Vercel no seu provedor Git, terá a opção de instalar para todos os repositórios de uma vez, ou para algum específico (fica a seu critério).
Após a instalação do Vercel no seu repositório, ele ficará disponível para importação, basta selecionar qual você quer importar e seguir em frente.
Ao selecionar o projeto que você vai subir, o Vercel detectará automaticamente o framework e quaisquer configurações de build necessárias.
Mas, você também pode fazer ajustes nas configurações, por exemplo incluindo configurações de build e de Ambiente. Mas se não quiser configurar agora não tem problema, isso tudo pode ser definido mais tarde.
Depois disso é só apertar o botão para fazer o deploy que sua aplicação estará no ar dentro de alguns minutos.
Deploy sendo feito:
Depois de alguns segundos ele já mostra a pré visualização do seu projeto, e ao clicar nele já abre o link do projeto no ar.
Como o projeto está vinculado ao Github, toda vez que uma alteração for feita na branch principal (a main no meu caso), ele já fará um novo deploy automagicamente.
É possível personalizar o domínio do seu projeto caso tenha um domínio próprio, e fazer outras configurações de CI/CD conforme suas necessidades.
Espero que esse post simples mas super prático tenha te ajudado a colocar seu projeto no ar e mostrar para todo mundo do que você é capaz, se precisar de alguma ajuda, deixa nos comentários.
Перекладено з: Como fazer o deploy da sua aplicação React/Angular/Vue em produção: Um guia descomplicado 🛠️✨