Managed Runtime 환경 변수를 사용하면 코드를 변경하지 않고도 환경에서 실행 중인 애플리케이션 프로세스에 변수를 추가할 수 있습니다. 환경 변수는 안전하게 저장되므로 다음과 같은 활용 사례에 적합합니다.
자세한 내용은 환경 변수를 참조하십시오.
이 튜토리얼에서는 환경 변수를 사용하여 코드를 변경하지 않고 React.js 렌더링을 변경합니다. 환경 변수는 process.env를 통해 액세스할 수 있으며 Node.js에서만 사용할 수 있고 브라우저에서는 사용할 수 없습니다. PWA Kit 렌더링은 클라이언트와 서버 모두에서 렌더링된다는 점에서 동형입니다. 따라서 React.js에서 환경 변수를 사용할 수 있도록 하려는 경우 이 튜토리얼에 나와 있는 대로 PWA Kit 구성 파일에 추가할 수 있습니다.
이 예제에서는 환경 변수를 사용하여 사이트에서 기능을 활성화합니다. 예를 들어 제한된 시간 동안 빠른 체크아웃과 같은 새로운 기능을 테스트할 수 있습니다. 그런 다음 기능에 대한 구매자 참여를 모니터링하여 그 영향을 파악할 수 있습니다.
이 튜토리얼을 완료하려면 먼저 다음을 수행합니다.
이 튜토리얼의 명령을 실행하기 전에 Placeholder를 실제 값으로 바꿉니다. 자리 표시자는 $PLACEHOLDER와 같은 형식입니다.
프로젝트에서, 선택한 콘텐츠 또는 기능을 생성듭니다. 예를 들어 홈 페이지에 히어로 배너를 만듭니다.
현재 세션에서 환경 변수를 설정하려면 터미널을 열고 다음 명령을 실행합니다.
set ENABLE_FEATURE='true'export ENABLE_FEATURE=‘true’다음을 실행하여 환경 변수가 올바르게 설정되었는지 확인합니다.
echo %$ENABLE_FEATURE%echo $ENABLE_FEATURE이 명령은 true를 출력으로 반환합니다.
이 JavaScript 코드를 프로젝트의 구성 파일(config/default.js)에 추가합니다.
1function parseEnvVar(envVarName) {
2 const val = process.env[envVarName];
3 if (val === undefined) {
4 throw new Error(`Environment variable ${envVarName} is required.`);
5 }
6 try {
7 return JSON.parse(val);
8 } catch (err) {
9 throw new Error(
10 `Environment variable ${envVarName} must be a valid JSON string.`
11 );
12 }
13}
14module.exports = {
15 app: {
16 enableFeature: parseEnvVar("ENABLE_FEATURE") || false,
17 },
18};app/pages/home/index.jsx)에 추가합니다.1import { getConfig } from "@salesforce/pwa-kit-runtime/utils/ssr-config";
2
3const Home = () => {
4 const config = getConfig();
5 const enableFeature = config.app.enableFeature;
6 return enableFeature && <h1>My New Feature</h1>
7};
8
9export default Home;npm start를 사용하여 개발 서버를 시작한 다음, 로컬에서 홈 페이지로 이동하여 렌더링된 기능을 확인합니다.변경 사항을 프로덕션 환경에 배포하기 전에 비프로덕션 환경에서 이러한 단계를 테스트하는 것이 좋습니다.
이 튜토리얼의 명령을 실행하기 전에 Placeholder를 실제 값으로 바꿉니다. 자리 표시자는 $PLACEHOLDER와 같은 형식입니다.
1curl "https://cloud.mobify.com/api/projects/$PROJECT_ID/target/$ENVIRONMENT_ID/env-var/" \
2 --request 'PATCH' \
3 --header 'Content-Type: application/json' \
4 --header 'Accept: application/json' \
5 --header "Authorization: Bearer $MOBIFY_API_KEY" \
6 --data '{"ENABLE_FEATURE": {"value": "true"}}'
j