Links

Instalación de Directus en Ubuntu

Completa guía paso a paso para la instalación de Directus CMS Headless.

¿Qué es Directus CMS Headless?

Directus es una plataforma de Open Data que permite, muy rápida y fácilmente, convertir una base de datos SQL en una API y en una espectacular aplicación lista para gestionar contenido de cualquier tipo.

Antes de comenzar:

Esta guía está basada en la instalación de Directus CMS Headless dentro de un Cloud Server de DonWeb y con los pasos mínimos y necesarios para un proyecto en producción. Si vas a instalar Directus para realizar pruebas o utilizarlo localmente, puedes pasar por alto el paso de apuntar un dominio (1), los de la instalación y configuración de Nginx (11 y 12) y el de la instalación del certificado SSL (13).
Se trata de una guía práctica y enfocada en aquellos que se manejan cómodamente dentro de un servidor Linux. Si prefieres más explicaciones y algo de contexto, te recomendamos seguir esta otra más detallada y explicada: Cómo instalar Directus Headless CMS en Ubuntu 20.04

1. Apuntar dominio al servidor

Con disponer de un registro "A" en la zona DNS apuntando a la IP del servidor, es suficiente. Durante todo el proceso utilizaremos el dominio cloudfor.fun a modo de ejemplo, pero tu debes utilizar el tuyo en los distintos comandos y configuraciones.

2. Instalar Ubuntu 20.04 (mínima)

Este paso es muy sencillo desde la gestión de tu Cloud Server.

3. Habilitar puerto 8055

Ahora necesitamos habilitar el puerto 8055 que es utilizado por Directus para su funcionamiento. Esta tarea podrás hacerla directamente desde el Firewall en el panel de gestión de tu Cloud Server

4. Actualizar paquetes de repositorios

Es una muy buena práctica antes de comenzar con la instalación de los distintos componentes.
apt update && apt upgrade

5. Instalar MySQL

Si bien Directus conecta perfectamente con distintos motores de Bases de Datos de tipo SQL (PostgreSQL, SQLite, MariaDB, MS SQL Server, OracleDB, etc.), en nuestro ejemplo utilizaremos MySQL
apt install mysql-server
Con el siguiente comando podemos comprobar si la instalación fue correcta:
systemctl status mysql

6. Asegurar MySQL

Este paso es opcional y agrega algo de complejidad al proceso, sin embargo es altamente recomendable si estás pensando usarlo en un entorno en productivo.
¡La seguridad nunca está de más!
Para asegurar nuestra instalación de MySQL utilizaremos el scriptmysql_secure_installation. Este script interactivo nos irá realizando preguntas, a las que vamos a responder Y o N (Yes/No).
IMPORTANTE: antes de utilizar esta funcionalidad, debemos hacer unos cambios en el usuario root de MySQL para luego poder realizar la tarea sin inconvenientes.
Ingresamos al Shell de MySQL
mysql
Ya dentro del Shell de MySQL ejecutamos un comando ALTER USER para cambiar el método de autenticación del usuario root
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'MiPasswordSecreto';
Salimos del Shell de MySQL
exit
Ahora sí ejecutamos el script para asegurar nuestro MySQL, respondiendo a todas las preguntas que nos realiza con un Y o un N, seguido de un ENTER.
Si bien no es necesario responder afirmativamente cando nos pregunta si deseamos cambiar el password del usuario root, el resto de las respuestas te recomendamos que sean afirmativas.
mysql_secure_installation
Una vez terminado, volvemos a cambiar el método de autenticación del usuario root de MySQL al que viene por defecto, auth_socket, para poder acceder al Shell sin el password.
mysql -u root -p
ALTER USER 'root'@'localhost' IDENTIFIED WITH auth_socket;
exit

7. Crear un usuario y Base de Datos para Directus

Ya tenemos nuestro MySQL instalado y asegurado, ahora llegó el turno de crear la base de datos y el usuario para luego utilizar en nuestro proyecto de Directus.
Ingresamos al Shell de MySQL:
mysql
En el comando CREATE USER no te olvides de cambiar la contraseña por una que tu generes.
CREATE USER 'admindirectus'@'localhost' IDENTIFIED WITH mysql_native_password BY 'XXXXxxxx123!';
CREATE DATABASE directus DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
GRANT ALL ON directus.* TO 'admindirectus'@'localhost';
Salimos de la consola de MySQL
exit

8. Instalar NodeJS

