스토어프런트 시작

이 가이드에서는 PWA Kit 스토어프런트를 시작하고 공식 퍼블릭 웹 주소에서 액세스할 수 있도록 하는 방법을 설명합니다. 세 가지 옵션을 사용하여 트래픽을 시작하고 PWA Kit 스토어프런트로 라우팅할 수 있습니다.

  1. CloudFlare나 Akamai 같은 타사 CDN을 사용합니다.
  2. Salesforce Commerce Cloud에서 제공하는 임베디드 CDN(eCDN)을 사용합니다. eCDN을 사용하여 Managed Runtime으로 트래픽을 라우팅하는 방법에 대한 자세한 내용은 가이드를 참조하십시오.
  3. Managed Runtime CDN을 사용합니다.

이 가이드에서는 다음과 같은 속성의 예제 스토어프런트를 사용합니다.

  • 프로덕션 URL: https://www.example.com
  • 프로젝트 ID: example
  • 환경 ID: staging 및 production

Managed Runtime에 타사 CDN을 중복 적용하는 것은 선택 사항입니다. 고객은 다음을 기준으로 타사 CDN을 사용하도록 선택할 수 있습니다.

  • 내부 팀이 CDN을 구성하고 관리하는 데 숙련된 경우, 선택한 CDN 공급업체와의 기존 관계
  • eCDN 또는 Managed Runtime이 제공하는 것 이상의 CDN 기능을 추가로 제어해야 합니다.

저렴한 서비스 비용, 빠른 출시 시간 및 제한적인 CDN 요구 사항을 원하는 고객은 eCDN 또는 내장된 Managed Runtime CDN을 사용할 수 있습니다.

이 가이드에서는 Runtime Admin 웹 애플리케이션과 Managed Runtime API에 액세스하여 관리 작업을 수행할 수 있다고 가정합니다. 이러한 도구에 액세스하려면 Commerce Cloud 관리자에게 연락하여 Account Manager에서 Managed Runtime User 또는 Managed Runtime Admin 역할 중 하나를 계정에 추가하도록 요청하십시오.

Managed Runtime API에 요청을 하려면 HTTP 요청 Authorization 헤더에 값이 Bearer $API_KEY인 API 키를 포함해야 합니다. 제공된 모든 샘플 요청에서 $API_KEY를 실제 API 키로 바꾸어야 한다는 것을 잊지 마십시오.

API 키를 찾으려면 Runtime Admin에 로그인하여 Account Settings(계정 설정) 페이지로 이동하십시오.

중요: 스크립트가 사용자 대신 작업을 완료할 수 있도록 하므로 API 키를 암호처럼 취급하십시오.

CNAME 레코드를 생성하고 업데이트하려면 DNS 제공자에 대한 액세스 권한과 타사 CDN 제공자(해당하는 경우)에 대한 액세스 권한이 필요합니다.

이 가이드에 “Mobify”라는 단어가 몇 번 등장합니다. Mobify는 PWA Kit 및 Managed Runtime의 원천 기술을 개발한 회사의 이름입니다. 2020년에 Salesforce는 Mobify의 모든 기술과 함께 Mobify를 인수했습니다.

Mobify 브랜드 이름은 스토어프런트 호스팅에 사용되는 mobify-storefront.com 도메인과 Managed Runtime API에서 사용되는 cloud.mobify.com 도메인에 나타납니다.

사용되는 도메인에 따라 사이트의 동작을 변경하는 조건부 로직을 추가해야 할 경우, 로컬 개발 서버에서 맞춤형 도메인을 사용할 수 있을 때 이 로직을 테스트하는 편이 더 쉽습니다. 이 같은 로직은 왜 추가해야 하는 것일까요? 도메인에 따라 서로 다른 SLAS 클라이언트 ID를 조회해야 할 경우를 예로 들 수 있습니다.

맞춤형 도메인을 사용하여 로컬 개발 서버를 실행하려면:

  1. 맞춤형 도메인을 127.0.0.1(로컬 호스트)로 확인하도록 로컬 컴퓨터의 DNS를 수정합니다.
  2. ssr.js를 편집합니다.
  3. runtime.createHandler로 전달되는 options에서 포트를 80으로 설정합니다.
  4. EXTERNAL_DOMAIN_NAME=www.example.com npm start를 실행하여 example.com의 값을 맞춤형 도메인으로 바꿉니다. 경우에 따라 포트 80에서 서버를 실행하려면 관리 권한이 필요할 수 있습니다.

