O que é a Vercel?
Antes de tudo, o que é a Vercel? Ela é uma plataforma para a hospedagem de sites estáticos e aplicações que utilizam frameworks front-end. Essa plataforma possui um processo de deploy simples e intuitivo, e permite que você hospede seus projetos de maneira gratuita.
Criando a conta
Primeiramente, é preciso que você tenha uma conta no site da Vercel. Para criar a conta, você deve clicar em Sign Up, como mostrado na imagem abaixo:
Uma vez clicando em fazer o cadastro, você pode optar por fazer o registro com uma conta já existente de serviços como o GitLab, Bitbucket, GitHub, ou fazer o cadastro através de um e-mail.
Eu recomendo que você utilize a opção de continuar usando o GitHub, GitLab ou Bitbucket, pois sincronizar a sua conta com a Vercel vai permitir que você tenha acesso a todos os projetos armazenados na conta.
Importando repositórios
Depois que o cadastro foi feito, você deve acessar a página de overview dos seus projetos. Essa página se parece com a imagem abaixo; uma vez nela, você deve clicar em New Project.
A seguir, você pode optar por importar um repositório do Git ou fazer o clone de um dos modelos de projetos já existentes. Você pode fazer o Deploy de aplicações de terceiros clicando em Import Third-Party Git Repository ou importar repositórios do seu próprio perfil. Para esta segunda opção, no entanto, a sua conta do GitHub deve estar sincronizada com a Vercel.
No entanto, caso seus projetos não apareçam automaticamente, clique na seta na caixa de pesquisa para selecionar a conta que tem os projetos que você quer importar.
A seguir, clique em Switch Git Provider. Assim, você pode selecionar outro servidor de repositórios. Supondo que você fez o login com o GitHub, pode utilizar esta opção para importar os repositórios que você tenha em outro serviço.
No entanto, a opção que nos interessa aqui é a opção Add GitHub Namespace. Isso abrirá uma janela pop-up onde você deve selecionar a conta de usuário ou organização de onde os repositórios devem ser importados.
Em seguida, você deve selecionar a quais repositórios a Vercel terá acesso. Sendo assim, a opção All repositories, dá acesso a todos os repositórios no seu perfil, incluindo os repositórios futuros. No entanto, a opção Only select repositories fará com que você tenha de selecionar os repositórios que a Vercel pode acessar.
Depois de selecionar a opção de acesso aos repositórios que mais se adaptar às suas necessidades, clique em Install.
Em seguida, os repositórios vinculados à conta selecionada vão aparecer, e o deploy pode ser feito.
Configurando o Deploy
Por padrão, os repositórios exibidos são os com alterações recentes. No entanto, utilizando a barra de pesquisa, você pode encontrar qualquer repositório da sua conta.
Uma vez que você tenha encontrado o repositório com o projeto que deseja fazer o deploy, basta clicar em Import para iniciar este processo.
Agora, só precisamos fazer as configurações do deploy. Você pode configurar o nome do projeto que, por padrão, é o nome do seu repositório, e selecionar o framework com o qual você está trabalhando na opção Framework Preset. Essa informação é importante para que os comandos de build corretos sejam rodados.
Em Root Directory, você deve selecionar a pasta principal do projeto. Por padrão, essa opção tem como valor a pasta raiz do seu repositório. Caso a sua pasta principal seja uma pasta chamada frontend que esteja dentro do repositório, é preciso clicar em Edit e modificar o caminho.
Nesta página, você também pode selecionar, além das configurações básicas, algumas configurações de Build e Output, ou setar algumas variáveis de ambiente, como chaves de uma API, por exemplo, caso isso seja relevante para a sua aplicação.
Depois disso, basta clicar no botão Deploy, e esperar o processo terminar. Esse processo pode demorar algum tempo dependendo da complexidade do seu projeto.
Acessando o projeto
Ao final do processo de deploy, você verá uma tela como a mostrada abaixo. Ela indica que o Deploy do seu projeto foi feito com sucesso.
Clicando em Go to Dashboard você tem todas as opções de monitoramento do Deploy; para acessá-lo, você pode clicar em Visit, ou ainda em qualquer uma das opções mostradas no item Domains, como destacado na imagem abaixo.
É importante ressaltar que agora a URL principal do seu projeto é dada pelo domínio atribuído à ele pela pela Vercel. Então caso você tenha alguma URL que interaja com o localhost localmente, por exemplo, essa URL precisa ser atualizada para a URL mostrada no dashborad.
Para acessar o deploy da sua aplicação, basta utilizar qualquer link de domínio. Esse link é público, o que significa que você pode encaminhá-lo para qualquer pessoa que tenha interesse em ver o seu projeto ou algo do tipo.
Para fazer alterações ou updates do seu projeto, basta fazer commits na branch main, o que implicará em um novo processo de build com as novas alterações de forma automática.
Considerações finais
Esse é o processo de deploy de uma aplicação na Vercel. O deploy nesta plataforma é uma ótima maneira de apresentar seus projetos para outras pessoas, e permite uma versatilidade muito maior do que o GitHub Pages, que hospeda apenas sites estáticos.
Como o processo de manutenção da aplicação praticamente não existe, sendo que você só precisa fazer commits na branch principal do seu projeto, isso faz com que a Vercel seja uma ótima forma de fazer deploys e testes das suas aplicações em produção, sem que você tenha que se preocupar com configurações mais avançadas.
Bons estudos!!
