Hébergement Frontend statique de type React sur conteneur

Suite à la réflexion suivante, j'ai demandé à mon assistant de réfléchir également :

Notre équipe d'infrastructure compile nos applications React directement sur le container qui va l'héberger. Cependant, je crois qu'il s'agit de gaspillage de ressource de monter un container seulement pour servir une simple application web statique, et d'autres stratégie sont plus appropriés.

En plus, j'ai l'impression que dans notre méthodologie DevSecOps ou l'on désire signer et certifier que l'on a passé par des étape précises, on échappe quelque chose, car je ne sais pas si c'est vraiment pertinent de signer les artefacts et passer les différents outils d'analyse directement dans le container, normalement, on ne peut pas aller sur le container pour s'assurer que tout est bien valide.

Et voici ce qu'il me répond, je crois que ma réflexion n'est pas mauvaise...

Tu soulèves deux points extrêmement pertinents, tant du point de vue architecture que DevSecOps / intégrité des artefacts.

---

🧱 1. Servir une app React dans un conteneur NGINX ou équivalent : une bonne idée ?

👉 Compiler dans le container qui servira les fichiers est généralement un anti-pattern dans une approche DevOps/DevSecOps moderne.

❌ Inconvénients de compiler dans l’image finale :

• Couplage fort entre build et runtime
• Image plus lourde (Node.js, node_modules, outils de build inclus inutilement)
• Reproductibilité affaiblie (build dépendant du container runtime)
• Auditabilité et signature floues (pas de point de contrôle net entre build et déploiement)
• Tests SAST/DAST compliqués à insérer proprement
• Surface d’attaque inutilement élargie

✅ Bonne stratégie : Séparation du build et du runtime

🔧 Étapes recommandées :

1. CI : compiler l’app React dans un pipeline contrôlé :

   • Utiliser yarn build ou npm run build

   • Générer un dossier build/ ou dist/

2. Signer ou analyser les artefacts générés :

   • 👉 SAST (Sonar, Semgrep)

   • 👉 SCA (Trivy, Dependency Check)

   • 👉 Signature (OpenSSL ou Cosign + SBOM)

3. Créer une image Docker minimale qui ne fait que servir le contenu statique.

4. Scanner et signer l’image finale uniquement si elle est dérivée d’artefacts validés.

2. Intégrité et validation dans une stratégie DevSecOps

🔒 Ce que tu perds en compilant dans le container final :

Élément DevSecOps	Si tu compiles dans l’image finale
Contrôle du cycle SDLC	❌ Non traçable
Signature des artefacts	❌ Artefact noyé dans l’image
Analyse statique efficace	❌ Code + build mélangés
SBOM lisible et exploitable	❌ Impossible à extraire correctement
Revue et approbation pré-déploiement	❌ Impossible de certifier la chaîne

🧠 Recommandation synthétique

➡️ Ce que tu devrais viser :

Étape	Bonnes pratiques
Build React	En pipeline CI (node:alpine, yarn build)
Analyse sécurité + signature	Sur les artefacts (/build, SBOM)
Image finale	Ultra-légère : nginx ou caddy
Publication	Signer avec Cosign / attestation Tekton
Déploiement	Depuis registre d’images certifiées