Jak aplikovat pod proměnných prostředí hodnot do aplikace Reagovat na běhu?

Můžete použít knihovny dot-env

import React from "react";
import env from "react-dotenv";

export function MyComponent() {
  return <div>{env.REACT_APP}</div>;
}

zatímco v nasazení můžete předat tajemství z tajemství a configmap

spec:
      containers:
        - name: example-site
          image: example/app:v1
          ports:
            - containerPort: 80
          env:
          - name: REACT_APP
            value: "123456"

Hlavní důvod, proč chci vědět, je dynamické aktualizace backend např. nebo Redis Url - se může změnit, když aplikace není restartován, přeložena, atd.

Výše uvedené scénáře dobře zapadá s vaším požadavkem, namísto použití config.json.

Můžete předat více hodnot pro nasazení pomocí configmap a tajemství.

Jako @Tvrdé Manvar navrhl (díky moc!), na react-dotenv knihovna může být použit, ale jen přidání do projektu nestačí.

Za prvé, budete muset dodržovat všechny kroky popsané v reagovat-dotenv dokumentace (přidání .env soubor do projektu, editace package.json souboru).

V mém případě, .env soubor vypadal takto:

REACT_APP_DEPLOY_SETUP='__dps__'
REACT_APP_PORT='__prt__'
REACT_APP_BACKEND_URL='__bur__'

To jsou jen zástupné symboly pro skutečné hodnoty, které budou přidány za běhu.

S .env soubor připraven, npm skripty předřazen s react-dotenv příkaz a proměnné povolené (jak je popsáno v dokumentaci knihovny), můžete si vytvořit svůj aplikace image.

Když obraz je připraven, přidejte jej do kubernetes pod konfigurační soubor a nahradit proměnné' zástupné symboly s reálnými hodnotami, jako je tento:

[...]
spec:
  containers:
  - name: plg-frontend
    image: localhost:5000/frontend:1.22
    ports:
    - containerPort: 80
    command:
    - sh
    - -c
    args:
    - sed -i "s/__prt__/$REACT_APP_PORT/g" /usr/share/nginx/html/env.js;
      sed -i "s/__bur__/http:\/\/$BACKEND_SERVICE_HOST/g" /usr/share/nginx/html/env.js;
      sed -i "s/__dps__/$REACT_APP_DEPLOY_SETUP/g" /usr/share/nginx/html/env.js;
      nginx -g 'daemon off;'
    env:
    - name: REACT_APP_DEPLOY_SETUP
      value: "development"
    - name: REACT_APP_PORT
      value: "5089"

Co se tam stalo, bylo, že nahradí zástupný symbol hodnoty se skutečnými hodnotami:

• $BACKEND_SERVICE_HOST je proměnné prostředí, které existuje v modulu a lze číst z běžícího kontejneru,
• $REACT_APP_DEPLOY_SETUP je normální řetězec definovaný uživatelem,
• $REACT_APP_PORT je celočíselná hodnota (musí být v uvozovkách, jako struny!).

A nahradí se stalo s sed příkaz (nebo spíše: sh -c "sed -i ..."). Všechny příkazy jsou řetězem, takže nezapomeňte na středník na konci každého argumentu.

Všechny výměny byly provedeny v /usr/share/nginx/html/env.js soubor, který je vytvořen react-dotenv knihovna v projektu root. Skutečné umístění závisí na tom, kde budete namontovat váš vybudovat image (to je definováno v Dockerfile).

A konečně, nginx příkaz se nazývá, protože toto je poslední příkaz vyvolán v obrázku Dockerfile. Bez tohoto explicitního volání, příkaz z Dockerfile by být přepsány s příkazy související se pod nádobu a v tomto případě, nginx nechtěla spustit aplikaci.

Poté, co modul je spuštěna, můžete zkontrolovat, zda proměnné, které jsou přítomny v obalu:

kubectl exec <pod-name> -- printenv | grep REACT_APP

Ale to neznamená, že byly přečteny vaší aplikaci za běhu. Jestli byly změněny na hodnoty z modulu definice, můžete buď exec běží pod kontejner a náhled env.js soubor nebo přidat nějaké konzole protokolování v aplikaci kód.