React 애플리케이션에서 YAML 환경 변수에 액세스

Question

저는 3가지 환경에 배포될 React 애플리케이션을 개발 중입니다. 개발/QA 및 제품.

Devops 팀은 저에게 환경 변수가 포함된 YAML 파일을 제공하고 애플리케이션에서 이러한 변수를 사용하도록 요청했습니다.

YAML 예 -

---
    api버전: 앱/v1
      라벨:
        앱: kubesphere
        구성요소: ui-dev
        계층: 프런트엔드
      이름: ui-dev
      네임스페이스: 테스트 프로젝트
    투기:
        일치 라벨:
          앱: kubesphere
          구성요소: ui-dev
          계층: 프런트엔드
      주형:
        메타데이터:
          라벨:
            앱: kubesphere
            구성요소: 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 이 경우 Reactive입니다. 따라서 컨테이너에 해당 환경 변수가 있어도 JavaScript는 이에 액세스할 수 없습니다.

React가 env 변수를 사용하는 방식은 React가 .env 파일에서 해당 변수를 읽은 다음 빌드에서 React가 해당 변수를 가져와 JavaScript 코드로 유지하는 것입니다.

귀하의 경우 이미지(반응 앱)가 이미 빌드되어 있으므로 사용할 수 없습니다. 컨테이너의 해당 환경 변수에 액세스하세요..