Cómo instalar Directus Headless CMS en Ubuntu 20.04

Cómo instalar Directus Headless CMS en Ubuntu 20.04

Un CMS sin cabeza (más comúnmente conocido como headless CMS) es un sistema de gestión de contenidos que proporciona la información que contiene a través de una API. En este contexto, la cabeza se refiere al medio mediante el cual se presenta el contenido al usuario, mientras que el cuerpo es donde se crea y almacena. A diferencia de un CMS tradicional como WordPress, un headless permite elegir a qué cabezas (o salidas) envía su contenido en vez de hacerlo a una aplicación predeterminada. Hoy aprenderás cómo instalar Directus Headless CMS en Ubuntu 20.04, una alternativa gratuita y open source para alojar en tu propio servidor.

Es importante aclarar la diferencia que existe entre un CMS headless y uno desacoplado. Este último presenta las mismas características que la opción tradicional y además añade una API para el acceso a los contenidos. En cambio, el primero usa una API como método exclusivo para el mismo fin.

Entre las características distintivas de Directus podemos mencionar las siguientes:

  • Posibilidad de emplear distintos tipos de bases de datos (MySQL, PostgreSQL, Oracle, SQL Server, SQLite entre los más conocidos) utilizando una existente o creando una desde cero.
  • API REST o GraphQL.

Requisitos previos

Paso 1: Instalación de Directus

Antes de comenzar, crea una base de datos para hospedar los contenidos:

sudo mysql
CREATE DATABASE directus DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci; 
GRANT ALL ON directus.* TO 'admindirectus'@'localhost';

Escribe exit para salir de la consola de MySQL y a continuación, utiliza npx para crear tu proyecto ejecutando el paquete de Node sin necesidad de instalarlo. Reemplaza donweb-directus-cms en el comando siguiente por un nombre de tu elección:

npx create-directus-project donweb-directus-cms

Al finalizar la creación del proyecto, verás la lista de selección que aparece abajo para elegir el motor de bases de datos que desees. En este caso utilizaremos MySQL, por lo que debes seleccionar la opción correspondiente y presionar Enter.

como instalar directus headless cms en ubuntu 20.04 db

A continuación, se instalará el driver de Directus para MySQL y al finalizar deberás ingresar los datos de conexión. Para los dos primeros (host y puerto) puedes mantener los valores por defecto presionando Enter o ingresar otros diferentes si corresponde. Luego escribe el nombre de la base de datos que creaste y las credenciales para acceder. Una vez que finalices, presiona Enter para que el proceso de instalación genere la estructura y los objetos de la base de datos.

como instalar directus headless cms en ubuntu 20.04 driver

Por último, es turno de crear el usuario administrativo con una dirección de correo electrónico y la contraseña respectiva. El proyecto estará listo para usarse al finalizar.

como instalar directus headless cms en ubuntu 20.04 adminuser

En el próximo paso iniciaremos la instancia de Directus y examinaremos un poco más de cerca la interfaz.

Paso 2: Inicio de sesión en Directus

Para continuar, ejecuta el proyecto a través de los comandos que muestra la imagen anterior:

cd donweb-directus-cms
npx directus start

Si todo sale correctamente, la aplicación debería iniciar en el puerto 8055. En caso de que el log indique uno distinto, asegúrate de permitir el tráfico como se especifica en los requisitos previos de este artículo.

Luego de ingresar las credenciales, verás la interfaz principal de Directus y podrás comenzar a crear colecciones. Estas se traducen en tablas que residen dentro de la base de datos que representa el proyecto en su totalidad.

Paso 3: Creación de colecciones e ítems

Para comenzar, haz clic en Create Collection y llena el formulario como muestran las imágenes siguientes. En el primero, escoge el nombre de la colección y deja el resto de los campos con sus valores por defecto. Por otro lado, en el siguiente habilitarás otros adicionales con la posibilidad de renombrarlos. Cuando termines, haz clic en el ícono que aparece en el extremo superior derecho para confirmar.

como instalar directus headless cms en ubuntu 20.04 collection

Hasta el momento tienes el esqueleto de una colección que puedes complementar con otros campos. Para agregar uno llamado nombre, haz clic en Create Field y después en Standard Field. Directus te presentará otro formulario para ingresar el nombre y las características del nuevo campo:

como instalar directus headless cms en ubuntu 20.04 nuevo campo nombre

Por el momento, puedes desplazarte a las siguientes pantallas (Field, Interface y Display) haciendo clic en la flecha y luego finalizar:

como instalar directus headless cms en ubuntu 20.04 nuevo campo end

Una vez creada la colección, dirígete a Collections, haz clic en la nueva colección y luego en el botón Create Item:

como instalar directus headless cms en ubuntu 20.04 nuevo item

Llena el formulario con los datos requeridos y guarda los cambios para finalizar.

Paso 4: Acceso a una colección mediante la API

Por defecto, todo el contenido del proyecto está a disposición únicamente para usuarios autenticados. Si bien esto es necesario para un ambiente de producción, en esta guía habilitaremos el acceso público a la colección Libros. Para esto, haz clic en Settings, Roles & Permissions y finalmente en Public:

como instalar directus headless cms en ubuntu 20.04 acceso publico

A continuación, tilda el acceso de lectura en las colecciones que indica la imagen:

como instalar directus headless cms en ubuntu 20.04 colecciones publicas

Gracias a que los cambios se guardan automáticamente, ahora puedes visitar la URL /items/libros para ver el contenido de la colección:

como instalar directus headless cms en ubuntu 20.04 api resultado

Recuerda habilitar un mecanismo de autenticación antes de continuar ingresando contenidos.

¡Felicitaciones! Ya has completado la creación de una colección y de un ítem en tu proyecto.

Conclusión

En esta guía aprendiste cómo instalar Directus Headless CMS en Ubuntu 20.04, a ejecutar un proyecto y a generar colecciones e ítems. Adicionalmente, utilizaste el navegador web para generar una consulta mediante la API utilizando el rol público. Como sugerencia final, te recomendamos utilizar PM2 para gestionar tu instancia de Directus y Nginx para servirla en un entorno productivo. Ya que el CMS es una aplicación de Node, puedes usar los pasos 3 y 4 de Instalar y configurar Node JS para una aplicación en producción para cumplir esos objetivos.

Gabriel Cánepa
Gabriel Cánepa

Gabriel trabaja actualmente como desarrollador full-stack en Scalar, una firma que se dedica a hacer valuaciones de empresas. Es Administrador de Sistemas certificado por la Fundación Linux y previamente ha escrito un gran número de artículos y contenidos técnicos sobre el tema para: DigitalOcean, Linode, Carrera Linux Argentina y Tecmint.

Tiene una certificación en programación de la Universidad de Brigham Young-Idaho, y está completando las carreras de programador y analista de sistemas en la Universidad Nacional de Villa Mercedes (UNViMe).

En su tiempo libre, Gabriel disfruta leyendo libros de Stephen R. Covey, tocando piano y guitarra, y enseñando conocimientos de programación a su dos hijas.