Installer Penpot sur un NAS Synology en 5 minutes

Vous avez un NAS Synology et vous êtes Designer chevronné mais pas forcément l’âme d’un grand développeur ?

Vous avez eu vent de Penpot qui promet un outil de design similaire à Figma et surtout auto-hébergé ?

Voici comment déployer Penpot sur votre NAS Synology en quelques étapes seulement, et surtout en 5 minutes, montre en main 🚀

Pré-requis

Installer Container Manager

Avant tout, il faut être équipé de Container Manager sur son NAS Synology. Si vous ne l’avez pas, vous pouvez le télécharger depuis le “Centre de paquets”.

Monter un dossier partagé pour Container Manager

Une fois le paquet Container Manager installé, vous devez créer un dossier partagé depuis le panneau de configuration. Nommez le “docker” pour rester simple.

Si votre NAS est équipé d’un volume SSD en plus de vos volumes HDD, je vous recommande vivement de localiser le dossier partagé sur le volume SSD. Ça augmente considérablement les performances.

Octroyer les droits à Container Manager sur le dossier partager

Sauf si ce n’est pas déjà fait, Container Manager doit posséder les droits en lecture et écriture sur le dossier partagé. Vérifiez depuis l’onglet “Permissions → Utilisateur du système interne” à ce que Container possède les permissions en lecture/écriture

Configuration de Penpot

Préparer la structure du dossier partagé

Pour éviter les erreurs lors du déploiement du conteneur, créez les dossiers nécessaires depuis le dossier partagé “docker” avec File Station:

• “/docker/penpot”
• “/docker/penpot/assets”
• “/docker/penpot/pgdata”

Pourquoi faire cela ? Cela vous permet d’avoir la “main” sur vos fichiers. En cas de mise à jour ou de réinstallation des conteneurs du projet, vous vous éviterez des sueurs froides à savoir si vos fichiers ont été conservés

Modifier le docker-compose avec ses datas

Maintenant que vous avez préparé le dossier partagé pour vos conteneurs et surtout Penpot, il vous suffit de récupérer le fichier de configuration à cette adresse :

Remplacez le chemin du volume “penpot_assets” par “./assets”

Penpot-backend

On recommence la même modification pour le service “penpot-backend”

Remplacez le chemin du volume “penpot_assets” par “./assets”

Penpot-postgres

On réitère différemment pour la partie base de données

Remplacez le chemin du volume “penpot_postgres” par “./pgdata”

Créer un projet Penpot sur Container Manager

Depuis l’interface de Container Manager, aller dans “Projet” dans la sidebar et cliquez sur le bouton “Créer” et saisissez les informations suivantes :

• Nom du projet : “penpot”
• Chemin : (choisir le dossier partagé de Penpot préalablement créé)
• Source : sélectionnez “Créer un fichier docker-compose.yaml”
• Copiez-collez le fichier que vous venez de modifier dans la zone de texte juste en dessous
• Cliquez sur Suivant

Pour notre test, ne cochez pas la configuration du portail. Si vous souhaitez y accéder en ligne, il existe d’autres méthodes !

Cochez “Démarrer le projet dès sa création” et cliquez sur “Effectué”

Une fois les étapes de création terminées, vous aurez un terminal qui va télécharger et initialiser l’ensemble des paquets selon votre configuration depuis le fichier .yaml fournis plus tôt.

Attendez d’obtenir comme dernière ligne “Exit Code: 0”, cela veut dire que c’est enfin prêt à tourner !

Accéder à l’interface Penpot

Et maintenant, comment on y accède à Penpot ??? C’est hyper simple !

Admettons, l’adresse IP de votre NAS est “192.168.1.123”, ajoutez-y le port référencé par Penpot “:9001” à la fin de l’adresse IP du NAS, ce qui vous donne pour l’exemple :

Suivi des premières minutes où vous aurez démarré le conteneur Penpot, c’est tout à fait normal d’obtenir une soit disant page d’erreur. Vous n’avez qu’à attendre quelques minutes tout au plus, le temps que le conteneur s’initialise. Pour vous rassurer, voici à quoi elle resemble :

Bravo, vous avez attendu quelques minutes insoutenable à savoir si vous aviez fait tout bien, vous pouvez enfin vous inscrire sur votre propre Penpot !

Nb: vous pouvez désactiver les inscriptions depuis les Flags dans votre fichier compose.yaml