# Session 2025-12-31 : Correction Docker - Servir les images

## 🎯 Problème

Les images uploadées dans le module périphériques n'étaient pas accessibles depuis le frontend.

**Erreurs** :
```
GET http://10.0.0.50:8087/app/uploads/peripherals/photos/3/csfingerprint_20251231_092242.webp
[HTTP/1.1 404 Not Found]
```

## 🔍 Analyse

### Problème 1 : Montage de volume impossible
Tentative initiale de monter `./uploads` vers `/usr/share/nginx/html/app/uploads` dans le conteneur nginx.

**Erreur Docker** :
```
error mounting "/home/gilles/projects/serv_benchmark/uploads" to rootfs at "/usr/share/nginx/html/app/uploads":
mkdirat /var/lib/docker/rootfs/overlayfs/.../usr/share/nginx/html/app: read-only file system
```

**Cause** : Le système de fichiers root du conteneur nginx:alpine est en lecture seule. Docker ne peut pas créer le répertoire intermédiaire `/app/` dans `/usr/share/nginx/html/`.

### Problème 2 : Chemin filesystem vs chemin web

- **Base de données** : Stocke les chemins filesystem du backend : `/app/uploads/peripherals/photos/3/image.webp`
- **Frontend** : A besoin de chemins web accessibles via nginx : `/uploads/peripherals/photos/3/image.webp`

## ✅ Solutions implémentées

### 1. Montage simplifié des uploads

**Fichier** : `docker-compose.yml` (ligne 37)

```yaml
volumes:
  - ./uploads:/uploads:ro
```

✅ Montage direct vers `/uploads` (pas de répertoire intermédiaire à créer)

### 2. Configuration nginx personnalisée

**Fichier créé** : `frontend/nginx.conf`

```nginx
server {
    listen 80;
    server_name localhost;

    # Serve static frontend files
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ =404;
    }

    # Serve uploaded files
    location /uploads/ {
        alias /uploads/;
        autoindex off;
        # Cache uploaded images for 1 day
        expires 1d;
        add_header Cache-Control "public, immutable";
    }

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
}
```

**Fonctionnalités** :
- ✅ Location `/uploads/` sert les fichiers depuis `/uploads/` dans le conteneur
- ✅ Cache navigateur 1 jour pour les images (performance)
- ✅ En-têtes de sécurité (XSS, Clickjacking, MIME sniffing)

**Montage dans Docker** : `docker-compose.yml` (ligne 35)

```yaml
volumes:
  - ./frontend/nginx.conf:/etc/nginx/conf.d/default.conf:ro
```

### 3. Conversion des chemins dans l'API backend

**Fichier** : `backend/app/api/endpoints/peripherals.py`

#### Endpoint `/peripherals/{id}/photos` (lignes 329-355)

```python
@router.get("/{peripheral_id}/photos")
def get_photos(
    peripheral_id: int,
    db: Session = Depends(get_peripherals_db)
):
    """Get all photos for a peripheral"""
    photos = db.query(PeripheralPhoto).filter(
        PeripheralPhoto.peripheral_id == peripheral_id
    ).all()

    # Convert stored paths to web-accessible URLs
    result = []
    for photo in photos:
        photo_dict = {
            "id": photo.id,
            "peripheral_id": photo.peripheral_id,
            "filename": photo.filename,
            "stored_path": photo.stored_path.replace('/app/uploads/', '/uploads/')
                           if photo.stored_path.startswith('/app/uploads/')
                           else photo.stored_path,
            "mime_type": photo.mime_type,
            "size_bytes": photo.size_bytes,
            "description": photo.description,
            "is_primary": photo.is_primary,
            "uploaded_at": photo.uploaded_at
        }
        result.append(photo_dict)

    return result
```

**Transformation** :
- Base de données : `/app/uploads/peripherals/photos/3/image.webp`
- API retourne : `/uploads/peripherals/photos/3/image.webp`

#### Endpoint `/peripherals/{id}/documents` (lignes 425-450)

Même transformation pour les documents :

```python
stored_path": doc.stored_path.replace('/app/uploads/', '/uploads/')
              if doc.stored_path.startswith('/app/uploads/')
              else doc.stored_path
```

### 4. Configuration frontend

**Fichier** : `frontend/config.js` (lignes 29-31)

```javascript
if (!window.BenchConfig.uploadsPath) {
    window.BenchConfig.uploadsPath = '/uploads';
}
```

Permet de centraliser la configuration du chemin des uploads si besoin de le modifier.

## 📊 Flux complet

```
1. Upload photo
   └─> Backend stocke : /app/uploads/peripherals/photos/3/image.webp (filesystem)

2. Frontend demande : GET /api/peripherals/3/photos
   └─> Backend convertit : /app/uploads/... → /uploads/...
   └─> API retourne : /uploads/peripherals/photos/3/image.webp

3. Frontend affiche : <img src="/uploads/peripherals/photos/3/image.webp">
   └─> Nginx sert depuis : /uploads/ (monté depuis ./uploads)
   └─> HTTP 200 OK
```

## 🧪 Tests de validation

### Test 1 : Fichier existe dans le conteneur
```bash
docker exec linux_benchtools_frontend ls -la /uploads/peripherals/photos/3/
```

**Résultat** :
```
-rwxrwxrwx    1 root     root         20084 Dec 31 09:22 csfingerprint_20251231_092242.webp
```
✅ OK

### Test 2 : API retourne le bon chemin
```bash
curl http://10.0.0.50:8007/api/peripherals/3/photos
```

**Résultat** :
```json
{
    "stored_path": "/uploads/peripherals/photos/3/csfingerprint_20251231_092242.webp"
}
```
✅ OK

### Test 3 : Nginx sert l'image
```bash
curl -I http://10.0.0.50:8087/uploads/peripherals/photos/3/csfingerprint_20251231_092242.webp
```

**Résultat** :
```
HTTP/1.1 200 OK
Content-Type: image/webp
Content-Length: 20084
Cache-Control: max-age=86400
Cache-Control: public, immutable
```
✅ OK

### Test 4 : Frontend accessible
```bash
curl -I http://10.0.0.50:8087/peripherals.html
```

**Résultat** :
```
HTTP/1.1 200 OK
Content-Type: text/html
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
```
✅ OK

## 📁 Fichiers modifiés

### Créés
- ✅ `frontend/nginx.conf` - Configuration nginx personnalisée
- ✅ `docs/SESSION_2025-12-31_DOCKER_IMAGES_FIX.md` - Cette documentation

### Modifiés
- ✅ `docker-compose.yml` - Montage `/uploads` et config nginx
- ✅ `frontend/config.js` - Ajout `uploadsPath`
- ✅ `backend/app/api/endpoints/peripherals.py` - Conversion chemins dans API
- ✅ `backend/app/schemas/peripheral.py` - Suppression tentative @property (non retenue)

## 🔄 Commandes de déploiement

```bash
# Rebuild backend avec nouvelles routes API
docker compose up -d --build backend

# Recréer frontend avec nginx.conf
docker compose up -d frontend

# Vérifier tous les conteneurs
docker compose ps
```

## 🎯 Améliorations futures possibles

- [ ] Ajouter compression gzip pour les images dans nginx
- [ ] Implémenter un CDN ou proxy cache pour les uploads
- [ ] Ajouter authentification pour certains uploads sensibles
- [ ] Lazy loading des images dans le frontend
- [ ] WebP avec fallback JPEG pour compatibilité navigateurs anciens

---

**Date** : 31 décembre 2025
**Statut** : ✅ Résolu et testé
**Impact** : Les images des périphériques sont maintenant accessibles depuis le frontend