이제 브라우저에서 맞춤형 도메인으로 전달되는 요청이 확인되고 로컬 개발 서버로 라우팅됩니다.

환경을 시작하는 프로세스는 스테이징 환경과 프로덕션 환경에서 동일하며, 도메인 이름과 사용되는 Managed Runtime 환경만 다를 뿐입니다.

프로덕션 환경에 대해 이 프로세스를 반복하기 전에 먼저 스테이징 환경에서 시작 프로세스를 테스트하는 것이 좋습니다. 이러한 단계는 PWA Kit 프로젝트를 시작하는 즉시, 그리고 출시일 최소 2주 전에 완료해야 합니다.

제공된 지침과 관련하여, staging.example.com에서 스토어프런트를 시작하는 중이며, Managed Runtime의 프로젝트 ID가 example이고 번들이 staging라는 환경에 배포된다고 가정해보겠습니다.

Runtime Admin 또는 Managed Runtime API를 사용하여 스토어프런트 운영을 개시하는 방법을 연습하기 위한 staging이라는 환경을 생성합니다.

projects_target_create 엔드포인트를 사용하여 환경을 생성하는 샘플 요청은 다음과 같습니다. 요청에서 example을 실제 프로젝트 ID 문자열로, $API_KEY를 API 키로 각각 바꿉니다.

Runtime Admin을 사용하여 환경을 만드는 방법에 대한 지침은 Managed Runtime 관리 가이드를 참조하십시오.

많은 PWA Kit 구현에서는 B2C Commerce API 외에 OCAPI 또는 컨트롤러에도 요청을 보냅니다.

Managed Runtime이 B2C Commerce 인스턴스에 연결할 수 있는지 확인해야 합니다.

API에 연결할 수 있도록 하려면 일반적으로 ecom.example.com과 같은 대체 도메인에서 B2C Commerce 인스턴스를 사용할 수 있도록 eCDN을 구성해야 합니다. 자세한 내용은 eCDN 설정 및 구성 설명서를 참조하십시오.

도메인을 구성한 후 이를 사용하도록 환경의 프록시 설정을 업데이트합니다. 자세한 내용은 요청 프록싱에 대한 가이드를 참조하십시오.

타사 CDN 또는 eCDN을 사용하는 경우에는 이 단계가 필요하지 않습니다. 인증서 구성에 대해서는 CDN 공급업체 설명서를 참조하십시오.

트래픽을 Managed Runtime CDN으로 직접 라우팅하는 경우 Managed Runtime이 사용자를 대신하여 TLS 인증서를 발급하고 관리합니다.

Managed Runtime에서 인증서를 발급할 수 있도록 하려면 다음을 수행해야 합니다.

  • 스토어프런트에 사용할 도메인을 선택합니다. 예를 들어 staging.example.com 및 www.example.com과 같습니다. *.example.com과 같은 와일드카드 도메인도 지원됩니다. 특정 도메인 인증서는 스테이징 및 프로덕션 환경과 연결된 도메인에 대해서만 발급됩니다.
  • AWS에서 인증서를 발급할 수 있도록 도메인 CAA 레코드가 설정되어 있는지 확인합니다.
  • Salesforce 고객 지원에 문의합니다. 이때 원하는 인증서 도메인을 제공합니다.
  • Salesforce는 도메인 소유권을 확인하는 데 사용되는 CNAME 레코드를 제공합니다. 세부 정보를 받은 후 24시간 이내에 제공된 레코드를 생성해야 합니다.

타사 CDN 또는 eCDN을 사용하는 경우에는 이 단계가 필요하지 않습니다.

staging.example.com의 TTL을 1분으로 단축합니다. TTL을 단축하면 DNS 컷오버 프로세스가 빨라지고, 문제가 발생할 경우 신속하게 롤백할 수 있습니다.

TTL은 dig 명령을 사용하여 확인할 수 있습니다.

