Story 1.1: initialisation projet

2026-02-04 02:14:17 +01:00
parent c9f95d39a0
commit e3f062249b
38 changed files with 10300 additions and 0 deletions
--- a/docs/stories/1.4.page-canary-deploiement.md
+++ b/docs/stories/1.4.page-canary-deploiement.md
@@ -0,0 +1,333 @@
+# Story 1.4: Page Canary et Validation du Déploiement
+
+## Status
+
+In Progress
+
+## Story
+
+**As a** développeur,
+**I want** déployer une page "canary" minimale sur le serveur,
+**so that** je valide que l'infrastructure PHP et le CSS fonctionnent en production.
+
+## Acceptance Criteria
+
+1. La page index.php affiche un message de test stylé avec Tailwind (titre centré, couleur d'accent)
+2. La page est responsive (vérifiable sur mobile)
+3. Le déploiement sur le serveur personnel fonctionne
+4. Le site est accessible via HTTPS
+5. Le temps de chargement est inférieur à 2 secondes (Lighthouse)
+6. Les fichiers sensibles ne sont pas accessibles (.env, vendor/, data/)
+
+## Tasks / Subtasks
+
+- [] **Task 1 : Finaliser la page canary** (AC: 1, 2)
+  - [] Mettre à jour `index.php` avec un contenu de test attractif
+  - [] Ajouter un titre centré avec la classe `text-primary`
+  - [] Ajouter un sous-titre et une description
+  - [] Vérifier le responsive sur mobile (DevTools)
+  - [] Tester les classes Tailwind (btn-primary, card, etc.)
+
+- [] **Task 2 : Préparer les fichiers pour le déploiement** (AC: 3)
+  - [] Exécuter `npm run build` pour générer le CSS minifié
+  - [] Exécuter `composer install --no-dev` pour les dépendances
+  - [ ] Créer le fichier `.env` de production (à faire sur le serveur)
+  - [] Vérifier que `.gitignore` exclut les fichiers sensibles
+
+- [ ] **Task 3 : Configurer le serveur nginx** (AC: 3, 4, 6)
+  - [ ] Créer/adapter la configuration nginx
+  - [ ] Configurer les redirections vers index.php (front controller)
+  - [ ] Bloquer l'accès aux fichiers sensibles (.env, vendor/, data/, logs/)
+  - [ ] Configurer les headers de sécurité
+  - [ ] Activer la compression gzip
+
+- [ ] **Task 4 : Configurer HTTPS** (AC: 4)
+  - [ ] Vérifier le certificat SSL (Let's Encrypt)
+  - [ ] Configurer la redirection HTTP → HTTPS
+  - [ ] Tester l'accès HTTPS
+
+- [ ] **Task 5 : Déployer sur le serveur** (AC: 3)
+  - [ ] Transférer les fichiers (FTP/SFTP ou git pull)
+  - [ ] Exclure : `node_modules/`, `package.json`, `package-lock.json`, `tailwind.config.js`, `postcss.config.js`
+  - [ ] Vérifier les permissions des dossiers
+  - [ ] Tester l'accès à la page
+
+- [ ] **Task 6 : Valider les performances** (AC: 5)
+  - [ ] Lancer un audit Lighthouse
+  - [ ] Vérifier que le temps de chargement < 2s
+  - [ ] Vérifier le score Performance > 90
+  - [ ] Corriger les éventuels problèmes
+
+- [ ] **Task 7 : Tests de sécurité** (AC: 6)
+  - [ ] Tester l'accès à `/.env` → doit retourner 404
+  - [ ] Tester l'accès à `/vendor/` → doit retourner 404
+  - [ ] Tester l'accès à `/data/` → doit retourner 404
+  - [ ] Tester l'accès à `/logs/` → doit retourner 404
+
+## Dev Notes
+
+### Contenu Page Canary (index.php)
+
+```php
+<?php
+// index.php - Page Canary
+
+require_once __DIR__ . '/includes/functions.php';
+
+include_template('header', [
+    'pageTitle' => 'Portfolio en construction',
+    'pageDescription' => 'Mon portfolio de développeur web arrive bientôt. Restez connectés !'
+]);
+?>
+
+<main class="min-h-screen flex items-center justify-center">
+    <div class="container-content text-center py-20">
+        <!-- Titre principal -->
+        <h1 class="text-display text-text-primary mb-4 animate-fade-in">
+            Portfolio <span class="text-primary">en construction</span>
+        </h1>
+
+        <!-- Sous-titre -->
+        <p class="text-xl text-text-secondary mb-8 max-w-2xl mx-auto animate-fade-in animation-delay-100">
+            Je prépare quelque chose de génial pour vous.
+            <br>Revenez bientôt pour découvrir mes projets !
+        </p>
+
+        <!-- Badge de test -->
+        <div class="flex justify-center gap-4 mb-12 animate-fade-in animation-delay-200">
+            <span class="badge">PHP</span>
+            <span class="badge">Tailwind CSS</span>
+            <span class="badge badge-primary">En cours</span>
+        </div>
+
+        <!-- Card de test -->
+        <div class="card max-w-md mx-auto animate-fade-in animation-delay-300">
+            <div class="card-body">
+                <h3 class="text-subheading mb-2">Infrastructure validée</h3>
+                <p class="text-text-secondary mb-4">
+                    PHP, Tailwind CSS et le serveur fonctionnent correctement.
+                </p>
+                <div class="flex gap-4 justify-center">
+                    <span class="btn-primary">Bouton Primary</span>
+                    <span class="btn-secondary">Bouton Secondary</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Test responsive -->
+        <p class="text-text-muted text-sm mt-12">
+            Testé sur mobile, tablette et desktop.
+        </p>
+    </div>
+</main>
+
+<?php include_template('footer'); ?>
+```
+
+### Configuration Nginx (Production)
+
+```nginx
+server {
+    listen 80;
+    server_name monportfolio.fr www.monportfolio.fr;
+    return 301 https://$server_name$request_uri;
+}
+
+server {
+    listen 443 ssl http2;
+    server_name monportfolio.fr www.monportfolio.fr;
+
+    # SSL
+    ssl_certificate /etc/letsencrypt/live/monportfolio.fr/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/monportfolio.fr/privkey.pem;
+    ssl_protocols TLSv1.2 TLSv1.3;
+
+    root /var/www/portfolio;
+    index index.php;
+    charset utf-8;
+
+    # Headers de sécurité
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-Frame-Options "DENY" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+    # Bloquer fichiers sensibles
+    location ~ /\.(env|git|htaccess) { deny all; return 404; }
+    location ^~ /vendor/ { deny all; return 404; }
+    location ^~ /node_modules/ { deny all; return 404; }
+    location ^~ /logs/ { deny all; return 404; }
+    location ^~ /data/ { deny all; return 404; }
+    location ^~ /includes/ { deny all; return 404; }
+
+    # Assets statiques avec cache long
+    location /assets/ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        gzip_static on;
+    }
+
+    # Router PHP (front controller)
+    location / {
+        try_files $uri $uri/ /index.php?$query_string;
+    }
+
+    # PHP-FPM
+    location ~ \.php$ {
+        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
+        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+        include fastcgi_params;
+    }
+
+    # Compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/javascript application/javascript application/json image/svg+xml;
+}
+```
+
+### Fichiers à Déployer
+
+**Inclure :**
+- `index.php`
+- `config.php`
+- `composer.json`, `composer.lock`
+- `vendor/` (après composer install --no-dev)
+- `pages/`
+- `templates/`
+- `includes/`
+- `api/`
+- `assets/` (avec output.css généré)
+- `data/`
+- `logs/` (dossier vide avec .gitkeep)
+- `.env` (créé sur le serveur, pas commité)
+
+**Exclure :**
+- `node_modules/`
+- `package.json`, `package-lock.json`
+- `tailwind.config.js`, `postcss.config.js`
+- `.env` (local)
+- `.git/`
+- `docs/`
+
+### Variables .env Production
+
+```env
+APP_ENV=production
+APP_DEBUG=false
+APP_URL=https://monportfolio.fr
+
+RECAPTCHA_SITE_KEY=votre_cle_site
+RECAPTCHA_SECRET_KEY=votre_cle_secrete
+
+CONTACT_EMAIL=contact@monportfolio.fr
+
+APP_SECRET=une_cle_secrete_aleatoire_de_32_caracteres
+```
+
+### Checklist Pré-Déploiement
+
+- [ ] `npm run build` exécuté (CSS minifié)
+- [ ] `composer install --no-dev` exécuté
+- [ ] Fichier `.env` de production prêt
+- [ ] Configuration nginx testée localement
+- [ ] Certificat SSL valide
+
+## Testing
+
+### Tests Fonctionnels
+
+- [ ] La page s'affiche correctement en production
+- [ ] Le titre "Portfolio en construction" est visible
+- [ ] La couleur d'accent (#FA784F) s'affiche
+- [ ] Les boutons sont stylés correctement
+- [ ] Pas d'erreur dans la console
+
+### Tests Responsive
+
+- [ ] Mobile (375px) : contenu lisible, pas de scroll horizontal
+- [ ] Tablette (768px) : mise en page correcte
+- [ ] Desktop (1280px) : centré avec max-width
+
+### Tests Performance (Lighthouse)
+
+| Métrique | Objectif | Maximum |
+|----------|----------|---------|
+| Performance | > 90 | > 80 |
+| Accessibility | > 90 | > 85 |
+| Best Practices | > 90 | > 85 |
+| SEO | > 90 | > 85 |
+| FCP | < 1.5s | < 2.5s |
+| LCP | < 2.5s | < 4s |
+
+### Tests Sécurité
+
+```bash
+# Tester les accès bloqués
+curl -I https://monportfolio.fr/.env          # Doit retourner 404
+curl -I https://monportfolio.fr/vendor/       # Doit retourner 404
+curl -I https://monportfolio.fr/data/         # Doit retourner 404
+curl -I https://monportfolio.fr/includes/     # Doit retourner 404
+```
+
+### Commandes de Déploiement
+
+```bash
+# Sur le poste local
+npm run build
+composer install --no-dev
+
+# Transfert (exemple rsync)
+rsync -avz --exclude='node_modules' --exclude='.git' --exclude='docs' \
+  ./ user@serveur:/var/www/portfolio/
+
+# Sur le serveur
+sudo nginx -t                    # Tester la config nginx
+sudo systemctl reload nginx      # Recharger nginx
+```
+
+## Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2026-01-22 | 0.1 | Création initiale de la story | Sarah (PO) |
+
+## Dev Agent Record
+
+### Agent Model Used
+
+Claude Opus 4.5 (claude-opus-4-5-20251101)
+
+### Debug Log References
+
+_À compléter par le dev agent_
+
+### Completion Notes List
+
+- Page canary créée avec titre animé, badges, card de test, boutons
+- CSS regénéré (12 Ko minifié)
+- Dépendances PHP installées (vlucas/phpdotenv)
+- Configuration nginx exemple créée (nginx.conf.example)
+- Syntaxe PHP validée
+
+**Tâches restantes (manuelles) :**
+- Créer .env de production sur le serveur
+- Copier nginx.conf.example et adapter pour votre serveur
+- Déployer les fichiers (rsync/FTP)
+- Configurer SSL/HTTPS
+- Tests de sécurité et performance
+
+### File List
+
+| Fichier | Action |
+|---------|--------|
+| `index.php` | Modifié |
+| `nginx.conf.example` | Créé |
+| `vendor/` | Installé |
+| `composer.lock` | Créé |
+| `assets/css/output.css` | Regénéré |
+
+## QA Results
+
+_À compléter par le QA agent_