Configuration dynamique des variables d'environnement.

Catégories

JavaScript Nginx Docker

Comment modifier dynamiquement les variables d'environnement avec Vite et Nginx dans Docker

Lorsqu'on déploie une application Vue.js/Vite avec Nginx dans un conteneur Docker, nous faisons face à un défi : l'impossibilité de modifier les variables d'environnement une fois l'application construite, car celle-ci devient statique. Voici une solution élégante à ce problème.

1. Configuration des variables d'environnement

  • 1.1 Créez un fichier .env à la racine du projet. Ce fichier doit être ignoré par Docker en l'ajoutant au .dockerignore :
VITE_API_URL=http://localhost:8080

1.2 Créez un fichier .env.production qui fera le lien entre les variables Vite et les variables d'environnement Docker :

VITE_API_URL=APP_API_URL

2. Script de remplacement des variables

Créez un fichier env.sh à la racine qui remplacera dynamiquement les variables au démarrage du conteneur :

#!/bin/sh

# Parcourt toutes les variables d'environnement commençant par APP_
for i in $(env | grep APP_)
do
    key=$(echo $i | cut -d '=' -f 1)
    value=$(echo $i | cut -d '=' -f 2-)
    echo "Remplacement de ${key} par ${value}"

    # Remplace les occurrences dans les fichiers JS
    find /usr/share/nginx/html -type f \( -name '*.js' \) -exec sed -i "s|${key}|${value}|g" '{}' +
done

3. Configuration Docker

Créez un Dockerfile qui construira l'application et configurera Nginx :

FROM node:22-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:1.21.6-alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY /nginx.conf /etc/nginx/conf.d/default.conf
COPY env.sh /docker-entrypoint.d/env.sh
RUN chmod +x /docker-entrypoint.d/env.sh

4. Utilisation

  • 4.1 Construction de l'image
docker build -t app-front .
  • 4.2 Lancement du conteneur
docker run --rm -p 3000:80 -e APP_API_URL=http://localhost:8080 app-front

Comment ça fonctionne ?

  1. Au build, Vite remplace VITE_API_URL par la valeur APP_API_URL
  2. Au démarrage du conteneur, le script env.sh s'exécute automatiquement
  3. Le script recherche toutes les variables d'environnement commençant par APP_
  4. Il remplace ensuite chaque occurrence de ces variables dans les fichiers JS par leur valeur réelle

0 Commentaire