Tutorial: Primeros pasos con Nextjs — 10. Desplegando en Vercel

00:00 / 00:00

1x

0.25x 0.5x 0.75x 1x 1.25x 1.5x 1.75x 2x

• 1. Creando el proyecto en Content Island
• 2. Definiendo el modelo de datos
• 3. Añadiendo datos
• 4. Creando el proyecto en Nextjs
• 5. Creando la estructura de carpetas
• 6. Conectando Content Island con Nextjs
• 7. Montando la página de About
• 8. Página con lista de posts
• 9. Montando un post
• 10. Desplegando en Vercel

10. Desplegando en Vercel

Vercel es una plataforma de alojamiento y automatización que permite a los desarrolladores desplegar aplicaciones web estáticas de forma sencilla y rápida.

Además, Vercel ofrece un plan gratuito que incluye:

• Alojamiento de sitios web estáticos.
• Certificado SSL.
• Integración continua.
• Etc.

En este ejemplo, vamos a ver cómo desplegar el proyecto "Get Started Nextjs" de Content Island en Vercel.

Paso 1: Crear un repositorio

Lo primero que necesitamos para desplegar este proyecto es un repositorio de GitHub:

• Abrimos nuestra cuenta en Github y le damos a crear uno nuevo.
• Le damos un nombre. get-started-deploy-vercel
• Podemos crearlo público o privado, como queramos. Porque después vamos a darle permisos a Vercel para que se conecte al repositorio.
• Y le damos directamente al botón de crear sin añadir ningún fichero.

Copiamos la URL del repositorio que acabamos de crear y lo clonamos en nuestro ordenador, en una carpeta vacía utilizando el siguiente comando:

git clone <URL del repositorio> .

Ponemos un punto al final para que git no añada una carpeta extra con el nombre del repositorio.

Ahora, teniendo clonado el repositorio con el proyecto de Nextjs en nuestro ordenador, simplemente copiamos todo el contenido y lo pegamos al proyecto que acabamos de crear y lo subimos al repositorio con los siguientes comandos:

git add .
git commit -m "Initial commit"
git push

Comprobamos que ahora ya esta subido el proyecto a nuestro repositorio de GitHub.

Paso 2: Configurar despliegue

Para configurar el despliegue en Vercel, necesitamos tener una cuenta en la plataforma.

Una vez logados, en la página principal, le damos al botón de Add new y seleccionamos la opción Project.

Si es la primera vez que lo hacemos, tenemos que darle permisos a Vercel para acceder a nuestra cuenta de GitHub (o puedes elegir otro proveedor de Git).

Podemos seleccionar todos los repositorios o solo los que queramos. En este caso, seleccionamos el repositorio que acabamos de crear.

Una vez configurado, ya podemos seleccionar el repositorio que queremos desplegar y nos aparecerán las opciones de configuración.

Automaticamente ha cogido el mismo nombre del repositorio para la aplicación, si queremos podemos cambiarlo:

Por defecto nos ha elegido el framework que estamos usando. Si lo necesitamos, podemos cambiar las settings de compilación, pero en este caso podemos dejar las que vienen por defecto.

Vamos a añadir una nueva variable de entorno porque recordemos que cuando se ejecuta la build del proyecto, se conecta con nuestro proyecto de Content Island para recuperar los datos de cada Post

Por lo que necesitamos configurar la variable de entorno CONTENT_ISLAND_SECRET_TOKEN y obtenemos el valor que nos proporciona Content Island en la pestaña General.

Y le damos a Deploy.

¡Y listo! Ya tenemos nuestro proyecto con Content Island y Nextjs desplegado en Vercel.

Paso 3: Configurar webhook en Content Island

Ahora, para que cada vez que hagamos un cambio en nuestro contenido de Content Island, se vuelva a desplegar el proyecto en Vercel, necesitamos configurar un webhook en nuestro proyecto.

Una vez logados en nuestra cuenta y después de seleccionar nuestro proyecto, vamos a la pestaña Webhook.

Le damos a Añadir nuevo Webhook y seleccionamos Vercel en el desplegable.

Primero, nos pedirá un nombre para el webhook (por ejemplo podemos usar el nombre que le dimos al proyecto en Vercel get-started-deploy-vercel).

Y para la URL del webhook, debemos ir a la configuración del proyecto en Vercel, en la sección Settings > Git y hacemos scroll hasta el apartado Deploy hooks:

Le ponemos un nombre (por ejemplo Content Island Webhook) y seleccionamos la rama main para que se despliegue cada vez que se active el webhook y le damos a Create Hook.

Por último, copiamos la URL que nos proporciona Vercel y la pegamos en el campo de URL del webhook en Content Island y guardamos los cambios.

¡Y ya está todo listo! Ahora, cada vez que hagamos un cambio en nuestro contenido de Content Island, se activará el webhook y se volverá a desplegar nuestro proyecto en Vercel.