Realizando o Deploy de um Projeto em Nuxt JS na Vercel com Domínio Personalizado

Realizando o Deploy de um Projeto em Nuxt JS na Vercel com Domínio Personalizado

Neste artigo iremos realizar algo que muitas pessoas desejam aprender e dominar: realizar um deploy. Iremos fazer o deploy de uma aplicação Nuxt JS na Vercel com um domínio personalizado do site registro.br.

A Vercel é uma plataforma voltada para a hospedagem de aplicações de uma forma bem simples e rápida. Ela é conhecida por ser a empresa criadora do framework Next JS, voltado para o React. Entretanto, também é possível realizar o deploy de aplicações Nuxt nesta plataforma.

Para realizar o deploy precisamos criar uma conta no site da Vercel. Além disso, o deploy será realizado através de uma integração com o GitHub. Por isso é importante ter uma conta nesta outra plataforma também.

Configurando nosso Projeto Local

A estrutura de pastas de nosso projeto está da seguinte forma:

É bem provável que a estrutura de seu projeto seja a mesma que está na imagem, ou pelo menos bem similar.

A primeira coisa que precisamos verificar é se os scripts “build” e “start” de nosso projeto estão corretamente criados. Eles são importantes pois a Vercel irá usá-los para preparar o deploy e de fato realizá-lo no servidor de produção. Podemos conferir isso em nosso arquivo package.json. Eles devem estar como na imagem abaixo:

Antes de fazermos o upload de nosso projeto para o GitHub é necessário adicionar um arquivo essencial para o bom funcionamento de nosso projeto na Vercel. Esse arquivo se chama now.json. Now era o nome do primeiro projeto desenvolvido pela Vercel, lançado em 2016, quando a empresa ainda se chamava Zeit.

Vamos adicionar o arquivo now.json na raiz de nosso projeto e definir nele o seguinte conteúdo:

{
    "version": 2,
    "builds": [
    {
        "src": "nuxt.config.js",
        "use": "@nuxtjs/now-builder",
        "config": {}
    }
    ]
}

Após essa alteração, a estrutura de pastas de nosso projeto ficará assim:

Podemos agora adicionar todos os arquivos ao nosso GitHub:

Agora sim estamos preparados para configurar nosso projeto na Vercel.

Configurando Deploy na Vercel

Após criar nossa conta na Vercel, iremos até a aba “Overview” no Dashboard da Administração e clicaremos na opção “Import Project”:

Na página a seguir escolheremos a opção “Import Git Repository”:

O próximo passo será colar a URL do nosso repositório no GitHub e pressionar “Continue”:

Se for a primeira vez que você estiver acessando a Vercel, pode ser que ela peça acesso ao seus repositórios. Você pode conceder acesso a todos os repositórios ou apenas a alguns específicos:

Após isso iremos ver a opção abaixo, onde poderemos escolher a pasta raiz para ocorrer o deploy. Em nosso caso iremos apenas clicar em “Continue”:

Na próxima página poderemos escolher um framework para o projeto, em nosso caso o Nuxt.js, e depois iremos habilitar as duas opções relacionadas ao “Build Command” e “Output Directory”. Após isso, basta clicar em “Deploy”:

O deploy será iniciado e após isso veremos a seguinte página de sucesso:

Ao ver essa página saberemos que deu tudo certo no deploy. Basta clicar no botão “Visit” e seremos redirecionados para nosso projeto em produção, completamente online:

Isso já é excelente! Nosso projeto está funcionando em produção! O processo foi bem simples não é mesmo?

O endereço do projeto está com a URL padrão da Vercel, com o final “.vercel.app”. Mas nós desejamos configurar um domínio personalizado. Como podemos fazer isso? É o que iremos aprender agora ?.

Configurando Domínio Personalizado na Vercel

Para começar a configuração de nosso domínio personalizado vamos acessar o Dashboard de nosso projeto. Na página inicial iremos clicar em “View Domains”:

Na página a seguir iremos definir o endereço que desejamos para nosso projeto. Lembrando que é importante ter a posse desse domínio. No meu caso eu possuo o domínio myapp.dev.br, adquirido no site registro.br. Você pode adquirir um domínio neste site por cerca de R$ 40,00 ao ano. É esse domínio que irei informar para a Vercel:

Após clicar em “Add”, nosso domínio será adicionado ao projeto. Veremos em seguida a informação abaixo:

Note que a Vercel retornou um erro, informando que o domínio possui uma configuração inválida. E isso faz sentido, pois de fato não configuramos nosso DNS no registro.br, mas isso é o que faremos agora.

Fique atento aos parâmetros que estão grifados na imagem, pois eles serão necessários para realizar essa configuração.

Vamos agora acessar o site registro.br (note que é apenas .br, sem o .com) e realizar o login. Na minha conta será exibido o domínio myapp.dev.br, como podemos ver abaixo:

Iremos clicar no nome do domínio. Na página que será aberta iremos clicar em “Editar Zona”, que estará na seção “DNS”:

Na página seguinte iremos clicar em “Nova Entrada”:

Iremos agora informar os parâmetros que foram informados pela Vercel, que estão grifados algumas imagens acima. Após isso iremos clicar em “Adicionar”:

Não esqueça de pressionar “Salvar” antes de sair da página:

Logo após isso veremos que o domínio na Vercel terá sido “regularizado” e agora estará funcionando:

Assim, ao acessar https://myapp.dev.br/, veremos o seguite resultado:

Excelente! Nosso projeto está funcionando agora com nosso domínio personalizado ?.

Nosso projeto já está funcionando perfeitamente, mas se desejarmos podemos deixá-lo um pouco mais completo, adicionando também o mesmo domínio com o prefixo www.

Para isso, basta repetir o processo que acabamos de realizar, mas com algumas mudanças.

Vamos configurar mais uma entrada no registro.br, com as configurações abaixo:

Vamos agora adicionar mais um domínio na Vercel, chamado www.myapp.dev.br:

A seguir vamos clicar em Edit e selecionar o nosso domínio principal na opção “Redirect to”. Daí basta clicar em “Save”:

Com essa configuração definimos que, ao acessar o domínio de nosso projeto com www, seremos automaticamente redirecionados para o domínio principal, o que fará com que os dois caminhos funcionem.

Assim, não importa qual URL informemos, nosso projeto irá ser encontrado:

Conclusão

Neste artigo aprendemos a realizar o deploy de uma aplicação Nuxt JS para a Vercel. Essa plataforma é realmente uma excelente opção para hospedarmos nossos projetos de uma maneira simples e descomplicada.

O Nuxt JS é baseado no framework Vue JS. E você pode aprender todos os recursos deste incrível framework em nosso Curso Completo de Vue JS, temos certeza de que ele irá te ajudar a evoluir nessa ferramenta.

Obrigado por ter lido até aqui e até o próximo artigo :)