Chordlab V2.0 - initial

TUTORIEL_DEPLOIEMENT_COOLIFY.md

@@ -0,0 +1,170 @@
+# _chordlab — Mise en ligne avec Coolify
+
+Déploiement sur l'infrastructure ghostinthemachine.fr, **sur le même modèle que le site des vacances** (`sudouest.ghostinthemachine.fr`) : dépôt Gitea → ressource Coolify en build pack **Static** → domaine servi par Traefik avec le certificat wildcard existant.
+
+Cible retenue dans ce tutoriel : `https://chordlab.ghostinthemachine.fr`
+
+> **Pourquoi héberger une app qui tient dans un fichier ?** Parce que **Web MIDI exige un contexte sécurisé** (`https://` ou `localhost`). En `file://`, la sortie MIDI live vers le hardware est bloquée par le navigateur. Une fois sur ton domaine en HTTPS, tout fonctionne — y compris depuis le portable posé à côté du studio.
+
+---
+
+## 0. Prérequis (déjà en place sur ton infra)
+
+- Serveur Scaleway avec **Coolify 4.x** et **Traefik** opérationnels
+- **Gitea** self-hosted accessible
+- Wildcard DNS `*.ghostinthemachine.fr` pointant vers le serveur (Cloudflare)
+- Certificat wildcard géré par acme.sh/Cloudflare — rien à faire côté SSL
+
+[PROBABLE] Les libellés exacts de l'interface Coolify peuvent varier légèrement selon la version ; le déroulé ci-dessous correspond au flux validé lors du déploiement du site des vacances.
+
+---
+
+## 1. Préparer le dépôt Gitea
+
+### 1.1 Créer le dépôt
+
+Dans Gitea : **+ → Nouveau dépôt** → nom `chordlab`. Comme pour le site des vacances, le contenu n'a rien de sensible : **le plus simple est de le créer public** (voir §2.2 pour la raison précise).
+
+### 1.2 Structurer et pousser
+
+```bash
+mkdir chordlab && cd chordlab
+git init
+
+# Le fichier de l'app DOIT s'appeler index.html
+# (le serveur statique sert index.html à la racine du domaine)
+cp /chemin/vers/chordlab_v2.html index.html
+
+# Documentation
+cp /chemin/vers/README.md .
+mkdir docs
+cp /chemin/vers/TUTORIEL_UTILISATION.md docs/
+cp /chemin/vers/TUTORIEL_DEPLOIEMENT_COOLIFY.md docs/
+
+git add .
+git commit -m "chordlab v2 — initial"
+git remote add origin https://git.ghostinthemachine.fr/matthieu/chordlab.git
+git push -u origin main
+```
+
+> Adapte l'URL du remote à ton instance Gitea réelle et à ton utilisateur.
+
+---
+
+## 2. Créer la ressource dans Coolify
+
+### 2.1 Nouvelle ressource
+
+1. Coolify → ton projet → **+ New → Resource**.
+2. Choisir **Public Repository** (dépôt public) et coller l'URL HTTPS du dépôt Gitea :
+   `https://git.ghostinthemachine.fr/matthieu/chordlab.git`
+3. Branche : `main`.
+4. **Build Pack : Static** — c'est le point clé. Pas de Dockerfile, pas de Nixpacks : Coolify sert simplement les fichiers via un conteneur nginx.
+5. **Publish Directory : `/`** (l'`index.html` est à la racine du dépôt).
+
+### 2.2 ⚠️ Le piège du dépôt privé (leçon du site des vacances)
+
+Si le dépôt Gitea est **privé** et que la ressource est de type « Public Repository », le déploiement échoue avec :
+
+```
+exit code: 128
+fatal: could not read Username for 'https://git.ghostinthemachine.fr'
+```
+
+Coolify clone sans credentials, Gitea refuse. Deux solutions, exactement comme la dernière fois :
+
+| Option | Quand | Comment |
+|---|---|---|
+| **A. Rendre le dépôt public** | contenu non sensible (notre cas) | Gitea → dépôt → Paramètres → cocher « Visibilité : public ». Redéployer. C'est la solution retenue pour le site des vacances. |
+| **B. Deploy Key SSH** | si tu tiens au dépôt privé | Coolify → ressource → Source → générer une clé de déploiement → l'ajouter dans Gitea (dépôt → Paramètres → Clés de déploiement) → utiliser l'URL **SSH** du dépôt (`git@git.ghostinthemachine.fr:matthieu/chordlab.git`) |
+
+### 2.3 Domaine
+
+Dans la ressource → **Domains** :
+
+```
+https://chordlab.ghostinthemachine.fr
+```
+
+- Le wildcard DNS Cloudflare couvre déjà `chordlab.ghostinthemachine.fr` → aucune entrée DNS à créer.
+- Bien saisir le domaine **avec `https://`** : c'est ce qui pilote la génération des labels Traefik pour la redirection et le TLS.
+
+### 2.4 Déployer
+
+Bouton **Deploy**. Le log doit montrer : clone du dépôt → build statique → conteneur démarré. Première mise en ligne : généralement moins d'une minute.
+
+---
+
+## 3. Vérifications post-déploiement
+
+1. **`https://chordlab.ghostinthemachine.fr`** répond avec l'interface (face avant beige, LCD).
+2. **Cadenas SSL** valide (certificat wildcard).
+3. **Test Web MIDI** : interface USB-MIDI branchée → recharger la page → le navigateur demande l'autorisation MIDI → le périphérique apparaît dans le panneau *MIDI out (live)* et le LCD affiche `MIDI ON`. Si l'autorisation n'est jamais demandée, vérifier que l'URL est bien en `https://` (c'était le même principe que le micro pour LibreChat : pas de périphérique sans contexte sécurisé).
+4. **Test export** : deux accords → ADD → `↓ exporter .mid` → le fichier se télécharge.
+
+---
+
+## 4. Mise à jour de l'application
+
+Même mécanique que pour le site des vacances : **le dépôt Git est la source de vérité**, Coolify redéploie depuis le dernier commit.
+
+### 4.1 Mise à jour manuelle (workflow de base)
+
+```bash
+cd chordlab
+# remplacer index.html par la nouvelle version de l'app
+cp /chemin/vers/chordlab_v2.html index.html
+
+git add index.html
+git commit -m "v2.1 — <description du changement>"
+git push
+```
+
+Puis dans Coolify → ressource `chordlab` → **Redeploy**. Le conteneur est reconstruit avec les nouveaux fichiers ; interruption de service quasi nulle.
+
+### 4.2 Déploiement automatique au push (optionnel)
+
+Pour supprimer l'étape manuelle :
+
+1. Coolify → ressource → **Webhooks** → copier l'URL du webhook de déploiement.
+2. Gitea → dépôt `chordlab` → **Paramètres → Webhooks → Ajouter un webhook → Gitea**.
+3. URL cible : l'URL Coolify copiée · Événement : **Push** · branche `main`.
+4. Tester avec « Test Delivery », puis faire un commit de contrôle : chaque `git push` déclenche désormais le redéploiement.
+
+### 4.3 Revenir en arrière
+
+Deux options :
+- **Git** : `git revert <commit>` puis push (propre, historisé — à préférer) ;
+- **Coolify** : la liste des déploiements permet de relancer une image précédente. [INCERTAIN] La disponibilité du rollback en un clic dépend de la version de Coolify ; le revert Git fonctionne dans tous les cas.
+
+---
+
+## 5. Dépannage
+
+| Symptôme | Cause probable | Correction |
+|---|---|---|
+| `exit code: 128 — could not read Username` | dépôt privé cloné sans credentials | §2.2 : dépôt public ou Deploy Key SSH |
+| 404 Traefik sur le domaine | domaine mal saisi dans la ressource, ou routeur pas régénéré | vérifier Domains (avec `https://`), redéployer ; en dernier recours contrôler les labels du conteneur (`docker inspect`) |
+| La page charge mais pas de demande d'autorisation MIDI | contexte non sécurisé ou navigateur Safari | vérifier `https://`, utiliser Chrome/Edge/Firefox |
+| Ancienne version affichée après redéploiement | cache navigateur (fichier HTML unique) | rechargement forcé (Ctrl+Shift+R) ; si récurrent, ajouter un query string versionné dans les liens partagés (`?v=2.1`) |
+| Le conteneur tourne mais rien ne répond | l'app n'est pas nommée `index.html` à la racine, ou Publish Directory incorrect | renommer le fichier / corriger le Publish Directory, redéployer |
+| Périphérique MIDI absent de la liste | interface branchée après le chargement | recharger la page (l'app écoute les changements, mais certains OS n'exposent le port qu'à la connexion) |
+
+---
+
+## 6. Récapitulatif du modèle
+
+```
+[poste local]                [serveur ghostinthemachine.fr]
+index.html ──git push──▶ Gitea ──clone──▶ Coolify (Static build pack)
+                                              │
+                                              ▼
+                                    conteneur nginx statique
+                                              │
+                                    Traefik + wildcard SSL
+                                              │
+                                              ▼
+                              https://chordlab.ghostinthemachine.fr
+```
+
+Un fichier, un push, un redeploy. Le même modèle resservira pour toute page ou micro-app statique à venir.