W05

Variables d'environnement & Configuration

Gérer les secrets, différencier dev/prod et ne jamais committer de credentials.

🔑 1. Pourquoi les variables d'environnement ?

Les variables d'environnement permettent de configurer votre application selon l'environnement (dev, staging, prod) sans modifier le code source.

Sécurité — ne jamais committer les clés API, mots de passe, tokens
Portabilité — le même code fonctionne en dev et en prod avec des configs différentes
Collaboration — chaque développeur a ses propres valeurs locales

Ne commitez jamais de secrets dans Git. Un commit avec un secret reste dans l'historique même si vous l'effacez. Des outils comme git-secrets ou Gitleaks scannent les commits à la recherche de credentials.

📄 2. Fichiers .env

Vite (et la plupart des outils modernes) charge automatiquement les fichiers .env selon leur priorité :

# Priorité (du plus spécifique au moins spécifique)
.env.[mode].local     # chargé pour le mode, ignoré par git
.env.[mode]           # chargé pour le mode (ex: .env.production)
.env.local            # toujours chargé, ignoré par git
.env                  # toujours chargé

# Exemple .env
VITE_API_URL=http://localhost:3000
VITE_APP_NAME=Mon App Dev

# Exemple .env.production
VITE_API_URL=https://api.monsite.fr
VITE_APP_NAME=Mon App

Le mode est déterminé par la commande : npm run dev = mode development, npm run build = mode production. Vous pouvez créer vos propres modes.

🔓 3. Variables côté client vs serveur

Les variables exposées au navigateur doivent être préfixées — elles seront intégrées dans le bundle JS.

Framework	Préfixe client	Accès JS
Vite	`VITE_`	`import.meta.env.VITE_VAR`
Next.js	`NEXT_PUBLIC_`	`process.env.NEXT_PUBLIC_VAR`
CRA	`REACT_APP_`	`process.env.REACT_APP_VAR`
Node.js	(aucun)	`process.env.VAR`

// Dans un composant React/Vue (Vite)
const apiUrl = import.meta.env.VITE_API_URL;

// Côté Node.js (serveur / API)
const dbUrl = process.env.DATABASE_URL;
const secret = process.env.JWT_SECRET;

Les variables VITE_ sont visibles dans le bundle final (code source de la page). N'y mettez jamais de clés secrètes — uniquement des URLs publiques ou des IDs non sensibles.

🔒 4. Gestion des secrets sur les plateformes

Vercel

# Ajouter un secret (interactif, demande la valeur)
vercel env add STRIPE_SECRET production
vercel env add STRIPE_SECRET preview
vercel env add STRIPE_SECRET development

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

Netlify

netlify env:set STRIPE_SECRET valeur-secrete
netlify env:list

GitHub Actions Secrets

# Dans Settings → Secrets and Variables → Actions
# Puis dans le workflow :
env:
  STRIPE_KEY: ${{ secrets.STRIPE_SECRET }}

⚙️ 5. dotenv en local (Node.js)

# Installation
npm install dotenv

// server.js — au tout début du fichier
import 'dotenv/config';
// ou
require('dotenv').config();

// Ensuite, process.env est disponible
const port = process.env.PORT || 3000;

✅ 6. Bonnes pratiques

.env.example — committé avec toutes les clés (sans valeurs) pour documenter
.gitignore — .env, .env.local, .env.*.local
Rotation des secrets — changer régulièrement les clés API critiques
Valeurs différentes — utiliser des clés de test en dev, production en prod
Least privilege — donner le minimum de permissions aux clés API

# .env.example (à committer)
VITE_API_URL=
VITE_APP_NAME=
DATABASE_URL=
JWT_SECRET=
STRIPE_PUBLIC_KEY=
# STRIPE_SECRET_KEY ne doit JAMAIS être prefixé VITE_

→ Exercices W05 🔧 Mini-projet W06 : DNS →