Logo 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

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:

Estrutura de pastas de nosso projeto

É 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:

Scripts build e start em nosso arquivo package.json

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:

Nova estrutura de pastas de nosso projeto

Podemos agora adicionar todos os arquivos ao nosso GitHub:

Nosso repositório no 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”:

Opção de importar um projeto para a Vercel

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

Opção de importar um projeto por um repositório Git

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

Opção para adicionar o repositório do GitHub na Vercel

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:

Opção de conceder acesso a todos os repositórios de nosso GitHub para a Vercel

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”:

Opção de importar o projeto na Vercel

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”:

Página para escolha do framework do projeto

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

Página de sucesso no deploy

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:

Nosso projeto em produção

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”:

Página inicial de nosso projeto na Vercel

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:

Opção para adicionar um domínio na Vercel

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

Registro de nosso domínio na Vercel

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:

Lista de domínios no registro.br

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

Opção de editar o DNS de nosso domínio

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

Opção de adicionar uma nova zona ao nosso DNS

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”:

Adicionando os parâmetros de DNS no registro.br

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

Opção de salvar as configurações em nossa DNS

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

Domínio funcionando em nosso projeto na Vercel

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

Projeto sendo exibido na URL myapp.dev.br

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:

Configurações para o projeto com www

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

Novo domínio adicionado ao nosso projeto

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

Opção de adicionar redirecionamento no domínio www

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:

Nosso projeto funcionando com www

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 :)


Veja Também


Fique por dentro das novidades da Hcode

Fique por Dentro!

Seja avisado no seu e-mail quando um novo post for lançado no blog da Hcode.