Docs / Integrations
Intégration Vercel
Scannez automatiquement chaque déploiement de preview et recevez les résultats directement dans votre workflow.
À quoi ça sert
L'intégration Vercel de Panache surveille vos déploiements de preview pour détecter les problèmes de sécurité, les régressions de performance, les erreurs SEO et les problèmes de configuration. À chaque déploiement de preview prêt sur Vercel, Panache lance un scan complet et rapporte les résultats. Vous détectez les régressions avant qu'elles n'atteignent la production.
1. Connecter Vercel
Allez dans votre dashboard Panache, puis Settings > Integrations. Cliquez "Connect" à côté de Vercel. Vous serez redirigé vers Vercel pour autoriser l'intégration. Une fois connecté, le nom de votre équipe Vercel apparaîtra dans la page Integrations.
2. Configurer un site
Allez dans Workflow > [votre site] > Settings. Sélectionnez le trigger provider "Vercel Webhook" et entrez l'ID de votre projet Vercel (visible dans les settings de votre projet Vercel). Optionnel : choisissez où poster les résultats (commentaire GitLab MR ou Vercel Checks API).
3. Déclenchement des scans
Panache écoute le webhook deployment.ready de Vercel. Quand un déploiement de preview est prêt, un scan démarre automatiquement. Les déploiements en production (target: production) sont toujours ignorés. Seules les branches de preview sont scannées. Vous pouvez filtrer les branches scannées dans les paramètres de filtrage (toutes, inclure les correspondantes, ou exclure les correspondantes).
4. Résultats des scans
Chaque scan produit un score et un détail par catégorie : sécurité, performance, SEO et bonnes pratiques. Les résultats sont comparés à votre score de production. Le delta vous indique si la branche introduit des régressions ou des améliorations. Si un provider de sortie est configuré, un résumé est posté en commentaire sur votre merge request ou en tant que Vercel Check.
Alternative : plugin Next.js
Si vous utilisez @withpanache/nextjs, le plugin peut aussi déclencher les scans automatiquement pendant le next build. L'URL de preview est auto-détectée depuis les variables d'environnement Vercel. Installez le plugin : npm install @withpanache/nextjs Wrappez votre config : import {withPanache} from "@withpanache/nextjs" export default withPanache({/* votre config next */}). Définissez PANACHE_SITE_TOKEN dans les variables d'environnement de votre projet Vercel.
Sécurité
Tous les tokens OAuth sont chiffrés au repos (AES-256-GCM). Les webhooks sont vérifiés par signature HMAC. Aucun code source ni artefact de build n'est accédé. Panache ne lit que l'URL de déploiement et les métadonnées git (branche, SHA du commit) depuis les webhooks. Les scans sont effectués sur l'URL de preview publique.
Besoin d'aide ?
Pour toute question sur l'intégration Vercel ou si vous avez besoin d'assistance, contactez-nous à hello@withpanache.dev