Déploiement Vercel - La Tech Rencontre Le Chaos
La CRÊME de la Tech, attendez la crême
🔥 Le Déploiement de l’Enfer
📅 Mercredi 2 Octobre 2025, 14h27
L’équipe NEXUS vient de terminer sa landing page futuriste. Les animations sont fluides, les gradients magnifiques, l’équipe est fière. Il est temps de déployer.
- Moral de l’équipe: 🚀🚀🚀🚀🚀 (5/5)
- Confiance en Vercel: 💯
- Niveau de stress: 0%
14h28 - Le Premier Push
Thomas (Lead Dev) : “OK les gars, je push sur GitHub, Vercel va déployer automatiquement. On sera en ligne dans 2 minutes max.”
Sarah (Designer) : “Trop hâte de voir ça en prod ! 🎨”
Marc (Back-end) : “Pendant ce temps, je vais chercher des cafés pour fêter ça ☕”
🚨 14h31 - Première Alerte
404: NOT_FOUND
Code: NOT_FOUND
ID: fra1::27g24-1759376582047-015703640365Thomas : “Euh… les gars ?”
Sarah : “Quoi ?”
Thomas : “404.”
Marc (revenant avec les cafés) : “404 QUOI ?! On vient de pousser y’a 3 minutes !”
😱 14h35 - Le Code Rouge
Thomas ouvre VSCode. Tout est rouge. TOUT.
Thomas : “PUTAIN ! Visual Studio Code est en mode sapin de Noël !”
Sarah : “C’est quoi ces lignes rouges partout ?!”
Marc : “Attends, t’as bien installé les dépendances au moins ?”
Thomas : “Évidemment que… euh… peut-être pas toutes en fait.”
lucide-react: ❌ Non installétailwindcss: ❌ Non configurépostcss: ❌ Aux abonnés absents- Moral de l’équipe : 📉📉📉
😤 14h40 - La Tension Monte
Sarah : “Je comprends pas, dans l’artifact Claude ça marchait nickel !”
Marc : “Ah ouais, Claude… Le fameux Claude qui te file du code sans les config. Classic.”
Thomas (défensif) : “Hé, Claude m’a donné un super proto ! C’est juste que… bon… y’a des trucs à setup.”
Marc : “Des TRUCS ?! Y’a TOUT à setup mec ! Regarde, même package.json il est vide !”
🔧 14h45 - Plan de Sauvetage
Thomas : “OK, OK, on respire. Marc, tu gères quoi en général ?”
Marc : “Le back. Pas le front. Pas React. Et SURTOUT pas Tailwind.”
Sarah : “Super. Et moi je fais du design, pas du DevOps.”
Thomas : “Donc… on est dans la merde ?”
| Compétence requise | Personne compétente | Statut |
|---|---|---|
| React | Thomas (50%) | 😰 |
| Tailwind CSS | Personne | 💀 |
| Vercel Deploy | Personne | 💀 |
| Configuration | Personne | 💀 |
| Moral | Tout le monde | 💀💀💀 |
💡 14h50 - Le Retour de Claude
Thomas (tapant furieusement) : “Claude, stp… on a poussé sur GitHub et Vercel, ça donne un 404, et VSCode est rouge partout…”
Marc : “Il s’excuse même pas correctement le bot !”
Sarah : “Chut, laisse-le parler !”
📝 14h55 - Les Fichiers Manquants
Claude fournit une liste complète. L’équipe découvre l’ampleur du désastre :
- ❌
package.json(incomplet) - ❌
tailwind.config.js(inexistant) - ❌
postcss.config.js(inexistant) - ❌
src/index.css(mauvais import) - ✅
App.jsx(le seul truc qui marchait)
Marc : “On a littéralement déployé UN SEUL fichier qui marche.”
Thomas : “Techniquement, c’est le plus important…”
Sarah : “Thomas, ferme-la et corrige les fichiers.”
⚡ 15h05 - La Course Contre la Montre
Thomas crée frénétiquement les fichiers manquants.
# Ce qu'on aurait dû avoir depuis le début
package.json ✓
tailwind.config.js ✓
postcss.config.js ✓
src/index.css ✓Sarah: “Thomas, le client appelle dans 10 minutes pour voir la démo.”
Thomas: “QUOI ?! Tu me le dis MAINTENANT ?!”
Marc: “On est foutus.”
🎯 15h08 - Le Commit de la Dernière Chance
Thomas : “OK, tous les fichiers sont là. Je commit.”
git add .
git commit -m "FIX: Add missing config files (please work 🙏)"
git push origin mainL’équipe regarde l’écran en silence. Vercel commence le build.
Building...
Installing dependencies...
✓ lucide-react
✓ tailwindcss
✓ postcss
✓ autoprefixer
Compiling...
Creating an optimized production build...Marc : “C’est long.”
Sarah : “Très long.”
Thomas : “Fermez-la, vous me stressez.”
😰 15h11 - Le Build Échoue ENCORE
Error: Cannot resolve 'tailwindcss/base'
Module not foundMarc : “J’EN ÉTAIS SÛR !”
Thomas (paniqué) : “Non non non non NON !”
Sarah : “Le client appelle dans 4 MINUTES !”
Thomas (criant presque) : “JE SAIS !”
src/index.css a les imports Tailwind mais Vercel ne trouve pas les modules. Probablement un problème de cache ou de résolution de modules.🔥 15h12 - La Solution Désespérée
Marc : “Vide le cache Vercel !”
Thomas : “Comment on fait ça ?!”
Sarah : “Settings → General → Clear Cache !”
Thomas clique comme un fou. Re-deploy manuel. L’équipe retient son souffle.
- Cache vidé : ✓
- Redéploiement forcé : ✓
- Prières collectives : ✓
- Chance restante : 1%
⏰ 15h14 - Le Client Appelle
Le téléphone de Sarah sonne. C’est le client.
Sarah (faux sourire) : “Bonjour ! Oui, tout se passe super bien ! Le site est… euh… en cours de finalisation du déploiement, c’est une question de secondes !”
Elle met le micro en sourdine
Sarah (chuchotant violemment) : “THOMAS ?!”
Thomas (fixant l’écran) : “Ça build… ça build…”
✓ Compiled successfully
✓ Optimized production build
✓ Deploying to production...Marc : “Allez… allez…”
🎉 15h15 - LE MIRACLE
✓ Build completed
✓ Deployed to production
🚀 Live at: https://nexus-landing.vercel.appThomas (hurlant) : “ÇA MARCHE !!!”
Marc : “PUTAIN OUI !!!”
Sarah (toujours au téléphone) : “Oui oui, c’est en ligne ! Je vous envoie le lien !”
NEXUS Landing - En ProductionL’équipe se tape dans les mains. Marc verse presque une larme.
📊 Bilan Post-Mortem
Ce qui a foiré
- Aucune vérification locale avant push 😱
- Dépendances non installées 🤦
- Configuration Tailwind absente 💀
- Aucun test du workflow GitHub → Vercel 🙈
- Communication client défaillante (demo annoncée sans vérification)
Ce qui a sauvé le projet
✓ Clear cache Vercel au bon moment
✓ Team work sous pression (même si tendu)
✓ Persévérance de Thomas
✓ Sarah qui a géré le client comme une boss
🎓 Leçons Apprises
📈 Moral de l’équipe - Après bataille
- Moral de l’équipe: 🎉🎉🎉 (3/5 - épuisés mais victorieux)
- Confiance en Vercel: 🤨 (méfiance prudente)
- Niveau de stress: 200% → 10%
- Cafés bus: 47
- Années de vie perdues: 2-3 par personne
🛠️ Checklist pour ne plus jamais revivre ça
- Créer le projet React localement
- Installer TOUTES les dépendances
- Configurer Tailwind + PostCSS
- Tester avec
npm start - Tester le build avec
npm run build - SEULEMENT APRÈS : push sur GitHub
- Vérifier les logs Vercel
- Tester le site en production
- PUIS annoncer au client
🔗 Ressources Utiles
Documentation Vercel
Tailwind + Create React App
FixIt Theme
💬 Conclusion
Le déploiement web, c’est comme un accouchement :
- C’est douloureux
- Ça prend plus de temps que prévu
- Y’a toujours un moment où on pense que tout est foutu
- Mais à la fin, on est super fiers (et on oublie la douleur)
- Et on se dit “plus jamais” (jusqu’à la prochaine fois)
15h30 - L’équipe commande des pizzas. Le client est content. Le site est en ligne.
Tout est bien qui finit bien. Enfin… jusqu’au prochain déploiement. 🍕🎉
Article rédigé pendant la pause pizza, entre deux crises de nerfs.
Tags: #vercel #react #déploiement #survie #pizza #café #stress
