Variables d’environnement dans l’intégration continue
Stockez les secrets dans GitHub Secrets, injectez-les dans la compilation comme variables d’environnement et accédez-y dans Vite avec import.meta.env ou dans Next.js avec process.env.
Variables d’environnement dans l’intégration continue est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Pourquoi des environnements différents ?
Les applications ont besoin de valeurs différentes selon l’environnement : URL d’API de développement, URL d’API de préproduction, URL d’API de production. Elles utilisent aussi des secrets (clés d’API, jetons) qui ne doivent jamais se retrouver dans le dépôt. Les variables d’environnement sont la méthode standard pour injecter ces valeurs.
Publiques ou réservées au serveur
Les variables frontend intégrées au paquet sont publiques : toute personne utilisant DevTools peut les voir. N’y placez jamais de secrets. Les variables côté serveur (utilisées dans les fonctions sans serveur, le SSR ou les routes d’API) peuvent réellement rester secrètes.
Variables d’environnement de Vite
Vite expose les variables préfixées par VITE_ au code client via import.meta.env.
# .env
VITE_API_URL=https://api.example.com
VITE_FEATURE_FLAGS={"newOnboarding":true}
# In code:
const apiUrl = import.meta.env.VITE_API_URL;
# DEV_ONLY or NEVER PREFIXED vars are NOT exposed:
SECRET_KEY=xxx # not accessible to client codeVariables d’environnement de Next.js
Next préfixe les variables publiques avec NEXT_PUBLIC_. Les variables réservées au serveur n’ont aucun préfixe (elles sont utilisées dans les gestionnaires de routes et getServerSideProps).
# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com # client-accessible
DATABASE_URL=postgres://... # server-only
# Client:
const url = process.env.NEXT_PUBLIC_API_URL;
# Server (API route):
const db = process.env.DATABASE_URL;Fichiers .env locaux
Utilisez .env.local pour vos remplacements personnels et .env.development / .env.production pour les valeurs par défaut propres à chaque environnement. Ajoutez .env.local à .gitignore : ne transmettez jamais de secrets.
# .gitignore
.env.local
.env.*.local
# Commit only .env.example with placeholder values:
VITE_API_URL=https://api.example.com
DATABASE_URL=Stocker des secrets dans GitHub Actions
Ajoutez les secrets dans Settings → Secrets and variables → Actions du dépôt. Accédez-y via secrets.NAME.
# .github/workflows/deploy.yml
- name: Deploy
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
run: |
npx vercel --token $VERCEL_TOKEN --prod
npx sentry-cli releases new $RELEASESecrets propres à chaque environnement
Les environnements GitHub (Settings → Environments) vous permettent de limiter les secrets à un environnement précis (préproduction, production), avec des étapes d’approbation facultatives.
# Job that requires environment:
deploy-prod:
environment: production # requires reviewer approval if configured
steps:
- run: deploy
env:
DB_URL: ${{ secrets.DB_URL }} # only prod's DB_URL is exposedVariables d’environnement des hébergeurs
Vercel, Netlify et Cloudflare exposent tous les variables d’environnement à votre compilation et à votre environnement d’exécution. Définissez-les dans le tableau de bord ou via la CLI.
# Vercel:
vercel env add VITE_API_URL production
vercel env add VITE_API_URL preview
# Netlify:
netlify env:set VITE_API_URL https://api.example.com
# Cloudflare Pages:
wrangler pages secret put API_URLNe codez pas les secrets en dur dans les paquets frontend
Si une valeur se trouve dans votre JavaScript client, elle est publique. Les clés d’API des SDK tiers (clé publiable de Stripe, clé de recherche Algolia) sont conçues pour être publiques. Toute autre clé (clé d’API serveur) doit rester côté serveur.
Valider les variables d’environnement lors de la compilation
Utilisez zod ou envalid pour faire échouer les compilations si des variables d’environnement obligatoires sont absentes.
// env.ts
import { z } from 'zod';
const envSchema = z.object({
VITE_API_URL: z.string().url(),
VITE_SENTRY_DSN: z.string().url().optional()
});
export const env = envSchema.parse(import.meta.env);
// Throws helpful error if VITE_API_URL is missingÀ la compilation ou à l’exécution
Les variables d’environnement définies lors de la compilation sont intégrées au paquet : les modifier nécessite une nouvelle compilation. Les variables d’environnement évaluées à l’exécution (routes d’API Next, Netlify Functions, Cloudflare Workers) sont évaluées pour chaque requête. Choisissez selon que la valeur doit pouvoir changer sans redéployer l’application.
Rotation des secrets
Renouvelez régulièrement les secrets (tous les 90 jours) et après tout changement au sein de l’équipe. Utilisez 1Password Secrets Automation, AWS Secrets Manager ou un service similaire pour maintenir les secrets à jour dans l’intégration continue sans mises à jour manuelles.
Pièges courants
1) Transmettre un fichier .env contenant de vrais secrets : utilisez git-secrets pour l’empêcher. 2) Exposer des variables serveur au client (préfixe incorrect). 3) Oublier de définir les variables d’environnement dans les déploiements de prévisualisation. 4) Mélanger les clés de test et de production dans le même environnement.
Vérification rapide
Pourquoi les variables d’environnement Vite exposées au client doivent-elles avoir le préfixe VITE_ ?
Récapitulatif : variables d’environnement dans l’intégration continue
Variables publiques : préfixées (VITE_, NEXT_PUBLIC_), intégrées au paquet et visibles par les utilisateurs. Variables réservées au serveur : sans préfixe, utilisées dans les routes d’API ou le SSR. .env.local dans .gitignore ; transmettez .env.example. Secrets GitHub pour l’intégration continue ; environnements GitHub pour limiter les secrets de production. Les hébergeurs (Vercel, Netlify, Cloudflare) définissent tous les variables par environnement. Validez-les avec zod lors de la compilation.
Questions Fréquemment Posées
La leçon « Variables d’environnement dans l’intégration continue » est-elle gratuite ?
Oui — le texte complet de « Variables d’environnement dans l’intégration continue » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Variables d’environnement dans l’intégration continue » ?
Stockez les secrets dans GitHub Secrets, injectez-les dans la compilation comme variables d’environnement et accédez-y dans Vite avec import.meta.env ou dans Next.js avec process.env. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Variables d’environnement dans l’intégration continue » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- GitHub Actions pour le frontend : analyse, tests et compilation
- Déployer sur Vercel, Netlify et Cloudflare Pages
- Variables d’environnement dans l’intégration continue
- Vérifications Lighthouse automatisées