¶ Docker compose pour HomePage
Nous partons toujours dans une architecture type monservice = undossier
Les hyperliens font référence à la version en cours lors du déploiement
Donc dans un premier temps, je crée un dossier homepage
mkdir homepage
cd homepage
Nous allons maintenant mettre en place un fichier compose pour mettre en place le container
nano docker-compose.yml
Dans ce compose nous allons mettre les paramètres:
version: "3.3"
services:
homepage:
image: ghcr.io/gethomepage/homepage:latest
container_name: homepage
# il s'agit du port externe/port interne machine
ports:
- 3030:3000
volumes:
- ./config:/app/config
- /var/run/docker.sock:/var/run/docker.sock:ro
- ./images:/app/public/images
restart: unless-stopped
¶ Description du fichier compose
version: "3.3" : Indique la version de la syntaxe Docker Compose utilisée.
services: : Définit les services qui composent l'application. Dans ce cas, il y a un service appelé "homepage".
homepage: : Nom du service.
image: ghcr.io/gethomepage/homepage:latest : Spécifie l'image Docker à utiliser pour le service. L'image utilisée est ghcr.io/gethomepage/homepage avec l'étiquette latest.
container_name: homepage : Donne un nom spécifique au conteneur (dans ce cas, "homepage").
ports: - 3030:3000 : Mappe le port 3030 de la machine hôte sur le port 3000 à l'intérieur du conteneur. Cela signifie que vous pouvez accéder à l'application en utilisant le port 3030 de votre machine.
volumes: - ./config:/app/config : Montre le dossier local ./config dans le conteneur à l'emplacement /app/config. Cela peut être utilisé pour fournir des fichiers de configuration à l'application.
volumes: - ./var/run/docker.sock:/var/run/docker.sock:ro : Montre le fichier docker.sock de la machine hôte dans le conteneur. Cela peut être utilisé pour permettre au conteneur d'interagir avec le Docker daemon de l'hôte.
volumes: - ./images:/app/public/images : Montre le dossier local ./images dans le conteneur à l'emplacement /app/public/images.
restart: unless-stopped : Indique à Docker de redémarrer le conteneur automatiquement, sauf si vous l'arrêtez explicitement.
¶ Mise en production
Maintenant que nous mis en place un fichier compose, nous allons démarrer ce dernier.
docker compose up -d
Nous pourrons voir avec la commande "docker ps -a" que le container est up et redirige bien vers le ports 3030
Une fois le container up, nous pouvons aller sur un navigateur et confirmer la disponibilité, il faudra recupérer l'ip de la machine et ajouter le port 3030 exemple: 10.0.0.15:3030
¶ Configuration HomePage
Maintenant que nous avons une page d'accueil fonctionnelle, nous allons voir pour la "customiser" un peu.
Vous trouverez pas mal d'info sur le site officiel: Site Homepage Dev
En voici quelques une: (je ferais des mises à jour au fur et à mesure)
Les modifications seront faites directement dans les fichiers de configuration qui ce trouverons pour notre Lab dans config/
¶ Les settings
https://gethomepage.dev/v0.8.0/configs/settings/
Il sera possible de mettre la page en Français en ajoutant:
language: fr
Changer le nom de l'onglet sur votre navigateur
title: Ma homepage
Ajouter une image de fond (attention il faudra pas oublier de monter le volume images dans le compose)
background: /images/background.png
et jouer avec son opacité
background:
image: /images/background.png
blur: sm # sm, "", md, xl... see https://tailwindcss.com/docs/backdrop-blur
saturate: 50 # 0, 50, 100... see https://tailwindcss.com/docs/backdrop-saturate
brightness: 50 # 0, 50, 75... see https://tailwindcss.com/docs/backdrop-brightness
opacity: 50 # 0-100
De faire en sorte que le thème soit dark et une couleur spécifique
theme: dark # or light
color: slate
Etc etc...voici le miens, simple mais efficace
title: Notre dashboard
language: fr
background:
image: ./images/back.png
theme: dark
color: teal
¶ Les bookmarks
https://gethomepage.dev/v0.8.0/configs/bookmarks/
Ce sont les petits raccourcis rapides en bas de votre page, par defaut vous avez:
- Developer:
- Github:
- abbr: GH
href: https://github.com/
- Social:
- Reddit:
- icon: reddit.png
href: https://reddit.com/
description: The front page of the internet
- Entertainment:
- YouTube:
- abbr: YT
href: https://youtube.com/
Rien à dire la dessus, à vous de voir ce que vous voulez mettre, un exemple:
- Gestion:
- Jeedom:
- abbr: JE
href: https://192.168.1.X
- Zigbee:
- abbr: Z2M
href: http://192.168.1.XX:8080
¶ Les services
https://gethomepage.dev/v0.8.0/configs/services/
Il sera possible de mettre en place plusieurs liens vers vos pages de gestion/services utiles
Par défaut il y aura:
- My First Group:
- My First Service:
href: http://localhost/
description: Homepage is awesome
- My Second Group:
- My Second Service:
href: http://localhost/
description: Homepage is the best
- My Third Group:
- My Third Service:
href: http://localhost/
description: Homepage is 😎
encore une fois à vous de renseigner ce dont vous avez "besoin", voici un exemple
- Les utiles:
- Gmail:
icon: gmail.png
href: https://mail.google.com
description: Messagerie Gmail
- Youtube:
icon: youtube.png
href: https://youtube.com
description: Youtube/Vidéo
- Facebook:
icon: facebook.png
href: https://www.facebook.com
description: Facebook/Social
¶ La barre de recherche
Il est possible de choisir le moteur de recherche que nous voulons pour nos recherches:(Il faudra pour cela modifier le fichier widget.yaml)
- search:
provider: google
target: _blank
Et voilà un bon début pour faire un joli dashboard pour votre homelab !
¶ Les petits plus
L'avantage d'homepage, c'est qu'il est possible de mettre directement depuis la page principale, des informations sur vos services, adguard, proxmox, docker etc.
En voici quelques uns (en autre ceux que j'ai en place chez moi).
Les modifications ce ferons directement sur le fichier "services.yaml"
Voici la page pour la plus part des confugurations: https://gethomepage.dev/v0.8.0/widgets/
¶ Proxmox
Vous devrez générer un jeton d'API pour un nouvel utilisateur ou un utilisateur existant. Voici un exemple de comment faire cela pour un nouvel utilisateur.
- Accédez au portail Proxmox, cliquez sur Datacenter.
- Développez Permissions, cliquez sur Groups.
- Cliquez sur le bouton Create.
- Nommez le groupe de manière informative, par exemple api-ro-users.
- Cliquez sur le "dossier" Permissions.
- Cliquez sur Ajouter -> Permission de groupe.
- Chemin : /
- Groupe : groupe du point 4 ci-dessus
- Rôle : PVEAuditor
- Propagation : Coché
- Développez Permissions, cliquez sur Users.
- Cliquez sur le bouton Ajouter.
- Nom d'utilisateur : quelque chose d'informatif comme api.
- Realm : Authentification standard Linux PAM.
- Groupe : groupe du point 4 ci-dessus.
- Développez Permissions, cliquez sur API Tokens.
- Cliquez sur le bouton Ajouter.
-- Utilisateur : utilisateur du point 8 ci-dessus.
-- ID du jeton : quelque chose d'informatif comme l'application ou l'objectif comme homepage.
-- Séparation des privilèges : Coché - Revenez au menu "Permissions".
- Cliquez sur Ajouter -> Permission du jeton API.
-- Chemin : /
-- Jeton API : sélectionnez l'ID du jeton créé à l'étape 10.
-- Rôle : PVE Auditor
-- Propagation : Coché - Utilisez username@pam!Token ID comme nom d'utilisateur (par exemple, api@pam!homepage) et Secret comme paramètre de mot de passe.
Champs autorisés : ["vms", "lxc", "resources.cpu", "resources.mem"].
widget:
type: proxmox
url: https://proxmox.host.or.ip:8006
username: api_token_id
password: api_token_secret
node: pve-1 # optional
voici la mise en place dans le fichier services:
- Proxmox prod:
icon: proxmox.png
href: https://lipduserveur:8006
description: Pve
widget:
type: proxmox
url: https://lipduserveur:8006
username: leusernameapi
password: lacléapigénérerparproxmox
node: pve
¶ AdGuard
L'utilisateur et le mot de passe est le même que sur l'interface web de gestion de votre service.
Champs autorisés : ["queries", "blocked", "filtered", "latency"].
widget:
type: adguard
url: http://adguard.host.or.ip
username: admin
password: password
voici la mise en place dans le fichier services:
- AdGuard:
icon: mdi-web
href: http://lipdemonadguard
description: Gestion DNS
widget:
type: adguard
url: http://lipdemonadguard
username: moncompte
password: monpassword
¶ Portainer
Vous devrez vous assurer d'avoir l'environnement défini pour que l'intégration fonctionne correctement. Depuis la section Environnements à l'intérieur de Portainer, cliquez sur celui auquel vous souhaitez vous connecter et observez l'ID à la fin de l'URL, cela doit ressembler à quelque chose comme #!/endpoints/1, ici 1 est la valeur à définir comme valeur d'environnement.
Pour générer une clé API, veuillez suivre les étapes décrites ici https://docs.portainer.io/api/access.
Champs autorisés : ["running", "stopped", "total"].
widget:
type: portainer
url: https://ipduportainer:9443
env: 1
key: lacledaccesportainer
voici la mise en place dans le fichier services:
- Portainer :
icon: portainer.png # il faudra mettre l'icone sur le serveur
href: https://ipduserveur:9443
description: Docker service
widget:
type: portainer
env: 1
url: https://ipduportainer:9443
key: lacledaccesportainer