스토어프런트 시작

이 가이드에서는 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 공급업체와의 기존 관계
• 맞춤형 WAF 규칙, 추가 성능 헤더, 추가 타사 통합 등, 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 환경만 다를 뿐입니다.

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

언제든지 이러한 단계를 완료할 수 있지만 PWA Kit를 사용하기 시작할 때 이 단계를 시작하는 것이 좋습니다.

Runtime Admin 웹 애플리케이션 또는 Managed Runtime API를 사용하여 staging이라는 환경(타겟이라고도 함)을 만들어 스토어프런트 시작 방법을 연습합니다.

다음은 Managed Runtime API의 projects_target_create 엔드포인트를 사용하여 환경을 만드는 샘플 요청입니다. 요청의 example을 실제 프로젝트 ID 문자열로 바꾸고 $API_KEY를 실제 API 키로 바꿉니다.

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

대부분의 PWA Kit 구현에서는 B2C Commerce가 제공하는 OCAPI 및 컨트롤러에 요청을 보냅니다.

이러한 요청을 보내려면 Managed Runtime이 B2C Commerce 인스턴스와 연결된 도메인에 도달할 수 있는지 확인해야 합니다.

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

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

트래픽을 Managed Runtime CDN으로 직접 라우팅하는 경우, Managed Runtime에서 TLS 인증서를 발급하고 관리합니다.

Managed Runtime에서 TLS 인증서를 발급하도록 허용하려면 CNAME 레코드를 생성해야 합니다. Salesforce 고객 지원 팀에 문의하여 필요한 인증서 도메인을 제공해줄 것을 요청하십시오. 그러면 Salesforce에서 인증서에 대한 세부 정보 검증 CNAME 레코드를 제공합니다. *.example.com과 같은 와일드카드 인증서가 지원됩니다.

세부 정보를 수신한 후 24시간 이내에 제공된 검증 DNS CNAME 레코드를 생성해야 합니다. 해당 레코드는 다음과 같습니다.

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

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

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

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

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

컷오버 프로세스는 타사 CDN을 사용하는 경우와 Managed Runtime CDN을 사용하는 경우에 서로 다릅니다.

이 옵션의 경우 기존 CDN 오리진이 아니라 Managed Runtime 오리진을 가리키도록 CDN을 구성해야 합니다. 자세한 지침은 CDN 제공자 설명서를 참조하십시오.

외부 호스트 이름({{project}}-{{environment}}.mobify-storefront.com)을 타사 CDN의 오리진으로 추가합니다. CDN이 다음을 수행하도록 구성되어 있는지 확인합니다.

• Host 헤더를 오리진 {{project}}-{{environment}}.mobify-storefront.com과 일치하도록 설정
• 요청 메서드 전달
• 경로 전달(쿼리 문자열 포함)
• 헤더 전달
• 본문 전달
• HTTP 캐싱 헤더를 따름

HTTP 요청을 반영하는 핸들러를 추가하여 CDN이 올바르게 구성되었는지 확인할 수 있습니다.

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

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

Salesforce 지원 부서에서는 명명 규칙 {{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로 리디렉션하도록 서버를 설정해야 합니다.