Synology [Tuto] Installation de Dashy en Docker sur Synology

EVO

EVO

Administreur
Membre du personnel
25 Novembre 2019
8 219
1 576
278
/var/run/docker.sock
[Tuto] Installation de Dashy en Docker sur Synology


Bonjour,
Un nouveau petit tuto pour vous apprendre à installer Dashy sur votre NAS Synology, avec Docker DSM.

Dashy c'est quoi ?
Dashy est un tableau bord de services Web autohébergés ou non. Sur une page, vous centralisez tous vos services Web préférés comme par exemple : OPNsense, WireGuard, DuckDNS, Pi-Hole, Grafana, Transmission, NextCloud, Home Assistant, Plex… mais aussi des liens/raccourcis de vos sites préférés.

Voici un aperçu en image :
68747470733a2f2f692e6962622e636f2f4c3859624e4e632f64617368792d64656d6f322e676966


Des sites de démonstration sont également disponible : Démo 1 - Démo 2 - Démo 3

Plus d'info sur Cachem ou sur le GitHub officiel.

Sommaire :
1/ Télécharger le conteneur
2/ Création du dossier d'installation et du fichier de configuration
3/ Récupération du PUID / PGID
4/ Paramétrage et Création du conteneur
5/ Accès à Dashy

C'est parti ! :giggle:

1/ Télécharger l'image Docker
Nous allons télécharger l'image lissy93/dashy, pour cela nous allons ouvrir docker et se rendre dans Registre et rechercher "dashy".
ca74hHd.png

Une fois l'image lissy93/dashy, on clique dessus, puis sur Télécharger"

2/ Création du dossier d'installation et du fichier de configuration
Dashy a besoin d'un dossier sur le NAS, ou il va pouvoir s'installer, enregistrer ses configurations, ...
Dans mon cas, j'ai choisi de le mettre dans un dossier partagé "docker", j'y est donc créé un dossier "dashy"
le chemin d’accès a ce dossier, pour ce tuto, sera donc /docker/dashy, il sera modifier suivant vos choix.

Dans ce dossier /dashy, vous devez créer :
- Un dossier item-icons
- Y placer un fichier conf.yml contenant ceci :

Code: 
---
pageInfo:
  title: Dashy
  navLinks:
  - title: Home
    path: /
  - title: About
    path: /about
  - title: Source Code
    path: https://github.com/Lissy93/dashy
appConfig:
  theme: colorful
  fontAwesomeKey: 0821c65656
  enableFontAwesome: true
  layout: "auto"
  iconSize: "medium"
sections:
- name: Getting Started
  items:
  - title: Source
    description: Source code and documentation on GitHub
    icon: fab fa-github
    url: https://github.com/Lissy93/dashy
  - title: Issues
    description: View currently open issues, or raise a new one
    icon: fas fa-bug
    url: https://github.com/Lissy93/dashy/issues
  - title: Demo 1
    description: 'Live Demo #1'
    icon: far fa-rocket
    url: https://dashy-demo-1.netlify.app
  - title: Demo 2
    description: 'Live Demo #2'
    icon: fad fa-planet-ringed
    url: https://dashy-demo-2.netlify.app

Donc pour résumé, un dossier dashy, avec dedans : un dossier item-icons et un fichier conf.yml

3/ Récupération du PUID / PGID
Il va falloir associer notre conteneur a un utilisateur du NAS, pour cela il faut connaitre le PUID et le PGID de cette utilisateur, pour cela, je vous laisse utiliser ce tuto : [Tuto] Connaitre le PUID / PGID d'un utilisateur.
Bien évidement, l'utilisateur choisi devra avoir les droits de lecture/écriture sur le dossier /dashy précédement créé !
On notera le PUID/PGID de l'utilisateur choisi, on va en avoir besoin juste après !

4/ Paramétrage et Création du conteneur
Une fois le téléchargement terminé, on peu dans l'onglet Image retrouver l'image précédemment téléchargée, on clique dessus, puis sur "Lancer"
( Si Lancer n'est pas disponible ( grisé ) cela signifie que l'image est encore en cours de téléchargement, elle fait environ 300Mo, suivant votre connexion cela peu prendre un peu de temps )
w24SqXh.png

Dans la 1ere page qui s'affiche, on choisi un nom, par défaut c'est "lissy93-dashy1", moi j'ai choisi de mettre uniquement "dashy".
qp0hU1A.png


Puis on clique sur "Paramètres avancés"
k4MAhoi.png


Dans l'onglet "Volume",
- Nous allons cliquer sur "Ajouter un dossier" et choisir le dossier "item-icons" que nous avons créé précédemment pour l'installation de l'image, et indiquer dans la colonne "Chemins d'acces" : /app/public/item-icons
- Puis on clique sur "Ajouter un fichier", et choisir le fichier conf.yml qui nous avons créé précédemment et indiquer dans la colonne "Chemins d'acces" : /app/public/conf.yml

