Penpot es la primera plataforma de diseño y creación de prototipos de Código Abierto pensada para equipos multidisciplinares. Penpot no depende de sistemas operativos, está basado en la web y funciona con estándares abiertos como SVG.

Penpot invita a diseñadores de todo el mundo a enamorarse del Código Abierto y, a cambio, entusiasma a los desarrolladores con el proceso de diseño. Además, reta a los SysAdmins a realizar tutoriales explicando la instalación -bueno, esto último lo he añadido yo 😂 -.

A parte de la web oficial, tenemos disponible sus repositorios en Github y también la documentación oficial que usaremos para realizar este tutorial.

Para este tutorial lo realizaremos sobre Ubuntu 22.04 y utilizaremos Docker para la instalación de la aplicación.

Instalación de Docker

Para la instalación de Docker, seguiremos este otro tutorial:

Instalación de Docker en Ubuntu 22.04

Docker es una aplicación que simplifica el proceso de gestión de los procesos de las aplicaciones en contenedores. Los contenedores le permiten ejecutar sus aplicaciones en procesos aislados de recursos.

_ voidNullDon T3rr0rZ0n3

adduser penpot
usermod -aG docker penpot

Instalación de Penpot

Para instalar Penpot, utilizaremos el fichero docker-compose.yaml proporcionado por la gente de Penpot, para ello nos los descargaremos:

wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/config.env

La configuración se define utilizando variables de entorno en el archivo config.env y el archivo descargado ya viene con las variables esenciales ya configuradas y otras comentadas con los comentarios apropiados.

Ahora levantamos los contenedores:

docker-compose -p penpot -f docker-compose.yaml up -d

Con el resultado final:

Creating penpot_penpot-postgres_1 ... done
Creating penpot_penpot-redis_1    ... done
Creating penpot_penpot-exporter_1 ... done
Creating penpot_penpot-backend_1  ... done
Creating penpot_penpot-frontend_1 ... done

Desde ahora tendremos la aplicación escuchando por el puerto 9001, lo que configuraremos ahora será un Nginx Proxy para configurar un dominio y SSL.

Instalación de Nginx Proxy

Lo siguiente será configurar acceso externo con un Nginx Proxy, para eso seguiremos este otro tutorial:

Configurar Proxy Inverso con Nginx para que escuche a un puerto interno

En ocasiones tenemos servicios o aplicaciones web que escuchan directamente a un puerto interno. Para evitar acceder a dicha aplicación o servicio por la IP del servidor, una configuración que podemos hacer es acceder desde un Nginx Proxy.

_ voidNullDon T3rr0rZ0n3

Configuración de SSL

Para acabar, lo que configuraremos será el SSL para el dominio:

Cómo utilizar Certbot para configurar un SSL de Let’s Encrypt en GNU/Linux

Certbot es una maravillosa herramienta que puedes utilizar para generar un certificado SSL con Let’s Encrypt e instalarlo y configurar automáticamente en tu servidor web.

_ voidNullDon T3rr0rZ0n3

Últimos pasos

Tras finalizar la instalación del certificado SSL, podremos acceder vía dominio:

Si no hemos configurado el SMTP -esto os lo dejamos a vosotros- podemos crear un usuario para probar que funciona correctamente. Para ello ejecutaremos este comando:

docker exec -ti penpot_penpot-backend-1 ./manage.sh create-profile -u "Tu Email" -p "Tu contraseña" -n "Tu nombre"

Y esta esa la salida:

[2023-01-03 12:19:22.710] I app.metrics - action="initialize metrics"
[2023-01-03 12:19:22.849] I app.db - hint="initialize connection pool", name="main", uri="postgresql://penpot-postgres/penpot", read-only=false, with-credentials=true, min-size=0, max-size=60
User created successfully.

E iniciamos sesión con el usuario que acabamos de crear: