Comment implémenter des variables d'environnement d'exécution avec create-react-app, Docker et Nginx

Il existe de nombreuses façons de configurer votre application React. Utilisons une approche qui respecte la méthodologie de l’application Twelve-Factor. Cela signifie qu'il applique la reconfiguration au cours de l'exécution. Par conséquent, aucune construction par environnement ne serait requise.

Que voulons-nous réaliser?

Nous voulons pouvoir exécuter notre application React en tant que conteneur Docker construit une fois. Il s'exécute partout en étant configurable pendant l'exécution. Le résultat doit être un conteneur léger et performant qui sert de contenu statique à notre application React, ce que nous obtenons avec Ngnix Alpine. Notre application doit permettre la configuration dans un fichier docker-compose tel que:

Nous devrions pouvoir configurer notre application React à l'aide de -e flag (variables d'environnement) lorsque vous utilisez la commande d'exécution Docker.

À première vue, cette approche peut sembler présenter un avantage insignifiant pour le travail supplémentaire nécessaire à la configuration initiale. Mais une fois l’installation terminée, les configurations et le déploiement spécifiques à l’environnement seront beaucoup plus faciles à gérer. Donc, pour ceux qui ciblent des environnements dynamiques ou qui utilisent des systèmes d’orchestration, cette approche est sans aucun doute une chose à considérer.

le problème

Tout d'abord, il est clair que les variables d'environnement n'existent pas dans l'environnement du navigateur. Quelle que soit la solution que nous utilisons aujourd'hui, ce n'est qu'une fausse abstraction.

Mais ensuite, vous vous demandez peut-être ce qu’il s’agit des fichiers .env et des variables d’environnement préfixées REACT_APP qui proviennent directement de la documentation. Même à l'intérieur du code source, ceux-ci sont utilisés en tant que process.env, tout comme nous utilisons des variables d'environnement dans Node.js.

En réalité, le processus d'objet n'existe pas dans l'environnement du navigateur, il est spécifique au nœud. CRA par défaut ne fait pas de rendu côté serveur. Il ne peut pas injecter de variables d’environnement pendant la diffusion de contenu (comme le fait Next.js). Lors du transfert, le processus Webpack remplace toutes les occurrences de process.env par une valeur de chaîne donnée. Cela signifie qu'il ne peut être configuré que pendant la phase de construction.

Solution

Le moment précis où il est encore possible d'injecter des variables d'environnement se produit lorsque nous démarrons notre conteneur. Ensuite, nous pouvons lire les variables d'environnement à l'intérieur du conteneur. Nous pouvons les écrire dans un fichier qui peut être servi via Nginx (qui sert également notre application React). Ils sont importés dans notre application à l’aide de la balise