Tutorial: Primeros pasos con Astro — 12. Automatizar el despliegue con GitHub Webhooks + Content Island

00:00 / 00:00

12. Automatizar el despliegue con GitHub Webhooks + Content Island

Uno de los pasos más importantes en un proyecto es el despliegue. Es el momento en el que nuestro proyecto se convierte en algo real y accesible para todo el mundo.

Si todavía no has desplegado tu proyecto de Content Island en un servidor, te recomiendo que empieces por el Despliegue automático con Astro y Content Island usando Github Actions.

Una vez que ya tienes tu proyecto desplegado, es posible que quieras automatizar el proceso de despliegue cada vez que haces un cambio en tu proyecto de Content Island. Es decir, cada vez que añades un nuevo post, modificas un dato o incluso ya no quieres que esté visible, quieres que tu servidor realice un nuevo despliegue, sin tener que hacerlo manualmente.

Para ello, vamos a utilizar los webhooks de Content Island y Github.

¿Qué es un webhook?

Un webhook es una forma de avisar a otra aplicación que algo ha sucedido en la nuestra. Es decir, cuando se produce un evento en nuestra aplicación, se envía una petición a una URL que hemos definido previamente.

Github permite definir dos tipos de webhooks:

webhooks de repositorio: los cuales permiten notificar a servicios externos cuando se producen cambios en un repositorio, por ejemplo, cuando se hace un push o se crea un pull request.
webhooks de workflow: los cuales permiten lanzar un workflow de Github Actions cuando un servicio externo envía una petición a una URL.

En nuestro caso, vamos a utilizar el segundo, vamos a lanzar un workflow de Github Actions para desplegar nuestro proyecto en Github Pages cada vez que se produzca un cambio en nuestro proyecto de Content Island.

Paso 1: Crear un webhook en Github

Vamos a partir del proyecto que ya tenemos desplegado en Github Pages y vamos a utilizar el evento repository_dispatch de Github Actions para lanzar el workflow deploy.yml que ya tenemos definido y que se encarga de desplegar nuestro proyecto en Github Pages.

Para ello, actualizamos el fichero deploy.yml:

Añadimos el evento repository_dispatch en la sección on
Y definimos un nombre para el tipo de evento, por ejemplo, deploy-from-content-island. Este nombre permite identificar el evento que se ha lanzado, es decir, podemos definir varios eventos que realicen diferentes acciones y cada uno con su nombre.
En este caso, estamos haciendo el despliegue a Github Pages pero el flujo podría estar desplegando a cualquier otro proveedor como Azure, AWS, etc.

./.github/workflows/deploy.yml

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main
+ repository_dispatch:
+   types: [deploy-from-content-island]
...

Hacemos un commit y push con estos cambios:

git add .
git commit -m "add repository_dispatch event"
git push

Para poder lanzar este evento, GitHub tiene definido un dispatch event endpoint para lanzar peticiones POST a un evento en concreto.

Solamente necesitamos:

Un token de acceso, para ver que tenemos permisos para lanzarlo.
El propietario y nombre del repositorio.
Y por último, el tipo de evento que queremos lanzar.

Paso 2: Crear token de acceso

Vamos a crear un token de acceso para poder lanzar el evento deploy-from-content-island. Como vemos en la documentación, necesitamos que tenga el permiso Contents de escritura.

Así que, nos vamos a nuestra cuenta de Github, en el apartado de Settings (de nuestro perfil) ya que no se pueden crear tokens a nivel de repositorio.

En el menú de la izquierda, seleccionamos Developer settings, después Personal access tokens y le damos a Fine-grained tokens.

Generamos uno nuevo:

Le damos un nombre, por ejemplo, deploy-content-island-to-gh-pages.
Cambiamos el propietario del repositorio si es necesario, en este caso, content-island.
Seleccionamos la fecha de expiración, que queramos. Automáticamente Github nos mandará un correo para recordarnos que el token va a caducar y poder generar uno nuevo.
Le damos solamente acceso al repositorio que queremos desplegar.
Y por último, dentro de la sección Repository permissions, seleccionamos Contents de escritura.

Generamos el token y lo copiamos. Esta es la única vez que lo veremos, así que asegúrate de guardarlo en un lugar seguro.

Paso 3: Crear un webhook en Content Island

Ahora, nos queda crear un webhook en nuestro proyecto de Content Island.

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

Le damos a Crear Webhook:

Indicamos el nombre de la organización o propietario del repositorio, en este caso, content-island.
El nombre del repositorio.
Pegamos el token de acceso que acabamos de crear en Github.
Y por último, el nombre del evento que hemos definido en el workflow, en este caso, deploy-from-content-island.
Guardamos los cambios

Y ya podemos realizar cualquier cambio en nuestro contenido, por ejemplo, vamos a hacer que un post deje de estar visible.

Vamos a la pestaña Contenido, seleccionamos el post que queremos modificar y le damos al botón Despublicar. Esto hace que el estado del contenido cambie a borrador y por tanto ya no será público.

Además, si vamos nuestro repositorio de Github, en el panel de Actions, veremos que se ha lanzado un nuevo workflow con el nombre deploy-from-content-island y si abrimos la aplicación desplegada, vemos que ahora solamente tenemos cuatros posts disponibles.

Si volvemos a publicar el post, veremos que se lanza de nuevo el workflow y ahora vuelve a estar disponible en la aplicación.

¡Y listo! ya tenemos todo preparado para centrarnos en lo que realmente importa, nuestro contenido y no tener que preocuparnos por el despliegue de la aplicación.