Realizando el despliegue de un proyecto en Nuxt JS en Vercel con dominio personalizado
En este artículo vamos a realizar algo que muchas personas desean aprender y dominar: realizar un despliegue. Vamos a hacer el despliegue de una aplicación Nuxt JS en Vercel con un dominio personalizado del sitio registro.br.
Vercel es una plataforma dedicada a la hospedaje de aplicaciones de forma bastante simple y rápida. Es conocida por ser la empresa creadora del framework Next JS, destinado a React. Sin embargo, también es posible realizar el despliegue de aplicaciones Nuxt en esta plataforma.
Para realizar el despliegue, necesitamos crear una cuenta en el sitio de Vercel. Además, el despliegue se realizará a través de una integración con GitHub. Por eso, es importante tener una cuenta en esta otra plataforma también.
Configurando nuestro proyecto local
La estructura de carpetas de nuestro proyecto es la siguiente:
Es muy probable que la estructura de tu proyecto sea la misma que está en la imagen, o al menos bastante similar.
Lo primero que necesitamos verificar es si los scripts “build” y “start” de nuestro proyecto están correctamente creados. Son importantes porque Vercel los utilizará para preparar el despliegue y llevarlo a cabo en el servidor de producción. Podemos verificar esto en nuestro archivo package.json. Deben estar como en la imagen abajo:
Antes de subir nuestro proyecto a GitHub, es necesario agregar un archivo esencial para el buen funcionamiento de nuestro proyecto en Vercel. Este archivo se llama now.json. Now era el nombre del primer proyecto desarrollado por Vercel, lanzado en 2016, cuando la empresa aún se llamaba Zeit.
Vamos a agregar el archivo now.json en la raíz de nuestro proyecto y definir en él el siguiente contenido:
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "@nuxtjs/now-builder",
"config": {}
}
]
}
Después de este cambio, la estructura de carpetas de nuestro proyecto será así:
Ahora podemos agregar todos los archivos a nuestro GitHub:
Ahora sí estamos preparados para configurar nuestro proyecto en Vercel.
Configurando despliegue en Vercel
Después de crear nuestra cuenta en Vercel, iremos a la pestaña “Overview” en el Dashboard de Administración y haremos clic en la opción “Import Project”:
En la siguiente página elegiremos la opción “Import Git Repository”:
El siguiente paso será pegar la URL de nuestro repositorio en GitHub y presionar “Continue”:
Si es la primera vez que accedes a Vercel, puede que pida acceso a tus repositorios. Puedes otorgar acceso a todos los repositorios o solo a algunos específicos:
Después de esto, veremos la opción de abajo, donde podremos elegir la carpeta raíz para que ocurra el despliegue. En nuestro caso, simplemente haremos clic en “Continue”:
En la próxima página podremos elegir un framework para el proyecto, en nuestro caso Nuxt.js, y luego habilitaremos las dos opciones relacionadas con “Build Command” y “Output Directory”. Después de esto, solo hay que hacer clic en “Deploy”:
El despliegue se iniciará y después veremos la siguiente página de éxito:
Al ver esta página sabremos que todo fue bien en el despliegue. Solo hay que hacer clic en el botón “Visit” y seremos redirigidos a nuestro proyecto en producción, completamente en línea:
¡Eso ya es excelente! ¡Nuestro proyecto está funcionando en producción! El proceso fue bastante simple, ¿verdad?
La dirección del proyecto tiene la URL por defecto de Vercel, con el final “.vercel.app”. Pero deseamos configurar un dominio personalizado. ¿Cómo podemos hacer esto? A continuación lo aprenderemos.
Configurando dominio personalizado en Vercel
Para comenzar la configuración de nuestro dominio personalizado, vamos a acceder al Dashboard de nuestro proyecto. En la página inicial haremos clic en “View Domains”:
En la siguiente página definiremos la dirección que deseamos para nuestro proyecto. Recuerda que es importante tener la posesión de este dominio. En mi caso, poseo el dominio myapp.dev.br, adquirido en el sitio registro.br. Puedes adquirir un dominio en este sitio por alrededor de R$ 40,00 al año. Es este dominio que informaré a Vercel:
Después de hacer clic en “Add”, nuestro dominio será agregado al proyecto. Veremos a continuación la información de abajo:
Ten en cuenta que Vercel ha devuelto un error, informando que el dominio tiene una configuración inválida. Y esto tiene sentido, porque de hecho no configuramos nuestro DNS en registro.br, pero eso es lo que haremos ahora.
Presta atención a los parámetros que están resaltados en la imagen, porque serán necesarios para realizar esta configuración.
Ahora vamos a acceder al sitio registro.br (ten en cuenta que es solo .br, sin el .com) y realizar el inicio de sesión. En mi cuenta se mostrará el dominio myapp.dev.br, como podemos ver a continuación:
Haremos clic en el nombre del dominio. En la página que se abrirá haremos clic en “Editar Zona”, que estará en la sección “DNS”:
En la siguiente página haremos clic en “Nueva Entrada”:
Ahora informaremos los parámetros que fueron informados por Vercel, que están resaltados en algunas imágenes arriba. Después de esto haremos clic en “Agregar”:
No olvides presionar “Guardar” antes de salir de la página:
Justo después de esto, veremos que el dominio en Vercel habrá sido “regularizado” y ahora estará funcionando:
Así, al acceder a https://myapp.dev.br/, veremos el siguiente resultado:
¡Excelente! ¡Nuestro proyecto ahora funciona con nuestro dominio personalizado!
Nuestro proyecto ya está funcionando perfectamente, pero si lo deseamos podemos hacerlo un poco más completo, agregando también el mismo dominio con el prefijo www.
Para eso, simplemente repite el proceso que acabamos de realizar, pero con algunos cambios.
Vamos a configurar una entrada más en registro.br, con las configuraciones debajo:
Ahora, agregaremos otro dominio en Vercel, llamado www.myapp.dev.br:
A continuación, haremos clic en Edit y seleccionaremos nuestro dominio principal en la opción “Redirect to”. Luego, solo hay que hacer clic en “Save”:
Con esta configuración, establecemos que, al acceder al dominio de nuestro proyecto con www, seremos automáticamente redireccionados al dominio principal, lo que hará que ambos caminos funcionen.
Así, no importa qué URL informemos, nuestro proyecto será encontrado:
Conclusión
En este artículo aprendimos a realizar el despliegue de una aplicación Nuxt JS en Vercel. Esta plataforma es realmente una excelente opción para hospedar nuestros proyectos de una manera simple y descomplicada.
Nuxt JS está basado en el framework Vue JS. Y puedes aprender todos los recursos de este increíble framework en nuestro Curso Completo de Vue JS, estamos seguros de que te ayudará a evolucionar en esta herramienta.
Gracias por haber leído hasta aquí y hasta el próximo artículo :)