React アプリケーションで YAML 環境変数にアクセスする

Question

私は 3 つの環境にデプロイされる React アプリケーションを開発しています。 開発/QAおよび製品。

Devops チームは、環境変数を含む YAML ファイルを私に提供し、これらの変数をアプリケーションで使用するように依頼しました。

YAML の例 -

---
    APIバージョン: アプリ/v1
      ラベル:
        アプリ：キューブスフィア
        コンポーネント: ui-dev
        層: フロントエンド
      名前: ui-dev
      名前空間: テストプロジェクト
    仕様:
        マッチラベル:
          アプリ：キューブスフィア
          コンポーネント: ui-dev
          層: フロントエンド
      テンプレート：
        メタデータ:
          ラベル:
            アプリ：キューブスフィア
            コンポーネント: ui-dev
            層: フロントエンド
        仕様:
          コンテナ:
            -環境:
                - 名前: BACKEND_URL
                  値: http://192.40.84.98:5656
              画像: $REGISTRY/$HARBOR_NAMESPACE/$APP_NAME:$IMAGE_VERSION-$BUILD_NUMBER
              imagePullPolicy: 常に

アクセスする必要がある変数は BACKEND_URL です。

アプリ内で process.env.BACKEND_URL として使用していますが、機能しません。

何か見逃したことがありますか?ご指導ください。

Answer 1

クライアントサイド JavaScript (ブラウザ) から process.env にアクセスすることはできず、その場合は反応します。したがって、コンテナーにその環境変数がある場合でも、JavaScript はその環境変数にアクセスできません。

React が環境変数を使用する方法は、React が .env ファイルから環境変数を読み取り、ビルド時にそれらの変数を取得して JavaScript コードとして保持することです。

あなたの場合、イメージ（反応アプリ）はすでに構築されているため、それはできません コンテナ内のこれらの環境変数にアクセスします。..