Déploiement Vercel via CLI

Contexte

Vercel CLI permet de déployer directement depuis la ligne de commande sans quitter l’IDE. Compatible avec Next.js, Nuxt, Astro, Remix et autres frameworks modernes. Intégration Git automatique : pousse sur GitHub, Vercel redéploie automatiquement.

Prérequis

• Vercel CLI installée : npm i -g vercel
• Compte Vercel actif
• Projet git poussé sur GitHub (optionnel mais recommandé)
• Authentification Vercel : vercel login

Étapes

1. Installer Vercel CLI

npm i -g vercel
vercel login

Suit les prompts de connexion au navigateur.

2. Première configuration du projet

À la racine du projet :

vercel

Vercel pose des questions :

? Set up and deploy "my-app"? (Y/n) y
? Which scope should contain your project? (user) user
? Project name: my-app
? Detected Next.js — is this correct? (Y/n) y
? Link existing project? (y/N) N
? Create New Project? (Y/n) y

Vercel crée un .vercel/project.json localement.

3. Configuration environment (optionnel)

Si le projet nécessite des env vars :

# Ajouter depuis le CLI
vercel env add API_KEY
# Ou depuis le dashboard https://vercel.com/

# Récupérer en local
vercel env pull .env.local

4. Déployer en production

vercel --prod

Output :

✓ Linked to user/my-app (created .vercel/project.json)
✓ Inspect: https://vercel.com/user/my-app/xxx
✓ Preview: https://my-app-git-main-user.vercel.app
✓ Production: https://my-app.vercel.app

5. Vérifier le déploiement

# Ouvrir en prod
vercel --prod
# Puis visit https://my-app.vercel.app

# Voir les logs
vercel logs my-app
# Ou
vercel logs my-app --prod

Déploiement automatique via Git

Recommandé : Connecte ton repo GitHub à Vercel, elle redéploiera automatiquement à chaque push sur main.

# Dans le dashboard Vercel
# 1. Settings → Git Integration
# 2. Connecter GitHub repo
# 3. Chaque git push déclenche un build/deploy auto

Exemple de déploiement complet

# Commit + push local
git add .
git commit -m "feat: dashboard"
git push origin main

# Vercel redéploie auto en ~2-5 min

# Vérifier
vercel logs my-app --prod --follow

Variables d’environnement

# Ajouter une var
vercel env add DATABASE_URL
# → Prompt pour la valeur

# Lister
vercel env ls

# Récupérer localement
vercel env pull .env.local

# Supprimer
vercel env rm DATABASE_URL

Prévisualisation avant prod

# Deploy sur preview URL (pas prod)
vercel
# → https://my-app-git-branch-user.vercel.app

# Puis approuver si ok
vercel --prod

Troubleshooting

Symptôme	Cause probable	Résolution
Build échoue	Dépendances manquantes	Vérifier npm i, build local
Env vars non trouvées	Non défini dans Vercel	vercel env add VAR_NAME
Redéploiement git ne déclenche rien	Git non connecté	Connecter repo dans Settings
Port conflictuel	Framework bindé sur 3000	Vercel gère auto, pas d’action

Variantes

• Preview deployment : vercel (URL temporaire pour tests)
• Production deployment : vercel --prod (URL stable)
• Rollback : vercel rollback pour revenir à la version précédente

Commandes courantes

vercel                    # Déployer en preview
vercel --prod            # Déployer en production
vercel logs <project>    # Voir les logs
vercel env pull          # Récupérer env vars
vercel env add VAR       # Ajouter une var
vercel rollback          # Revenir à la version précédente

Voir aussi

• 31-neon-db-setup.md — Setup database Postgres
• 32-github-pages-auto.md — Auto-deploy GitHub Pages