Déployer sur Vercel

Description

Déployer des applications et des sites web sur Vercel. Gère la liaison de projets, les variables d'environnement, les déploiements de prévisualisation vs production, et la détection automatique de framework.

Déclencheurs

vercel
deploy to vercel
deploy frontend
deploy static site
deploy next.js
preview deployment
vercel deploy

Instructions

Quand utiliser Vercel

Vercel est le bon choix pour :

Les sites statiques et pages marketing
Les frontends Next.js avec des APIs simples (temps de réponse < 10s)
Les sites JAMstack, les SPAs React, les apps Vite

N'utilisez PAS Vercel si une route API appelle un LLM, fait du traitement lourd, streame des données, ou utilise WebSockets — ces opérations dépasseront le timeout de 10 secondes pour les fonctions serverless sur le plan gratuit (60s sur Pro). Utilisez Railway à la place.

Flux de déploiement

Construisez localement d'abord — exécutez toujours npm run build avant de déployer. Corrigez tous les erreurs de build localement. Déployer du code cassé gaspille du temps.
Créez une base de données si nécessaire — si le projet nécessite de la persistance, appelez create_database avec un nom de projet. Elle retourne url, anon_key, service_role_key, et db_url automatiquement. Ne demandez jamais à l'utilisateur les clés Supabase — elles sont générées automatiquement.

Déployez en utilisant l'outil deploy_website :

deploy_website(
  project_path="/path/to/project",
  provider="vercel",
  name="my-project",         # optionnel
  env_vars={                  # du résultat de create_database
    "NEXT_PUBLIC_SUPABASE_URL": url,
    "NEXT_PUBLIC_SUPABASE_ANON_KEY": anon_key,
    "SUPABASE_SERVICE_ROLE_KEY": service_role_key,
    "DATABASE_URL": db_url
  },
  production=true             # false pour un déploiement de prévisualisation
)

Vérifiez — ouvrez l'URL retournée dans le navigateur.

Configuration du token

L'outil deploy_website lit le token Vercel depuis le vault automatiquement. S'il n'est pas défini, il indiquera à l'utilisateur ce qu'il faut faire :

vault_set key=vercel_token value=YOUR_TOKEN

Obtenez le token sur : vercel.com → Settings → Tokens → Create Token (scope: full account).

Le CLI Vercel doit être installé : npm install -g vercel

Comment ça fonctionne en coulisse

L'outil deploy_website exécute :

# Définir chaque variable d'environnement
printf "%s" "$VALUE" | vercel env add KEY production --token $TOKEN --yes

# Déployer
vercel --yes --token $TOKEN --prod [--name project-name]

Il retourne l'URL de déploiement depuis la sortie du CLI.

Prévisualisation vs Production

La production est par défaut (production=true).
Pour les déploiements de prévisualisation, définissez production=false.
Les URLs de prévisualisation ressemblent à : https://my-app-abc123.vercel.app
Les URLs de production utilisent le domaine du projet ou : https://my-app.vercel.app

Détection automatique de framework

Vercel détecte automatiquement 40+ frameworks à partir de package.json :

Next.js, Nuxt, Remix, SvelteKit, Astro, Vite, Create React App, Gatsby, Angular, Vue CLI, Eleventy, Hugo, Jekyll, et bien d'autres.

Aucune configuration de framework nécessaire — déployez simplement.

Limites du plan gratuit Vercel

Sites statiques et déploiements illimités
Timeout de 10 secondes pour les fonctions serverless (60s sur Pro)
100 GB de bande passante/mois
1 membre de l'équipe

Anti-patterns

Ne déployez pas sans construire localement — npm run build détecte les erreurs avant de gaspiller les minutes de déploiement.
Ne codez pas les clés API en dur dans le code source — utilisez le paramètre env_vars pour les injecter dans l'environnement de Vercel.
N'utilisez pas Vercel pour les APIs qui appellent des LLMs — elles dépasseront le timeout. Utilisez Railway.
Ne demandez pas à l'utilisateur les clés anon/service de Supabase — create_database les retourne automatiquement.

Vérifier

La commande de déploiement a été réellement exécutée et la sortie de build/log (ou l'URL de déploiement) est capturée
L'URL déployée a été ouverte et a retourné un 2xx ; les routes clés ont été échantillonnées, pas seulement l'index
Les variables d'environnement requises par l'application sont présentes dans l'environnement cible ; les défaillances dues à des variables manquantes ont été écartées
Un plan de rollback (ID de déploiement précédent, SHA git, ou commande de revert d'une ligne) est documenté avant la promotion en production
Une vérification de santé/observabilité (logs, suivi des erreurs, page de statut) a été inspectée après le déploiement ; le taux d'erreur de base est enregistré
La configuration DNS / domaine / SSL a été confirmée, non présumée de persister à partir des déploiements précédents

vercel-deploy