Voici le résultat :
2021-10-07 21_59_53-Window.png

Dans l'onglet "Réseau", nous allons laisser "bridge".
xPGMJHd.png


Dans l'onglet "Paramètres des ports", il faut enlever le "Auto" présent dans Port local et indiquer par exemple "4000", dans ce cas, l'acces a Dashy ce fera par le port 4000. Dans le cas ou votre port 4000 est déja occupé vous pouvez choisir autre chose, mais pensez bien que c'est donc ce port qu'il vous faudra utiliser pour acceder a Dashy.
Dans mon cas, je choisi 4000 :
VfHGu6O.png


Dans l'onglet "Environnement", nous allons rajouter UID, et GID, respectivement par nos PUID / PGID trouvé dans le point 3 du tuto.
Dans mon cas 1000 / 100 :
yxMIavb.png


Maintenant, on clique sur "Appliquer", puis "Suivant", et on arrive a la page suivante :
LILk5ve.png

On clique sur "Appliquer" et le conteneur se créer, et démarre.
Dans l'onglet "Conteneur", on peu vérifier que notre conteneur est bien démarré !
OIeaZex.png


5/ Accès à Dashy
Rendez-vous à l'url de votre machine + le port 4000 pour afficher la page de connexion.
Par exemple si l'ip de votre machine est 192.168.1.10 alors l'adresse de Dashy sera : http://192.168.1.10:4000

WfB5Fab.png

Cette page s'affiche, Dashy est alors en train de charger la configuration présente dans le fichier conf.yml, cette étape, qui ne se faire qu'au 1er chargement, peut durer quelques secondes !

:giggle:

2021-10-07 - Correction d'une erreur sur le montage du dossier des icones.
Cliquez pour agrandir...
 
Dernière édition:
  • J'aime
Réactions: NasFlo
Hello ??
J’ai un fichier docker-compose.yml à te filer pour une installation avec docket-compose ou Portainer.
Je te le colle dès que je suis sur mon ordinateur.

Pour le fichier de configuration, il y a des subtilités à mettre en plus comme l’authentification.
Je te ferais aussi un topo dessus .


Ps : ce serait sympa que tu ajoutes une section Utilisation et configuration ?
 
Re-bonjour,
Alors, voilà mon docker-compose :
Code: 
##==============================================================================================
##                                                                                            ##
##                              Fichier docker-compose.yml Dashy                              ##
##                                                                                            ##
##                              https://github.com/Lissy93/dashy                              ##
##                                                                                            ##
##==============================================================================================

---
  # Welcome to Dashy! To get started, run `docker compose up`
version: "2.4"
services:
  Dashy:
    # To build from source, replace 'image: lissy93/dashy' with 'build: .'
    # build: .
    image: lissy93/dashy      # https://github.com/Lissy93/dashy
    container_name: Dashy

    volumes:
      # Le fichier de configuration :
      - "/volume1/docker/dashy/dashy-config.yml:/app/public/conf.yml"
      # Le dossier qui va conteneur les images PNG pour les icônes à afficher
      - "/volume1/docker/dashy/images:/app/public/item-icons/"
    
    ports:
      - 4000:80
    
    # Set any environmental variables
    environment:
      - NODE_ENV=production
    # Specify your user ID and group ID. You can find this by running `id -u` and `id -g`
      - UID=1000
      - GID=1000
    
    # ###############
    # Le label ci-dessous permet à Watchtower de faire les mises à jour automatiquement
    # Cela peut-être supprimé si Watchtower n'est pas utilisé.
    labels:
      - "com.centurylinklabs.watchtower.enable=true"
    # ###############

    # Specify restart policy
    restart: unless-stopped
    
    # Configure healthchecks
    healthcheck:
      test: ['CMD', 'node', '/app/services/healthcheck']
      interval: 1m30s
      timeout: 10s
      retries: 3
      start_period: 40s



Ensuite, les subtilités du fichier de configuration.
  • Pour une authentification Login/Mot de passe, il faut ajouter ces lignes dans la section appConfig :
    Code: 
      auth:
    - user: Nom_Utilisateur
      hash: HASHxxxSHA256xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxX
      type: admin
    Attention, le HASH SHA256 n'est pas le mot de passe en clair, c'est le hash de ce mot de passe, à obtenir avec une commande bash. Perso j'ai récupéré et modifié une fonction que je place dans mon .zshrc sur mon mac :
    Code: 
    # Fonction pour récupérer le hash sha256 d'un texte passé en argument
