React.js에서 환경 변수 사용

Managed Runtime 환경 변수를 사용하면 코드를 변경하지 않고도 환경에서 실행 중인 애플리케이션 프로세스에 변수를 추가할 수 있습니다. 환경 변수는 안전하게 저장되므로 다음과 같은 활용 사례에 적합합니다.

  • API 키로 보호되는 타사 리소스 호출
  • 조건부로 React.js 렌더링 변경

자세한 내용은 환경 변수를 참조하십시오.

이 튜토리얼에서는 환경 변수를 사용하여 코드를 변경하지 않고 React.js 렌더링을 변경합니다. 환경 변수는 process.env를 통해 액세스할 수 있으며 Node.js에서만 사용할 수 있고 브라우저에서는 사용할 수 없습니다. PWA Kit 렌더링은 클라이언트와 서버 모두에서 렌더링된다는 점에서 동형입니다. 따라서 React.js에서 환경 변수를 사용할 수 있도록 하려는 경우 이 튜토리얼에 나와 있는 대로 PWA Kit 구성 파일에 추가할 수 있습니다.

이 예제에서는 환경 변수를 사용하여 사이트에서 기능을 활성화합니다. 예를 들어 제한된 시간 동안 빠른 체크아웃과 같은 새로운 기능을 테스트할 수 있습니다. 그런 다음 기능에 대한 구매자 참여를 모니터링하여 그 영향을 파악할 수 있습니다.

이 튜토리얼을 완료하려면 먼저 다음을 수행합니다.

  • Managed Runtime 및 Runtime Admin에 대한 액세스 권한을 부여 받습니다. Managed Runtime 관리를 참조하십시오.
  • Managed Runtime API를 사용하기 위한 API 키를 얻습니다. API 키를 찾으려면 Runtime Admin 도구에 로그인하여 계정 설정 페이지로 이동하십시오.
  • 환경 변수를 설정하는 프로젝트에 대한 개발자 또는 관리자 역할을 부여 받습니다. 액세스 권한이 없는 경우 Managed Runtime 관리자 역할의 다른 사람에게 도움을 요청하십시오.

이 튜토리얼의 명령을 실행하기 전에 Placeholder를 실제 값으로 바꿉니다. 자리 표시자는 $PLACEHOLDER와 같은 형식입니다.

프로젝트에서, 선택한 콘텐츠 또는 기능을 생성듭니다. 예를 들어 홈 페이지에 히어로 배너를 만듭니다.

  1. 현재 세션에서 환경 변수를 설정하려면 터미널을 열고 다음 명령을 실행합니다.

    • Windows: set ENABLE_FEATURE='true'
    • macOS를 비롯한 대부분의 Unix 계열 운영 체제:export ENABLE_FEATURE=‘true’

  2. 다음을 실행하여 환경 변수가 올바르게 설정되었는지 확인합니다.

    • Windows: echo %$ENABLE_FEATURE%
    • macOS를 비롯한 대부분의 Unix 계열 운영 체제:echo $ENABLE_FEATURE

    이 명령은 true를 출력으로 반환합니다.

  3. 이 JavaScript 코드를 프로젝트의 구성 파일(config/default.js)에 추가합니다.

  1. 이 JavaScript 코드를 프로젝트의 홈 페이지(app/pages/home/index.jsx)에 추가합니다.
  1. npm start를 사용하여 개발 서버를 시작한 다음, 로컬에서 홈 페이지로 이동하여 렌더링된 기능을 확인합니다.

변경 사항을 프로덕션 환경에 배포하기 전에 비프로덕션 환경에서 이러한 단계를 테스트하는 것이 좋습니다.

이 튜토리얼의 명령을 실행하기 전에 Placeholder를 실제 값으로 바꿉니다. 자리 표시자는 $PLACEHOLDER와 같은 형식입니다.

  1. cURL을 사용하여 projects_target_env_var_partial_update API 엔드포인트를 호출하고 기능 플래그를 환경 변수로 설정합니다. 그러면 번들이 배포됩니다. 코드에서 환경 변수를 사용하기 전에 환경이 다시 배포될 때까지 기다립니다. Runtime Admin을 사용하여 환경 변수를 관리할 수도 있습니다. 환경 변수를 참조하십시오.
  1. 선택한 환경에 로컬 시스템의 번들을 배포합니다.