Accéder aux variables d'environnement YAML dans l'application React

Question

Je développe une application React qui sera déployée dans 3 environnements. Développement/AQ et Produit.

L'équipe Devops m'a fourni un fichier YAML contenant des variables d'environnement et nous a demandé d'utiliser ces variables dans notre application.

Exemple YAML -

---
    Version api : apps/v1
      Étiquettes:
        application : kubesphere
        composant : ui-dev
        niveau : frontend
      nom : ui-dev
      espace de noms : projet de test
    spécification :
        matchLabels :
          application : kubesphere
          composant : ui-dev
          niveau : frontend
      modèle:
        métadonnées :
          Étiquettes:
            application : kubesphere
            composant : ui-dev
            niveau : frontend
        spécification :
          conteneurs :
            -env :
                - nom : BACKEND_URL
                  valeur : http://192.40.84.98:5656
              image : $REGISTRY/$HARBOR_NAMESPACE/$APP_NAME :$IMAGE_VERSION-$BUILD_NUMBER
              imagePullPolicy : toujours

La variable à laquelle nous devons accéder est BACKEND_URL.

Je les utilise dans notre application en tant que - process.env.BACKEND_URL mais cela ne fonctionne pas.

Est-ce que j'ai raté quelque chose ? S'il vous plaît guider.

Answer 1

Vous ne pouvez pas accéder au JavaScript (navigateur) côté client process.env Dans ce cas, il est réactif. Par conséquent, même si le conteneur possède cette variable d’environnement, JavaScript ne peut pas y accéder.

La façon dont React utilise les variables d'environnement est que React les lit à partir du fichier .env, puis dans la construction, React prend ces variables et les conserve sous forme de code JavaScript.

Dans votre cas, l'image (application React) est déjà construite, elle ne peut donc pas Accédez à ces variables d'environnement dans le conteneur..