Configuration Homer Dashboard¶

Vue d'ensemble¶

Homer est un dashboard statique qui centralise l'accès à tous les services du serveur IA (Ollama, Plex, MkDocs).

Architecture¶

┌─────────────────────────────────────┐
│  Nginx (port 8080)                  │
│  Document root: /data/homer         │
│                                     │
│  ├── index.html (Homer app)        │
│  ├── config.yml (votre config)     │
│  ├── resources/ (JS/CSS)           │
│  └── assets/ (logos, icons)        │
└─────────────────────────────────────┘

Installation automatique¶

Le playbook Ansible install-homer.yml déploie automatiquement Homer via GitLab CI/CD.

Commande manuelle (pour tests locaux) :

ssh ProbatioVault-IA-Server
cd /opt/probatiovault-ia-server
ansible-playbook -i ansible/inventory/hosts ansible/playbooks/install-homer.yml

Configuration¶

Le fichier de configuration se trouve dans /data/homer/config.yml.

Structure du fichier¶

---
# Homepage configuration
title: "ProbatioVault IA Server"
subtitle: "Infrastructure & Services Dashboard"
logo: "logo.png"

header: true
footer: '<p>ProbatioVault IA Server - <a href="https://gitlab.com/probatiovault/probatiovault-ia-server">GitLab</a></p>'

# Optional theme
theme: default
colors:
  light:
    highlight-primary: "#3367d6"
    highlight-secondary: "#4285f4"
    background: "#f5f5f5"
    card-background: "#ffffff"
    text: "#363636"
  dark:
    highlight-primary: "#3367d6"
    highlight-secondary: "#4285f4"
    background: "#131313"
    card-background: "#2b2b2b"
    text: "#eaeaea"

# Optional message
message:
  style: "is-dark"
  title: "👋 Bienvenue"
  icon: "fa fa-grin"
  content: "Serveur d'inférence IA - 2× RTX 5090 (64 GB VRAM)"

# Optional navbar
links:
  - name: "GitLab"
    icon: "fab fa-gitlab"
    url: "https://gitlab.com/probatiovault/probatiovault-ia-server"
    target: "_blank"
  - name: "Documentation"
    icon: "fas fa-book"
    url: "http://192.168.1.82:8000"
    target: "_blank"

# Services
services:
  - name: "IA & Machine Learning"
    icon: "fas fa-brain"
    items:
      - name: "Ollama API"
        logo: "assets/tools/ollama.png"
        subtitle: "LLM Inference Server"
        tag: "llm"
        url: "http://192.168.1.82:11434"
        target: "_blank"

  - name: "Media & Entertainment"
    icon: "fas fa-film"
    items:
      - name: "Plex Media Server"
        logo: "assets/tools/plex.png"
        subtitle: "Media Streaming"
        tag: "media"
        url: "http://192.168.1.82:32400/web"
        target: "_blank"

  - name: "Monitoring & Logs"
    icon: "fas fa-chart-line"
    items:
      - name: "System Logs"
        icon: "fas fa-terminal"
        subtitle: "journalctl & syslog"
        tag: "admin"
        url: "#"

  - name: "Documentation"
    icon: "fas fa-book"
    items:
      - name: "Project Docs (MkDocs)"
        icon: "fas fa-file-alt"
        subtitle: "Technical documentation"
        tag: "docs"
        url: "http://192.168.1.82:8000"
        target: "_blank"

Ajouter un service¶

1. Éditer le fichier de configuration :

ssh ProbatioVault-IA-Server
sudo vim /data/homer/config.yml

2. Ajouter un service dans une catégorie existante :

- name: "Nom du service"
  icon: "fas fa-icon"  # FontAwesome 5
  subtitle: "Description courte"
  url: "http://192.168.1.82:8888"
  tag: "category"

3. Redémarrer Nginx :

sudo systemctl restart nginx

4. Vérifier :

curl -I http://localhost:8080
# Doit retourner : HTTP/1.1 200 OK

Rafraîchir la page : http://192.168.1.82:8080 (Ctrl+Shift+R pour vider le cache)

Ajouter une catégorie¶

services:
  - name: "Nouvelle Catégorie"
    icon: "fas fa-server"
    items:
      - name: "Service 1"
        icon: "fas fa-cog"
        subtitle: "Description"
        url: "http://192.168.1.82:9000"
        target: "_blank"
      - name: "Service 2"
        icon: "fas fa-database"
        subtitle: "Description"
        url: "http://192.168.1.82:9001"
        target: "_blank"

Personnalisation des icônes¶

Utiliser FontAwesome 5 :

Recherche : https://fontawesome.com/v5/search
Format : fas fa-icon-name (solid), fab fa-icon-name (brands)

Exemples :

IA : fas fa-brain
Serveur : fas fa-server
Base de données : fas fa-database
Monitoring : fas fa-chart-line
GitLab : fab fa-gitlab
Docker : fab fa-docker

Utiliser un logo personnalisé :

- name: "Service personnalisé"
  logo: "assets/tools/custom-logo.png"
  subtitle: "Description"
  url: "http://example.com"

Placer le logo dans /data/homer/assets/tools/custom-logo.png.

Thèmes¶

Homer supporte les thèmes clair/sombre avec switch automatique.

Couleurs personnalisées :

colors:
  light:
    highlight-primary: "#3367d6"  # Couleur principale
    highlight-secondary: "#4285f4"  # Couleur secondaire
    background: "#f5f5f5"  # Fond de page
    card-background: "#ffffff"  # Fond des cartes
    text: "#363636"  # Couleur du texte
  dark:
    # Même structure pour le mode sombre