# Get SHA256 of a text
# Usage:   sha256 password
# output:  5e884898da28047151d0e56f8dc6292773603d0d6aabbdd62a11ef721d1542d8
function get_sha256() {
  text=$1
  echo "Texte à hasher : $text"
  echo -n "HASH sha256 = "
  hash=($(echo -n $text | shasum -a 256))
  echo $hash
  # Source: http://albertech.blogspot.fr/2015/02/generate-sha-256-hash-from-command-line.html
}
    (attention à bien mettre la chaine de caractère entre des ' guillemets simples ', sinon certains caractères spéciaux vont couper la chaine et le HASH ne sera pas bon...)
    NjFYCji.png


  • Pour qu'il y ait une pastille verte/rouge indiquant la disponibilité du lien, il est possible d'ajouter ces lignes, toujours dans le section appConfig :
    Code: 
      statusCheck: true
  statusCheckInterval: 0
    Dans ce cas, à chaque lancement de la page, la disponibilité des liens sera vérifiée.
  • Pour chaque bookmark, vous pouvez choisir de l'ouvrir dans un nouvel onglet, dans le même, ou dans une iframe, il faut pour cela ajouter ce qui suit dans la section du bookmark (voir fichier de configuration complet ci-dessous) :
    Code: 
            target: "newtab"
  • Si vous voulez mettre vos propres icônes, il faut avoir monté le volume pointant sur le dossier contenant les PNG (voir commentaire dans le fichier docker-compose.yml).
    Placer vos fichier PNG dans le dossier /volume1/docker/dashy/images/.
    Il est possible d'utiliser des sous-dossiers comme dans l'exemple qui suit qui correspond à l'image de DSM pour le raccourci du NAS :
    Code: 
            icon: "synology/dsm.png"
  • Si vous voulez utiliser les favicons des sites, il faut mettre :
    Code: 
            icon: "favicon"
Il y a plein d'autres subtilités, faut aller voir ici : https://github.com/Lissy93/dashy/blob/master/docs/configuring.md



Voilà le fichier de configuration :

Code: 
##==============================================================================================
##                                                                                            ##
##                                      dashy-config.yml                                      ##
##                             Fichier de configuration pour Dashy                            ##
##                                                                                            ##
##==============================================================================================

---
appConfig:
  theme: "nord"
  enableFontAwesome: true
  fontAwesomeKey: "0821c65656"
  layout: "auto"
  iconSize: "medium"
  statusCheck: true
  statusCheckInterval: 0
  auth:
    - user: Nom_Utilisateur
      hash: HASHxxxSHA256xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxX
      type: admin
pageInfo:
  title: "Dashy"
  description: "La page à bookmarks !"
  navLinks:
    - title: "Home"
      path: "/"
    - title: "About"
      path: "/about"
    - title: "Source Code"
      path: "https://github.com/Lissy93/dashy"
  footerText: ""
sections:
  - name: "1er Dossier"
    items:
      - title: "Forum des NAS"
        description: "ous les fabricants de NAS réunis sur un forum unique : Asustor, Qnap, Synology..."
        icon: "favicon"
        url: "https://www.forum-nas.fr/"
        target: "newtab"
  - name: "2nd Dossier"
    items:
      - title: "Accès NAS"
        description: "Accès LAN DSM"
        icon: "synology/dsm.png"
        url: "http://192.168.0.10:5000/"
        target: "newtab"


Voilà voilà,
Je te laisse intégrer à ta manière ces informations :)
 
Hello EVOTk,

Merci bcp pour ce tuto complet!

J'ai un soucis concernant les icones que je met dans le dossier "item-icons" dans docker/dashy!

En effet le lien est cassé (image barrée s'affiche à la place de l'image, il y a un format spécifique? Image en 150x150 ici).

Sinon, ma conf est celle du tuto, c'est à dire le volume monté comme suit :

NAS : /docker/dashy/item-icons /item-icons

Dans mon conf.yml, j'ai donc ce lien pour appeler mon icone :

icon: "dsaudio.png"

Merci d'avance!
 
@Morsure
As-tu bien monté le dossier /docker/dashy/item-icons lorsque tu as créé ton conteneur ?

Je viens de voir que le tuto d' @EVOTk n'a pas le bon chemin de montage de volume pour les icones :
Moi j'ai ceci :
- /volume1/docker/dashy/images:/app/public/item-icons

C'est ce qui est décrit dans la doc officielle : https://github.com/Lissy93/dashy/wiki/icons#local-icons

Alors que le tuto dit de monter le dossier images vers /item-icons dans le conteneur...
@EVOTk Faudrait modifier le tuto ;)
 
  • Wow
Réactions: EVO
Bonjour,

j'ai suivi ce tuto pour la mise en place de mon tableau de bord ,

j'ai vu que l'on pouvait mettre aussi des widgets,

je souhaite notamment mettre en place l'horloge : en suivant la documentation ici

mais j'avoue que je sais pas ou le place dans le fichier conf.yml de dashy en debut en fin du fichier ?
 
Vous devez vous connecter ou vous enregistrer pour répondre ici.
Haut Bas
Retour