구성 파일

구성 파일을 사용하면 API 액세스, URL 형식, 다중 사이트 처리, 요청 프록싱, 서버 측 렌더링 등 PWA Kit 애플리케이션 작동 방식의 여러 측면을 맞춤화할 수 있습니다.

구성 파일은 사용자의 선택에 따라 JavaScript, YAML 또는 JSON으로 작성할 수 있습니다. .js, .yml, .yaml, .json 등의 파일 확장명이 지원됩니다.

Retail React App 템플릿을 사용하여 PWA Kit 프로젝트를 생성하는 경우 /config/default.js라는 단일 구성 파일이 제공됩니다. 이 파일에서 내보내는 구성 오브젝트는 pwa-kit-create-app에 제공된 옵션을 기반으로 설정되지만 언제든지 구성을 업데이트할 수 있습니다. B2C Commerce 인스턴스의 변경 사항과 동기화하기 위해 초기 프로젝트 생성 후 업데이트해야 하는 경우가 많습니다.

동형 렌더링을 지원하기 위해 구성 값이 페이지에 직렬화됩니다. 구성에 비밀 정보를 포함하지 마십시오.

PWA Kit는 이 가이드의 뒷부분에서 다룰 환경별 구성을 지원하므로 추가 구성 파일로 default.js를 대체하거나 보완할 수 있습니다.

먼저 default.js 또는 다른 구성 파일에서 사용할 수 있는 특정 구성 오브젝트와 속성을 살펴보겠습니다.

애플리케이션을 Managed Runtime과 연결하는 프로젝트 문자열은 구성 파일의 일부가 아니지만 프로젝트 디렉터리의 루트에 있는 package.json 파일 맨 위의 name 속성에서 확인할 수 있습니다. 초기 프로젝트 생성 후, Runtime Admin에 표시되는 프로젝트 ID와 일치하도록 name의 값을 변경할 수 있습니다.

PWA Kit 버전 1.5.0 이전 버전에서는 이러한 설정이 api.config.js에 있었습니다.

B2C Commerce API 및 Open Commerce API(OCAPI)에 대한 액세스를 구성하기 위해 구성 파일에서 내보낸 app.commerceAPI 오브젝트를 편집할 수 있습니다.

다음은 예시 값을 사용하고 주석을 단 코드 조각입니다.

Einstein API에 대한 액세스를 구성하기 위해 app.einsteinAPI 오브젝트를 편집할 수 있습니다.

다음은 다른 예시 값을 사용하고 주석을 단 코드 조각입니다.

이전 코드 조각의 구성 오브젝트를 사용하는 CommerceAPI 클래스에 대한 자세한 내용은 Retail React App에 대한 아키텍처 가이드를 참조하십시오.

B2C Commerce 인스턴스의 API 액세스를 활성화하기 위한 Account Manager 및 Business Manager 설정 작업에 대한 자세한 내용은 API 액세스 설정 가이드를 참조하십시오.

app.url 오브젝트에서 스토어프런트 URL이 형식화되는 방식을 맞춤화할 수 있습니다.

app.url 오브젝트는 기본적으로 다음 값으로 구성됩니다.

이러한 기본 설정을 사용하면 현재 사이트와 로캘이 모두 URL 경로에 표시됩니다.

url.locale을 다음 값 중 하나로 설정하여 현재 로캘을 URL에 표시하는 방식(또는 표시하지 않는 방식)을 선택할 수 있습니다.

path: 로캘이 URL 경로에 포함됩니다. 예: /en-US/women/dress
query_param: 로캘이 쿼리 매개변수에 포함됩니다. 예: /women/dress?locale=en-US
none: 로캘이 URL 경로에 포함되지 않습니다. 예: /women/dress

url.showDefaults: 이 부울 값은 기본 사이트 또는 로캘 값을 URL에 표시할지 여부를 나타냅니다. 기본값: false.

애플리케이션에 대해 구성된 사이트를 config/sites.js라는 자체 파일로 추출합니다. 이 파일을 각 구성 파일로 가져오고 app 오브젝트 내에서 내보냅니다. 이러한 방식으로 파일을 분리하면 애플리케이션이 지원하는 사이트와 Business Manager 백엔드에 정의된 사이트를 더 쉽게 동기화할 수 있습니다. (원하는 경우 구성 파일에 직접 사이트를 정의할 수 있습니다.)