Para instalar Node utilizaremos NVM (Node Version Manager)
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
source ~/.bashrc
nvm install 'lts/*'
Una vez terminado, podemos verificar las versiones de Node y NPM instaladas a través de los siguientes comandos:
node --version
npm --version

9. Instalar Directus y generar usuario administrador

Durante la instalación, se nos preguntará que motor de base de datos queremos utilizar. En este ejemplo vamos a utilizar MySQL y completaremos con los datos de la base de datos y el usuario que creamos.
Al finalizar, el script de instalación nos solicitará un email y su respectiva contraseña. Estas serán luego las credenciales del usuario administrador de nuestro Directus.
cd /home
npx create-directus-project donweb-directus
Resultado de la instalación de Directus

10. Ejecutar Directus y probar aplicación

cd /home/donweb-directus
npx directus start
En el navegador acceder a la IP de nuestro servidor y el puerto :8055. En nuestro ejemplo: http://168.197.49.108:8055
Con las credenciales generadas en el paso 8 podremos acceder desde como administradores.
Hasta aquí hemos instalado todo lo necesario para utilizar Directus y comenzar a realizar nuestras pruebas con esta plataforma.
Así mismo, si se trata de un proyecto que debe ser desplegado en producción, necesitaremos llevar a cabo algunos pasos extras, que siguen a continuación.
Para terminar la ejecución de Directus, en la consola presionamos Ctrl+C

11. Instalar y configurar PM2

Este quizás sea el paso más "complicado" de todo el proceso.
PM2 nos permitirá que el servicio de Directus corra en el servidor aun cuando abandonemos la sesión de nuestra consola o luego de un reinicio del servidor.
cd ~
npm install [email protected] -g
Ahora vamos a editar el archivo packaje.json, agregando la línea "start": "directus start" en la sección de scripts.
ngi
IMPORTANTE, no olvidar agregar la coma en el elemento anterior del objeto.
IMPORTANTE, no olvidar agregar la coma en el elemento anterior del objeto, tal como se muestra en la imagen.
Con la siguiente serie de comandos ejecutaremos Directus a través de PM2 y dejaremos configurado para que se ejecute automáticamente en un reinicio.
cd /home/donweb-directus
pm2 start npm --name "directus" -- start
pm2 startup systemd
pm2 save
systemctl enable pm2-root
systemctl start pm2-root

12. Instalar Nginx

apt install nginx
Al finalizar la instalación podemos verificar que se ejecutó correctamente con este comando.
systemctl status nginx

13. Configurar Nginx como proxy

