성공을 위한 스킬
Ask the Community
Page Designer와 PWA Kit 통합
보호된 리소스 액세스
React.js에 환경 변수 사용
암호 재설정 구현
암호 없는 로그인 구현
소셜 로그인 구현
쿠키를 사용한 개인화
구매자 컨텍스트를 사용한 개인화
매장 찾기로 매장 매출 증대를 참조하십시오.
Tracking Consent Banner(추적 동의 배너)로 개인정보보호를 참조하십시오.
캐시 적중률 극대화
사이트맵으로 SEO 개선
환경 변수를 사용하면 코드를 변경할 필요 없이 환경에서 실행 중인 애플리케이션 프로세스에 변수를 추가할 수 있습니다. 환경 변수는 안전하게 저장되므로 다음과 같은 활용 사례에 적합합니다.
환경 변수는 앱 서버에서만 액세스할 수 있습니다. 프록시 및 엣지 기능을 포함한 엣지 서비스의 동작을 수정할 수 없습니다.
Note
환경 변수를 관리하는 프로젝트에 대한 개발자 또는 관리자 역할이 있어야 합니다. 액세스 권한이 없는 경우 Managed Runtime 관리자 역할의 다른 사람에게 도움을 요청하십시오.
다음 튜토리얼에 따라 환경 변수를 설정한 다음, PWA Kit 사이트에서 변수를 사용하도록 코드를 구현합니다. 특정 요구 사항에 따라 코드를 맞춤화할 수 있습니다. 튜토리얼에서는 다음 작업을 수행하는 방법을 보여 줍니다.
변경 사항을 프로덕션 환경에 배포하기 전에 로컬 컴퓨터에서 단계를 테스트한 다음, 비프로덕션 환경에서 테스트하는 것이 좋습니다. 자세한 지침은 모범 사례, 환경 변수 문제 해결 및 로컬 디버깅을 참조하십시오.
환경 변수:
process.env를 사용하여 Node.js에서 액세스합니다.새 환경 변수를 도입할 때 먼저 API 또는 런타임 관리자를 통해 설정합니다. 재배포가 완료될 때까지 기다린 다음, 이를 사용하는 새 번들을 배포합니다.
환경 변수 설정, 업데이트 및 설정 취소
projects_target_env_var_partial_update 사용:
1curl "https://cloud.mobify.com/api/projects/$PROJECT/target/$ENVIRONMENT/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 '{
7 "API_KEY": {"value": "b3Blbi1zZXNhbWU="},
8 "STOREFRONT_CONFIG": {"value": "{\"showBuyNowButton\": false}"},
9 "SLAS_CLIENT_ID": {"value": "da422690-7800-41d1-8ee4-3ce983961078"}
10}'기존 환경 변수를 설정 취소하려면 값을 null로 설정합니다.
환경 변수를 수정하면 환경이 다시 배포됩니다. 업데이트된 값은 배포가 완료되면 사용할 수 있습니다.
모든 환경 변수 가져오기
projects_target_env_var_list 사용:
1curl "https://cloud.mobify.com/api/projects/$PROJECT/target/$ENVIRONMENT/env-var/" \
2 --header "Authorization: Bearer $MOBIFY_API_KEY" \
3 --header 'Accept: application/json'환경 변수를 생성하거나, 업데이트하거나, 제거하거나, 보려면:
getProps 또는 react-query 후크에서 환경 변수를 반환하지 마십시오.환경 변수의 사용에는 다음과 같은 제약 조건이 적용됩니다.
AWS, MRT, X_MRT, MOBIFY, X_MOBIFY, SSR_PROXY, NODE 등의 예약된 접두사로 시작할 수 없습니다.BUNDLE_ID, DEPLOY_ID, DEPLOY_TARGET, EXTERNAL_DOMAIN_NAME, HANDLER, LAMBDA_RUNTIME_DIR, LAMBDA_TASK_ROOT, NODE_ENV, REDIRECT_BUCKET, REDIRECT_KEY, REDIRECT_UPDATE, REMOTE, X_AMZN_TRACE_ID 등의 예약된 이름은 환경 변수 이름으로 사용할 수 없습니다.이 섹션에서는 환경 변수를 사용하는 동안 발생할 수 있는 일반적인 오류에 대해 제안된 해결 방법을 제공합니다.
코드에서 변수가 누락되었다는 Error가 표시됩니다.
원인: 코드가 호출하는 환경 변수가 설정되지 않았습니다.
제안된 솔루션: projects_target_env_var_partial_update API 엔드포인트를 호출하여 해당 환경 변수를 설정합니다.
코드가 환경 변수를 찾을 수 없다는 오류 메시지를 로깅합니다.
원인: 코드에 오타가 있거나 잘못된 환경 변수 이름이 사용되어 코드에서 환경 변수를 찾을 수 없습니다.
제안된 솔루션: 코드에서 환경 변수 이름의 철자를 올바르게 입력하고 올바른 환경 변수 이름을 사용했는지 확인합니다. 설정된 변수의 전체 목록을 보려면 projects_target_env_var_list API 엔드포인트를 호출하여 환경 변수 이름을 확인합니다.
환경 변수를 설정하기 위한 API 호출이 실패합니다.
원인: 환경 변수 이름이 제약 조건에 부합하지 않을 수 있습니다. 예를 들어 환경 변수 값의 크기가 32KB를 초과합니다.
제안된 솔루션: 환경 변수가 제약 조건에 부합하는지 확인합니다.
인증 오류는 API 키 사용과 관련한 코드를 실행할 때 발생합니다.
원인: 환경 변수를 설정할 때 사용한 API 키가 올바른 형식이 아니거나 누락되었습니다.
제안된 솔루션: 환경 변수에 의해 저장된 API 키가 올바른지 확인합니다. 필요한 경우 projects_target_env_var_partial_update API 엔드포인트를 호출하여 API 키를 수정합니다.
네트워크 오류로 인해 fetch 요청이 실패합니다.
원인: 코드에서 호출된 API 엔드포인트의 URL이 올바르게 정의되지 않았거나 잘못되었을 수 있습니다. 예를 들어 CMS(컨텐츠 관리 시스템) 엔드포인트의 URL이 올바르지 않습니다.
제안된 솔루션: 코드의 API 엔드포인트에 대한 URL이 올바른지 확인합니다.