Notre

blog

< Retour
Tuto Front JS • Variabilisation pour multi-environnements

Tuto Front JS • Variabilisation pour multi-environnements

La plupart des frameworks JS rend difficile l’application du principe DevOps « Build once, Deploy many« , ce qui signifie « Construisez-la une seule fois et déployez la dans tous vos environnements en y injectant la configuration propre à cet environnement ». 

En effet, lors de l’utilisation d’un fichier .env, le contenu de celui-ci est packagé dans l’application au moment du build de celle-ci et minifié. Ce qui rend difficile sa modification après coup, lors du démarrage de l’application. 

De plus, l’application étant exécutée dans un navigateur et non sur un serveur d’application, le concept même des variables d’environnement ne s’applique pas. 

Il est cependant possible, dans la plupart des cas, de contourner ces problèmes en utilisant les propriétés du navigateur, notamment l’objet window du DOM. 

 

Dans cet article, l’Elosien Gérald fait le point et vous livre les étapes clés. 

 

Variabilisation du projet 

Voici les étapes à suivre : 

 

Dans le dossier public du projet, créer un fichier config.js. Celui-ci contiendra les propriétés que l’on veut déclarer. Par exemple : 

window.VUE_APP_API_URL=https://monapplication/api;
window.VUE_APP_AUTH_URL=https://keycloak/auth;

 

Le dossier public contient généralement un fichier index.html qu’il faut modifier pour charger le fichier config.js 

<html lang="">
  <head>
...
    <script src="/config.js" type="text/javascript"></script>
...
    <title><%= htmlWebpackPlugin.options.title %></title>

 

Enfin, modifier le code de l’application pour utiliser les propriétés déclarées. Par exemple, en vuejs : 

  • Remplacer const apiUrl = process.env.VUE_APP_API_URL ;
  • Par const apiURL = window.VUE_APP_API_URL ? window.VUE_APP_API_URL : process.env.VUE_APP_API_URL; 

 

À ce stade, il est possible de surcharger la configuration par défaut au démarrage de l’application en remplaçant le fichier config.js. 

 

Docker – Utilisation des variables d’environnement

Il est tout à fait possible d’utiliser les variables d’environnement d’un conteneur pour constituer les fichiers config.js au démarrage de celui-ci. 

 

Pour cela, en prenant l’exemple d’un conteneur nginx, nous allons : 

1. Créer, dans le dossier public, un fichier config.js.template qui servira de modèle pour constituer le fichier config.js 

 

2.Créer un script create_config_js.sh qui : 

  • lit le fichier config.js.template 
  • regarde s’il y a une variable d’environnement correspondante, pour chaque propriété contenue dans ce fichier
  • injecte la valeur trouvées dans le fichier config.js 

 

#!/bin/bash
###############################
#
# Ce script génère le fichier config.js
#    à partir des variables d'environnement
#
# Il lit les variables présentes dans config.template.js.
# Si cette varible existe en tant que variables d'environnement
au démarrage de nginx,
# il l'ajoute au fichier config.js accompagné de sa valeur
#
###############################

SRC=/usr/share/nginx/html/config.template.js
DST=/usr/share/nginx/html/config.js

# Vérifie que le fichier source existe
if [ -z $SRC ] || [ ! -e "$SRC" ]; then
    echo "Le fichier source '$SRC' n'existe pas"
    exit 1
fi

OUTPUT="// fichier généré"

# Lire chaque ligne du fichier source et remplacer les variables
d'environnement
while IFS="" read -r line || [ -n "$line" ]; do
    use_line=$line

    # Si une ligne contient "window.", récupérer la variable
    d'environnement correspondante
    if [[ $line =~ "window." ]]; then
        ENVIRONMENT_VARIABLE_NAME=`echo $line | sed -re 's/window\.
        (.*)\s*\=(.*);/\1/g'`
        value=${!ENVIRONMENT_VARIABLE_NAME}

        # Si la variable est définie, remplacer la ligne par 
        la valeur de l'environnement
        if [[ ${value} && ${value-x} ]]; then
            use_line="window.$ENVIRONMENT_VARIABLE_NAME = '$value';"
        fi
    fi

    # Ajouter la ligne traitée au contenu de sortie
    OUTPUT="$OUTPUT\n$use_line"
done <$SRC

# Écrire la sortie dans le fichier de destination
echo -en $"$OUTPUT" > $DST

 

 

Ajouter ce script dans le conteneur et faire en sorte qu’il soit exécuté au démarrage : 

# BUILD Final image step
################################
FROM nginxinc/nginx-unprivileged:1.27
USER root

COPY create_config_js.sh /docker-entrypoint.d/

COPY --from=node-step /app/dist /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d/

RUN chown -R nginx:nginx /usr/share/nginx/html && \
    chown nginx:nginx /etc/nginx/conf.d/default.conf && \
    chmod 755 /docker-entrypoint.d/create_config_js.sh

USER nginx
CMD ["nginx", "-g", "daemon off;"]

 

Comment débugger si ça ne fonctionne pas ? 

  • Regarder le contenu de config.js dans le conteneur : est-il bien alimenté ? 
  • Regarder le code source de la page : le fichier config.js est-il bien chargé ? 
  • Utiliser les outils de debug du navigateur : il est possible d’interroger le contenu des propriétés