app 오브젝트에는 다중 사이트와 해당 별칭을 관리하기 위한 다른 설정도 포함되어 있습니다. 이러한 설정은 다중 사이트 가이드에서 자세히 다룹니다.

프록싱 요청은 프록싱 요청 가이드에서 자세히 다루는 ssrParameters.proxyConfigs 배열에 구성됩니다.

PWA Kit 버전 1.5.0 이전 버전에서는 이러한 설정이 package.json에 있었습니다.

다음 표에는 서버 측 렌더링과 관련한 구성 옵션이 나와 있습니다. 이러한 옵션은 app 오브젝트의 일부가 아니며 기본 exports 오브젝트의 개별 속성으로 표현됩니다.

속성	설명
`ssrParameters.ssrFunctionNodeVersion`	앱 서버를 실행하는 데 사용할 노드 버전을 결정하는 문자열입니다. 허용되는 값: 지원되는 노드 버전
`ssrEnabled`	서버 측 렌더링에 필요한 파일의 생성을 활성화하거나 비활성화하는 부울 값입니다. 이 값을 `false`로 설정하는 기능은 2021년 8월 현재 사용 중지되었습니다.
`ssrOnly`	glob 표현식의 배열입니다. 여기서 ``는 특정 문자의 0번 이상의 출현 횟수를 나타내는 와일드카드입니다. 서버측 렌더링 시스템에서만 사용할 수 있고 `/mobify/bundle/` 경로를 통해 사용할 수 없는 파일을 결정합니다. 새로 생성되는 프로젝트의 기본값: `['ssr.js', 'ssr.js.map', 'node_modules//.*']`
`ssrShared`	glob 표현식의 배열입니다. 여기서 `*`는 특정 문자의 0번 이상의 출현 횟수를 나타내는 와일드카드입니다. 서버 측 렌더링 시스템에서 사용할 수 있으며 또한 `/mobify/bundle/` 경로를 통해서도 사용할 수 있는 파일을 결정합니다. 새로 생성되는 프로젝트의 기본값:

특정 환경의 구성 파일을 비롯하여 여러 구성 파일을 config 디렉터리에 포함할 수 있습니다.

환경별 구성을 통해 배포의 효율성과 유연성을 높일 수 있습니다. 예를 들어, 다음을 수행할 수 있습니다.

단일 번들을 여러 Managed Runtime 환경에 배포하고 각 환경을 서로 다른 B2C Commerce 인스턴스에 연결합니다.
로컬 개발 중에는 자체 On-Demand Sandbox에 연결하지만 Managed Runtime에 배포할 때는 다른 인스턴스에 연결합니다.

환경별 구성 파일을 생성하려면 default.js에 사용되는 것과 동일한 규칙을 따르되 대상 환경의 이름을 파일의 기본 이름으로 사용합니다. 지원되는 파일 형식과 해당 파일 확장명을 사용합니다. 예: production.js, staging.json.

PWA Kit 애플리케이션은 config 디렉터리를 검색하고 다음 질문을 다음 순서로 확인하여 로드할 올바른 구성 파일을 선택합니다.

Managed Runtime에서 현재 실행 중인 환경의 이름과 일치하는 파일이 있습니까?
로컬에서 실행 중인 경우 지원되는 파일 확장명을 가진 local이라는 파일이 있습니까?
아직 구성 파일을 찾지 못한 경우 지원되는 파일 확장명을 가진 default라는 파일이 있습니까?

이러한 질문에 대한 대답이 "예"인 경우 PWA Kit은 검색을 중단하고 해당 파일을 로드합니다.

두 파일의 기본 이름이 같지만 파일 확장명이 다른 경우, 할당된 우선 순위가 가장 높은 파일 확장명이 선택됩니다. 지원되는 파일 확장명으로는 .js, .yml, .yaml, .json 순으로 가장 높은 우선 순위부터 가장 낮은 우선 순위까지 할당됩니다. 즉, default.js와 default.json 사이에서 PWA Kit는 우선 순위가 더 높은 default.js를 로드합니다.