Variables & secrets
Gère tes clés API et configurations sensibles sans les exposer dans ton code.
Variables d'environnement en local
Bashbash
# .env.local (JAMAIS commité, dans .gitignore)
NEXT_PUBLIC_SUPABASE_URL=https://xyz.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...secret...
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...Bashbash
# .gitignore - vérifier que .env est ignoré
.env
.env.local
.env.production
.env*.localGitHub Secrets
GitHub permet de stocker des secrets chiffrés accessibles uniquement dans les workflows GitHub Actions.
Ajouter un secret
- Va dans Settings > Secrets and variables > Actions
- Clique "New repository secret"
- Nom :
CLOUDFLARE_API_TOKEN - Valeur : ton token (chiffré, invisible ensuite)
Utiliser un secret dans un workflow
Bashbash
# Les secrets sont injectés via la syntaxe :
# ${{ secrets.NOM_DU_SECRET }}
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Deploy
uses: cloudflare/wrangler-action@v3
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
- name: Notify
run: echo "Deployed with token ${{ secrets.CLOUDFLARE_API_TOKEN }}"
# Le token est masqué dans les logs : ***Variables vs secrets
Bashbash
# GitHub distingue 2 types :
# VARIABLES (Settings > Secrets > Variables)
# - Valeurs NON sensibles
# - Visibles dans les logs
# - Accessibles via : vars.NOM
# Exemples : NODE_VERSION, PROJECT_NAME
# SECRETS (Settings > Secrets)
# - Valeurs SENSIBLES (chiffrées)
# - Masquées dans les logs (remplacées par ***)
# - Accessibles via : secrets.NOM
# Exemples : API_TOKEN, DATABASE_URLBashbash
# Utiliser les deux dans un workflow :
jobs:
build:
runs-on: ubuntu-latest
env:
NODE_ENV: production
PROJECT: ${{ vars.PROJECT_NAME }} # Variable
steps:
- run: npm run build
env:
DATABASE_URL: ${{ secrets.DATABASE_URL }} # SecretEnvironnements GitHub
Pour les projets plus avancés, GitHub propose des environnements(staging, production) avec des secrets et des règles de protection séparées.
Bashbash
# Utiliser un environnement dans un workflow :
jobs:
deploy-production:
runs-on: ubuntu-latest
environment: production # Utilise les secrets de "production"
steps:
- uses: actions/checkout@v4
- run: npm run deploy
env:
API_URL: ${{ vars.API_URL }} # Variable de l'env "production"
API_KEY: ${{ secrets.API_KEY }} # Secret de l'env "production"
deploy-staging:
runs-on: ubuntu-latest
environment: staging # Utilise les secrets de "staging"
steps:
- uses: actions/checkout@v4
- run: npm run deploy
env:
API_URL: ${{ vars.API_URL }} # Variable de l'env "staging"
API_KEY: ${{ secrets.API_KEY }} # Secret de l'env "staging"Variables dans Cloudflare Pages
Bashbash
# Cloudflare Pages a aussi ses propres variables d'environnement :
# Dashboard > Workers & Pages > ton projet > Settings > Environment variables
# Tu peux définir des variables pour :
# - Production (branche main)
# - Preview (toutes les autres branches)
# Variables courantes :
# NEXT_PUBLIC_SUPABASE_URL
# NEXT_PUBLIC_SUPABASE_ANON_KEY
# NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
# Les variables sensibles côté serveur :
# SUPABASE_SERVICE_ROLE_KEY
# STRIPE_SECRET_KEY
# STRIPE_WEBHOOK_SECRETChecklist sécurité
.env.localest dans.gitignore- Aucun secret dans le code source ou les commentaires
- Les clés sont dans GitHub Secrets ou Cloudflare env vars
- Les variables
NEXT_PUBLIC_ne contiennent que des clés publiques - Rotation régulière des clés sensibles (tous les 3-6 mois)
- Accès aux secrets limité aux collaborateurs de confiance
Ce que tu as débloqué
- Gérer les variables d'environnement en local (
.env.local) - Stocker des secrets chiffrés dans GitHub
- Distinguer variables publiques et secrets sensibles
- Utiliser les environnements GitHub (staging/production)
- Configurer les variables Cloudflare Pages
Verifie tes acquis
5 questions pour valider ce chapitre
1. Où stocker les clés API sensibles dans un projet Next.js en local ?
Valide et sauvegarde ce chapitre
Ne perds pas le fil de ton apprentissage. Chaque QCM terminé sauvegarde ton score. Crée ton profil gratuitement pour débloquer toutes les évaluations du site et retrouver tes résultats plus tard.
Commencer l'aventureDéjà membre ?Connecte-toi