Files
annu-kute-ced/docs/DEPLOIEMENT-SVELTEKIT.md
sucupira 6c2df9b1cd Optimise les images distantes au build et fiabilise la QA
- scripts/fetch-podcast-cover.mjs : pochettes Castopod (flux + épisodes)
  téléchargées et converties en WebP 512px au prebuild (2,3 Mo → 59 Ko)
- scripts/optimize-remote-images.mjs : vignettes PeerTube (640px), avatars
  (96px) et médias Mastodon (800px) optimisés en WebP + mapping
  src/lib/server/image-map.json consommé par mapImage()
- a11y : liens footer soulignés dans les paragraphes, cibles tactiles ≥24px
  sur les liens des posts Mastodon
- image-map.ts : import JSON statique (le createRequire pointait sur le bundle)
- doc : étape prebuild documentée (dépendance ImageMagick)

Lighthouse mobile : 97/100/100/100 — LCP 2,4s, TBT 50ms, CLS 0,
poids accueil 900 Ko (budgets du playbook respectés)
2026-07-23 03:37:03 -04:00

3.8 KiB

Déploiement — ANNU KUTE CED (SvelteKit)

Branche svelte : le hub est un site 100 % statique (SvelteKit + adapter-static, prerender intégral). Les données PeerTube / Castopod / Mastodon sont récupérées au build : pour rafraîchir le contenu, on rebuild (cron, webhook ou CI).

Build

npm ci
npm run build        # prebuild : optimise les pochettes Castopod (scripts/fetch-podcast-cover.mjs,
                     # nécessite ImageMagick) et les vignettes/médias distants (scripts/optimize-remote-images.mjs)
                     # puis génère build/ + injecte la CSP par page (scripts/postbuild-csp.mjs)
npm run preview      # vérification locale

Le dossier build/ est le site complet, déposable tel quel sur n'importe quel hébergement statique.

o2switch (Apache, mutualisé)

  1. Déposer le contenu de build/ à la racine web du domaine (public_html/ ou équivalent).
  2. Le .htaccess fourni dans build/ gère : redirection HTTPS, redirections des anciennes URLs PHP (index.php, video.php?uuid=…, categories.php?id=…, recherche.php?q=…, direct.php, dons.php, mentions-legales.php), ErrorDocument 404 /404.html, headers de sécurité, cache immutable pour /_app/ et /fonts/.
  3. Rafraîchissement du contenu : rebuild en local ou en CI puis rsync -av --delete build/ user@host:public_html/.

Exemple de cron quotidien (sur une machine de build) :

0 5 * * * cd /chemin/annu-kute-ced && git pull && npm ci --prefer-offline && npm run build && rsync -az --delete build/ user@o2switch:public_html/

Cloudflare Pages

  • Build command : npm run build
  • Build output directory : build
  • Le fichier _headers (dans build/) applique CSP, HSTS, X-Frame-Options, nosniff, Referrer-Policy, Permissions-Policy et le cache immutable.
  • Les anciennes URLs PHP peuvent être redirigées via _redirects si besoin (le .htaccess ne s'applique pas chez Cloudflare).

Sécurité — modèle CSP

  • En-tête global (_headers / .htaccess) : style-src, img-src, font-src, connect-src 'self', media-src, frame-src https://gade.o-k-i.net, frame-ancestors 'none', base-uri, form-action, object-src 'none'.
  • script-src est délivré par page via une balise <meta http-equiv="Content-Security-Policy"> injectée par scripts/postbuild-csp.mjs : chaque page ne déclare que les empreintes SHA-256 de ses scripts inline (script de démarrage SvelteKit + JSON-LD). Aucun 'unsafe-inline' pour les scripts.
  • Seules exceptions sortantes (chargement de ressources) : les instances de l'écosystème first-party gade.o-k-i.net (vignettes, embeds, flux), kute.o-k-i.net (audio, pochettes), bokante.o-k-i.net (médias Mastodon). Aucun autre domaine tiers.

PWA

  • manifest.webmanifest + service worker Workbox (vite-plugin-pwa, generateSW) : précache du shell, navigateFallback: /offline/index.html.
  • Enregistrement par static/registerSW.js (chemins absolus), jamais par injection du plugin.

Configuration

Toute la configuration d'instance vit dans src/lib/config.ts (équivalent des anciennes constantes PHP) : instances agrégées, catégories prioritaires, hashtags, hero, dons, bloc « À propos » (about), annonce du prochain live (nextLive) et verrou maintenance (countdown). Quand countdown.enabled vaut true, le build rend la page de compte à rebours multi-fuseaux (titre kréyòl, redirection automatique à l'échéance) à la place de tout le site — l'équivalent statique de l'ancien COUNTDOWN_ENABLED.

Vérifications avant mise en production

npm run check   # 0 erreur, 0 warning
npm run build   # fetch des données + prerender + CSP

Puis, sur le build : zéro requête tierce au chargement hors instances de l'écosystème (onglet réseau), toutes les routes historiques redirigées, sitemap.xml et robots.txt servis.