BaliseTonSite

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*.local

GitHub Secrets

GitHub permet de stocker des secrets chiffrés accessibles uniquement dans les workflows GitHub Actions.

Ajouter un secret

  1. Va dans Settings > Secrets and variables > Actions
  2. Clique "New repository secret"
  3. Nom : CLOUDFLARE_API_TOKEN
  4. 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_URL
Bashbash
# 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 }}   # Secret

Environnements 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_SECRET

Checklist sécurité

  • .env.local est 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'aventure
Déjà membre ?Connecte-toi