액세스 제어 설정에서 Managed Runtime UI를 사용하거나 access_control_header API를 사용하여 환경의 액세스 제어 헤더를 설정합니다. 이 예에서는 API를 사용하여 헤더 값 25pn5dec7f1c로 액세스 제어 헤더를 설정합니다. 액세스 제어 헤더를 참조하십시오.

호스트 staging.example.com에서 트래픽을 수신하도록 환경을 구성합니다.

projects_target_partial_update API를 사용하여 환경의 ssr_external_domain 및 ssr_external_hostname 설정을 업데이트합니다.

이 단계가 완료된 후에는 해당 mobify-storefront.com 도메인에서 환경에 더 이상 액세스할 수 없습니다.

DNS 스푸핑을 통해 요청을 하는 cURL 명령을 사용하여 새 설정이 적용되는지 확인합니다.

컷오버 프로세스는 타사 CDN, eCDN 또는 Managed Runtime CDN 중 무엇을 사용하는지에 따라 다릅니다.

Managed Runtime 환경을 CDN의 오리진으로 구성합니다.

  • 환경에 맞게 Host 헤더 설정 {{project}}-{{environment}}.mobify-storefront.com
  • 요청 메서드 전달
  • 경로 전달(쿼리 문자열 포함)
  • 헤더 전달
  • 본문 전달
  • HTTPS를 통해 모든 트래픽 전달
  • HTTP 캐싱 헤더를 따름
  • 환경에 맞게 구성된 경우 x-sfdc-access-control 헤더 값 설정

자세한 지침은 CDN 제공자 설명서를 참조하십시오.

Managed Runtime은 HTTP Host 헤더를 사용하여 요청을 환경으로 라우팅합니다. 잘못된 호스트가 있는 요청은 HTTP 403 잘못된 요청 응답과 함께 거부됩니다.

HTTP 요청을 반영하고 CDN이 올바르게 구성되었는지 확인하는 처리기를 추가하는 것이 좋습니다.

또한 httpbin.org/anything을 사용하여 프록시를 추가함으로써 프록시로 전달되는 헤더가 올바르게 전송되었는지 확인할 수도 있습니다.

문제가 발생하면 PWA Kit 앱 디버깅에서 설명하는 기법을 사용합니다.

트래픽을 Managed Runtime 환경으로 라우팅하도록 eCDN 라우팅 규칙을 업데이트합니다. 자세한 내용은 eCDN MRT 규칙 가이드를 참조하십시오.

DNS 컷오버를 수행하여 도메인이 이전 오리진에서 Managed Runtime CDN을 가리키도록 합니다.

Managed Runtime CDN 도메인은 {{project}}-{{environment}}-cdn.mobify-storefront.com 규칙을 따릅니다. 여기서{{project}}는 프로젝트 ID이고 {{environment}}는 환경 ID입니다.

staging.example.com의 DNS CNAME 레코드를 example-staging-cdn.mobify-storefront.com으로 업데이트합니다.

웹 브라우저를 열고 staging.example.com으로 이동합니다.

축하합니다. 출시를 완료했습니다! 🥳

스테이징 사이트에 대한 이러한 지침을 완료한 후, 프로덕션 도메인 및 프로덕션 환경에 대해 동일한 프로세스를 반복할 수 있습니다.

여기서부터는 Customer Success 그룹이 사이트 트래픽을 모니터링하여 성공적으로 시작되었는지 확인합니다. 여기서 목표는 시작하는 동안 모든 것이 예상대로 작동되도록 하는 것입니다.

시작 후 Signature Success Plan을 보유한 고객은 사전 예방적인 사이트 모니터링을 받게 됩니다. 이렇게 개선된 모니터링 서비스를 이용하려면 환경을 production으로 표시해야 합니다. 자세한 내용은 Managed Runtime 개요에서 환경에 대한 섹션을 참조하십시오.

  • ssr_external_hostname 타겟 설정은 환경이 트래픽을 수신하는 호스트를 제어합니다. 요청의 HTTP Host 헤더가 이 값과 일치하지 않으면 403 오류가 발생하면서 요청이 실패합니다.
  • 현재 Salesforce는 example.com(www 하위 도메인이 없음)과 같이 베어 도메인을 사용하는 스토어프런트 URL을 지원하지 않습니다. 베어 도메인을 사용하려면 요청을 베어 도메인에서 CNAME로 리디렉션하도록 서버를 설정해야 합니다.