Blog Formação DEV

Como fazer o deploy de uma aplicação no site da Vercel

Neste artigo, veremos como fazer deploy de uma aplicação que esteja armazenada em um repositório no Github utilizando o site da Vercel.
Como fazer o deploy de uma aplicação no site da Vercel
Texto de: Letícia Garcez

Introdução

Vercel é uma plataforma para a hospedagem de sites estáticos que possui um processo de deploy de aplicações simples e intuitivo que permite que você hospede seus projetos de forma gratuita. Ao longo deste artigo, veremos como fazer o deploy de um projeto armazenado no GitHub utilizando essa plataforma de uma forma rápida e simples.

Criando a conta

Primeiro de tudo, é preciso que você tenha uma conta no site da Vercel. Para criar a conta, você deve entrar no site e clicar em SignUp, como mostrado na imagem abaixo:

Fonte: Vercel

Uma vez clicando em fazer o cadastro, você pode deve selecionar qual tipo de conta você deseja criar. Nesta página, você deve selecionar a opção Hobby (para projetos pessoais) ou Pro (para projetos comerciais). Depois disso, você deve colocar o seu nome na caixa de texto e clicar em continuar.

Fonte: Vercel

Agora, você pode optar por continuar o registro adicionando uma conta já existente de serviços como o Gitlab, Bitbucket ou GitHub, ou fazer o cadastro através de um e-mail. Eu recomendo que você utilize a opção de continuar usando o um dos provedores de Git pois sincronizar a sua conta com a Vercel vai permitir que você tenha acesso a todos os projetos armazenados na conta.

Fonte: Vercel

Importando repositórios

Uma vez feito o cadastro, você deve acessar a página de overview dos seus projetos que se parece com a imagem abaixo, e então clicar em Add New. Isso fará com que um menu dropdown apareça, e nesse menu você deve selecionar a opção Project.

Fonte: Vercel

Depois disso, você pode optar por importar um repositóio do Git ou então fazer o clone de um dos modelos de projetos já existentes. Com a sua conta do GitHub sincronizada você consegue ter acesso a todos os repositórios do seu perfil que serão listados nessa página.

Fonte: Vercel

Caso seus projetos não apareçam automaticamente, clique na seta na caixa de pesquisa para selecionar a conta da qual os projetos devem ser importados. Clicando em Switch Git Provider, você pode selecionar outro servidor de repositórios, o que é útil caso você tenha repositórios que gostaria de fazer o deploy em outras plataformas.

Fonte: Vercel

Porém, a opção que nos interessa aqui (considerando que estamos usando o GitHub como provedor) é a opção Add GitHub Account. Ao clicar nessa opção, uma janela pop-up vai se abrir e nela você deve selecionar a conta de usuário ou organização de onde os repositórios devem ser importados.

Feito isso, você deve selecionar a quais repositórios a Vercel terá acesso. A opção All repositories dá acesso a todos os repositórios no seu perfil incluindo os repositórios futuros. Já a opção Only select repositories vai fazer com que você tenha de selecionar os repositórios que podem ser acessados pela Vercel.

Depois de selecionar a opção de acesso aos repositórios que mais se adaptar às suas necessidades, clique em Install.

Fonte: Vercel

Depois disso, os repositórios vinculados à conta selecionada vão aparecer, e o deploy pode ser feito.

Fazendo o Deploy

Por padrão, os repositórios exibidos são os com alterações recentes, mas 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 o processo.

Fonte: Vercel

Agora só é preciso 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 é setada para a pasta raiz do seu repositório e não a uma pasta que esteja dentro desse 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.

Fonte: Vercel

Além das configurações básicas, nesta página você também pode selecionar 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.

Fonte: Vercel

Depois disso, basta clicar em Deploy, e esperar o processo terminar. Esse processo pode demorar algum tempo dependendo da complexidade do seu projeto, mas ao final você verá uma tela como a mostrada abaixo, que indica que o Deploy do seu projeto foi feito com sucesso.

Fonte: Vercel

Clicando em Go to Dashboard você tem todas as opções de monitoramento do Deploy,e para acessá-lo você pode clicar em Visit ou então em qualquer uma das opções mostradas no item Domains, destacado na imagem abaixo.

É importante ressaltar que agora a URL principal do seu projeto é dada pelo domínio atribuído à ele 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.

Fonte: Vercel

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 palataforma é uma ótima maneira de apresentar seus projetos para outras pessoas já que o processo de configuração é simples e o de manutenção é automático sendo feito a cada commit na branch principal.

Bons estudos!

Sobre o autor
Cod3r

Cod3r

Com mais de 400 mil alunos, a Cod3r é uma das principais escolas de tecnologia do País. Um de seus produtos mais importantes é a Formação DEV, com objetivo de preparar os profissionais para o mercado.

Ótimo! Inscreveu-se com sucesso.

Bem-vindo de volta! Registou-se com sucesso.

Assinou com sucesso o Blog Formação DEV .

Sucesso! Verifique o seu e-mail para obter o link mágico para se inscrever.

As suas informações de pagamento foram atualizadas.

Seu pagamento não foi atualizado.