Como Directus es una aplicación basada en Node JS que corre en un puerto específico (8055), instalaremos un servidor web Nginx y lo configuraremos con nuestro dominio a modo de proxy, de tal manera que Directus pueda ser accedido por un puerto web standard como el 80. Además, Nginx nos permitirá configurar un certificado SSL de forma simple y práctica.
Vamos a crear un archivo .conf para el dominio, en nuestro caso cloudfor.fun
nano /etc/nginx/sites-available/cloudfor.fun.conf
Allí copiaremos el siguiente texto, reemplazando el dominio por el que corresponda.
En la línea número 4 no olvides reemplazar el dominio por el tuyo.
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name cloudfor.fun; #reemplazar por el dominio que corresponda
location / {
proxy_pass http://localhost:8055;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Luego generaremos un enlace simbólico al archivo desde /sites-enabled/
cd /etc/nginx/sites-enabled
ln -s ../sites-available/cloudfor.fun.conf .
Eliminamos los archivos default de Nginx. Este paso es opcional pero lo recomendamos como una buena práctica.
rm /etc/nginx/sites-available/default
rm /etc/nginx/sites-enabled/default
Verificamos que la sintaxis es correcta
nginx -t
Finalmente reiniciamos Nginx
systemctl restart nginx
En este punto, es probable que al intentar acceder al dominio desde el navegador, se muestre un error indicando que no se puede acceder al sitio web ya que el servidor ha rechazado la conexión. Esto es porque el navegador está intentando conectar con nuestro dominio a través de HTTPS, y en el servidor el puerto de ese protocolo seguro (443) no está siendo "escuchado" por ninguna aplicación aún. Es por eso que avanzamos con el siguiente paso.

14. Instalar certificado SSL

Para esto, utilizaremos un certificado SSL de Let's Encrypt.
Para instalarlo y gestionar su renovación automática cada 3 meses, nos ayudaremos con la aplicación Cerbot que instalaremos con el siguiente comando:
apt install certbot python3-certbot-nginx -y
Una vez instalado el Cerbot, lo ejecutaremos para generar e instalar el certificado SSL de Let's Encrypt. ¡No olvides reemplazar por tu dominio en el siguiente comando!
certbot --nginx -d cloudfor.fun
Durante el proceso, el script interactivo te pedirá una dirección de email e irá haciendo algunas consultas. En un punto te preguntará si deseas que el script configure automáticamente la redirección HTTP -> HTTPS. Te recomendamos hacerlo, utilizando la opción 2.

15. Configurar Directus

Una vez que tenemos todo instalado y funcionando, realizaremos unas configuraciones mínimas (y necesarias) para que nuestro Directus funcione correctamente.
Para esto vamos a editar el archivo de variables de entorno .env que se encuentra en el directorio donde hicimos la instalación:
cd /home/donweb-directus
nano .env
Al finalizar la configuración, debemos guardar los cambios en el archivo y reiniciar el servicio de Directus con el siguiente comando:
cd /home/donweb-directus
pm2 restart directus

PUBLIC_URL

Configurar correctamente esta variable de entorno permitirá que los emails que se envían desde Directus (flujos, invitación a usuarios, reseteo de contraseñas) tenga sus links correctamente formados. De lo contrario los links e imágenes llegarán rotos.
Allí deberemos colocar el dominio (o subdominio) en el cual corre nuestro Directus. En nuestro ejemplo el dominio es https://cloudfor.fun
Configuración variables de entorno de Directus

SMTP EMAIL

Con la configuración por defecto de Directus los emails se enviarán a través de la función sendmail de Linux, y desde una casilla [email protected]
Esto puede ser suficiente para un entorno de pruebas. Sin embargo, para un entorno productivo como el que estamos armando, no es lo recomendado porque, muy probablemente, hará que esos correos lleguen a SPAM o directamente no lleguen a destino.
En nuestro caso utilizaremos el servicio de SMTP de una plataforma para envío de correos transaccionales como EnvialoSimple. Sin embargo, puedes utilizar cualquier cuenta de correo con SMTP.
Configuración SMTP para Directus
Con estas dos dos configuraciones básicas en el archivo .env ya podemos empezar a disfrutar de nuestro Directus CMS Headless. Así mismo, te recomendamos revisar la configuración de otros aspectos importantes como son el "Rate Limiting", "Caching" y "Security"
Recuerda que para que el cambio en el archivo de Variables de Entorno haga efecto, debemos reiniciar el servicio de nuestro Directus con este comando: pm2 restart directus

¡Listo!

¡Felicitaciones! con todos estos pasos finalizados ya puedes ingresar a tu dominio y disfrutar de Directus!
Instalación Directus CMS terminada
Configuración básica Directus CMS

Bonus track!!!! Actualizar Directus

Al tratarse de una aplicación Open Source muy popular y utilizada, la comunidad que desarrolla Directus genera actualizaciones muy frecuentes. Ya sea para corregir un bug, optimizar código, o agregar una nueva funcionalidad, el changelog del proyecto Directus es muy dinámico.
Para que puedas aprovechar todas las ventajas de un software actualizado para tu proyecto, te dejamos aquí los pasos para que realices la actualización de tu Directus que, por cierto, es muy rápida y sencilla.
IMPORTANTE: Antes de comenzar verifica en la documentación oficial si la versión de Node (node -v) de tu servidor, es soportada por la versión de Directus hacia la cual vas actualizar.

Paso 1: Backup

Antes de realizar cualquier actualización, te recomendamos realizar un backup completo de tu Directus.
En tus Cloud Servers de Donweb cuentas con la posibilidad de realizar hasta dos snapshots sin cargo, y esta es una manera rápida y simple de generar el backup.

Paso 2: Actualización

Una vez realizada una copia de seguridad, ejecuta estos comandos para actualizar.
  1. 1.
    Ingresa a la carpeta de tu proyecto Directus (en nuestro caso)
cd /home/donweb-directus
  1. 2.
    Ejecuta el siguiente comando para actualizar las librerias
npm update
Si tu Directus está en una versión 9.x y quieres actualizar a 10.1.1, entonces ejecuta el siguiente comando:
npm install [email protected]
  1. 3.
    Ejecuta el siguiente comando para actualizar la Base de Datos
npx directus database migrate:latest