Gestion du service¶

Nginx :

# Statut
systemctl status nginx

# Redémarrer
sudo systemctl restart nginx

# Logs
sudo journalctl -u nginx -f

Vérifier l'accès :

curl -I http://localhost:8080
# Doit retourner : HTTP/1.1 200 OK

Vérifier les permissions :

ls -la /data/homer/
# Tout doit être : www-data:www-data avec 755 pour dossiers, 644 pour fichiers

Structure des fichiers¶

/data/homer/
├── index.html           # Application Homer (ne pas modifier)
├── config.yml           # Configuration personnalisée
├── resources/           # JS/CSS (ne pas modifier)
│   ├── index-*.js
│   └── index-*.css
├── assets/              # Icônes et logos
│   ├── icons/
│   │   ├── favicon.ico
│   │   └── logo.svg
│   └── tools/           # Logos de services
│       ├── ollama.png
│       └── plex.png
├── logo.png             # Logo Homer
├── registerSW.js        # Service worker
└── sw.js                # Service worker

Troubleshooting¶

Page blanche¶

Cause : Permissions incorrectes ou fichiers manquants.

Solution :

ssh ProbatioVault-IA-Server

# Vérifier les permissions
ls -la /data/homer/

# Corriger les permissions
sudo chown -R www-data:www-data /data/homer/
sudo chmod -R 755 /data/homer/
sudo find /data/homer/ -type f -exec chmod 644 {} \;

# Redémarrer Nginx
sudo systemctl restart nginx

Services non affichés¶

Cause : Fichier config.yml mal formaté ou non lu.

Solution :

# Vérifier la syntaxe YAML
ssh ProbatioVault-IA-Server
cat /data/homer/config.yml

# Valider le YAML (optionnel)
sudo apt install yamllint
yamllint /data/homer/config.yml

# Vérifier les logs Nginx
sudo journalctl -u nginx -n 50 --no-pager | grep -i error

404 Not Found¶

Cause : Nginx ne trouve pas les fichiers Homer.

Solution :

# Vérifier la config Nginx
cat /etc/nginx/sites-available/homer

# Doit contenir :
# root /data/homer;
# index index.html;

# Redémarrer Nginx
sudo systemctl restart nginx

Cache navigateur¶

Symptôme : Modifications non visibles après édition du config.yml.

Solution :

Chrome/Edge : Ctrl + Shift + R
Firefox : Ctrl + F5
Mac : Cmd + Shift + R

Ou ouvrir en navigation privée : Ctrl + Shift + N

Maintenance¶

Sauvegarder la configuration¶

# Backup
ssh ProbatioVault-IA-Server
sudo cp /data/homer/config.yml /tmp/homer-config-$(date +%Y%m%d).yml

# Restore
sudo cp /tmp/homer-config-20260211.yml /data/homer/config.yml
sudo systemctl restart nginx

Mettre à jour Homer¶

Via GitLab CI/CD (recommandé) :

Le playbook télécharge automatiquement la dernière version stable de Homer.

# Relancer le job ansible:install-homer dans GitLab

Manuellement :

ssh ProbatioVault-IA-Server
cd /opt/probatiovault-ia-server

# Télécharger la nouvelle version
HOMER_VERSION="24.05.1"  # Vérifier la dernière version
wget https://github.com/bastienwirtz/homer/releases/download/v${HOMER_VERSION}/homer.zip -O /tmp/homer.zip

# Extraire
sudo unzip -o /tmp/homer.zip -d /opt/homer/

# Copier les fichiers (sans écraser config.yml)
sudo rsync -av --exclude='config.yml' /opt/homer/ /data/homer/
sudo chown -R www-data:www-data /data/homer/
sudo systemctl restart nginx

Ajouter des logos personnalisés¶

1. Télécharger ou créer le logo (PNG, SVG, format recommandé : 64×64px)

2. Copier sur le serveur :

# Depuis votre machine locale
scp logo-custom.png ProbatioVault-IA-Server:/tmp/

# Sur le serveur
ssh ProbatioVault-IA-Server
sudo mv /tmp/logo-custom.png /data/homer/assets/tools/
sudo chown www-data:www-data /data/homer/assets/tools/logo-custom.png

3. Référencer dans config.yml :

- name: "Service personnalisé"
  logo: "assets/tools/logo-custom.png"
  subtitle: "Description"
  url: "http://192.168.1.82:9000"

Accès externe (optionnel)¶

Pour accéder à Homer depuis Internet via un reverse proxy :

Nginx reverse proxy :

location /dashboard {
    proxy_pass http://192.168.1.82:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

Traefik :

labels:
  - "traefik.enable=true"
  - "traefik.http.routers.homer.rule=Host(`dashboard.example.com`)"
  - "traefik.http.services.homer.loadbalancer.server.port=8080"

Ressources¶

Site officiel : https://github.com/bastienwirtz/homer
Documentation : https://github.com/bastienwirtz/homer/blob/main/docs/configuration.md
FontAwesome 5 : https://fontawesome.com/v5/search
Exemple de configuration : https://github.com/bastienwirtz/homer/blob/main/public/assets/config.yml.dist

Résumé¶

✅ Homer installé et configuré ✅ Nginx : Port 8080 ✅ Services configurés : Ollama, Plex, MkDocs ✅ Thème : Clair/sombre avec switch automatique ✅ Accès web : http://192.168.1.82:8080

Point d'entrée : http://192.168.1.82:8080 → Portail central vers tous les services