PWA Kit 버전 3.8.0용 하이브리드 안정성 업그레이드

이 가이드에서는다음을 위해 하이브리드 스토어프런트에서 코드 변경을 수행하고 확인하는 방법을 설명합니다.

PWA(Progressive Web App) Kit 프로젝트를 버전 3.5.0 이상에서 버전 3.8.0으로 업데이트합니다.
플러그인 Shopper Login and API Access Service(플러그인 SLAS) 버전 7.3.0 이상에서 버전 7.4.0으로 업그레이드합니다.

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

이 페이지의 일부 링크에는 기존 고객만 액세스할 수 있습니다. Commerce Cloud 리포지토리에 액세스하는 방법에 대한 자세한 내용은 Salesforce Commerce Cloud GitHub 리포지토리 및 액세스를 참조하십시오.

Tip

이 가이드의 단계는플러그인 SLAS를 사용하는 하이브리드 스토어프런트에 적용됩니다. B2C Commerce 버전 25.3에서는 하이브리드 인증(auth)이 플러그인 SLAS를 대체합니다. 자세한 내용은하이브리드 인증을 사용하여 하이브리드 스토어프런트 구성을참조하십시오.
이 가이드는 PWA Kit 버전 3.5.0 이상을 사용하여 부분적으로 구축된 하이브리드 스토어프런트에 적용됩니다. PWA Kit 버전 2.x에 적용되는 단계는PWA Kit 버전 2.x에 대한 하이브리드 안정성 업그레이드를 참조하세요.

Note

새로운 기능

하이브리드 스토어프런트의 안정성과 성능을 개선하기 위해 다음을 수행합니다.

세션 변동을 제거하기 위해 PWA Kit에서 에 대한OCAPI /sessions호출을 제거했습니다(로 자주 변경됨dwsid ). 에 대한dwsid자세한 내용은SFRA와 PWA Kit 간의 세션 관리 이해를참조하십시오.
지정된 구매자 세션의 요청이 동일한 앱 서버로 라우팅되도록 하기 위해dwsid SCAPI(Salesforce Commerce API) 호출에 SCAPI(Salesforce Commerce API) 호출에 헤더를 추가했습니다.
PWA Kit 구성에서 OCAPI(Open Commerce API) 프록시를 제거하여 PWA Kit를 완전히 SCAPI 기반으로 만듭니다.

아직 완료하지 않았다면 다음 단계를 완료합니다.

Salesforce 고객 지원에 dwsid에 대한 세션 재정의를 활성화하도록 요청하는 지원 사례를 엽니다. 지원 사례:

부모 및 자식 토글을 모두 사용하도록 요청합니다.
올바른 영역 ID 및 테넌트 ID를 언급합니다. realm ID를 모를 경우 계정 담당자 또는 Customer Success Manager에게 문의하십시오.

PWA Kit 버전 3.5.0 이상을 사용하는 경우:

최신 버전의 Commerce SDK React로 업그레이드하려면 다음을 실행합니다.

npm install @salesforce/commerce-sdk-react@latest
최신 버전의 Retail React App으로 업그레이드하려면 다음 명령을 실행합니다.

npm install @salesforce/retail-react-app@latest

플러그인 SLAS 버전 7.3.0 이상을 사용하는 경우 다음 단계를 완료하세요.

위치 cartridges/plugin_slas/cartridge/controllers/Login.js
- access_token컨트롤러에서/Login-Logout로그아웃 후 쿠키 제거
- 컨트롤러의 배열/Login-Logout에cookiesToRemove추가합니다config.ACCESS_TOKEN_COOKIE_NAME .
에서cartridges/plugin_slas/cartridge/scripts/helpers/slasAuthHelper.js기존 쿠키 청크를 제거하도록 함수를 업데이트removeCookie합니다.
- 조건을 완전 일치( == ) .startsWith에서 로 변경합니다.
에서cartridges/plugin_slas/cartridge/scripts/hooks/request/onSession.js새 게스트 구매자 흐름에 대한 후크 구현을 업데이트onSession합니다.
- from x-is-session_id header을dwsid변수로 추출합니다.
- 호출getSLASAccessTokenForGuestSessionBridge에 변수를 사용합니다.
- dwsid신규 비회원 구매자에 대한 응답으로 쿠키를 설정합니다.

이끌어오기 요청에서 변경된 파일을 참조하세요.

PWA Kit가 를 호출OCAPI /sessions하지 않는지 확인합니다.
- 스토어프런트로 이동하여 모든 사이트 데이터를 지웁니다.
  
  Chrome DevTools를 사용하는 경우모든 캐시 데이터 삭제하기를 참고하세요.
- 스토어프런트를 새로고침하거나 PWA Kit 기반 페이지로 이동하여 Chrome DevTools의 네트워크 탭을 검사합니다. ‘dw/shop/ /sessions’에 대한 요청이 표시되지 않는지 확인합니다. Chrome DevTools에서 이 예를 참조하세요.

세션 없음

모든 SCAPI 요청과 함께 전송되는지dwsid확인합니다.
- 스토어프런트로 이동합니다. SFRA/SG 기반 페이지를 방문한 다음 PWA Kit 기반 페이지로 이동합니다.
- Chrome DevTools를 사용하는 경우:
  - 쿠키 저장소를 열고 쿠키에서 값을 찾습니다dwsid . 쿠키 창 열기를참조하십시오.
  - 네트워크 탭을 열고 SCAPI 요청(예: /baskets )을 검사합니다. Request Headers(요청 헤더)에 이전 단계에서 찾은 것과 동일한dwsid값을 가진 헤더가 표시sfdc_dwsid되는지 확인합니다. Chrome DevTools에서 이 예를 참조하세요.

세션 없음