v2로 업그레이드

PWA Kit의 v2 이전에 생성된 프로젝트를 업그레이드하여, v2에서 향상된 프레임워크와 도구를 활용할 수 있습니다.

업그레이드해도 Retail React App 템플릿에서 새로운 스토어프런트 기능이 자동으로 추가되지는 않지만, 최신 Retail React App 코드를 참조로 사용하여 수동으로 추가할 수 있습니다.

PWA Kit v2에는 다음과 같은 새로운 기능이 많이 추가되었습니다.

🥳 TypeScript 지원. 이제 Babel 또는 Webpack의 구성 파일을 업데이트하지 않아도 빌드 도구가 TypeScript를 기본적으로 지원합니다.

🧰 ****서버 측에서 핫 리로딩을 지원하고, 향후 릴리스에서 클라이언트 측에서 핫 리로딩을 지원할 수 있도록 하는 **업데이트된 개발 서버**.

🤓 Webpack, Babel 및 Jest와 같은 권장 개발 도구를 번들로 구성하여 구성이 필요 없는 프로젝트 템플릿을 지원하는 pwa-kit-dev라는 새로운 명령줄 도구.

🖌️ Managed Runtime을 사용하여 다른 Express 기반 앱(Retail React App뿐 아니라)을 호스팅하려는 사용자를 위한 비React 앱 시험 지원.

아직 PWA Kit 프로젝트를 생성해본 적이 없으면, 빠른 시작 가이드에서 v2를 사용하여 새 프로젝트를 생성하는 방법을 참조하십시오.

v1.5에서 v2로의 업그레이드 프로세스를 최대한 쉽게 만들었습니다. 기존 프로젝트 파일 중 아주 일부만 변경됩니다.

v1.4(또는 이전 버전)에서 업그레이드하는 경우에도 프로세스는 v1.5에서 업그레이드하는 것과 동일한데, 한 단계만 더 진행하면 됩니다. 가져오기 경로에 더 이상 dist/가 포함되지 않도록 pwa-kit-react-sdk와 관련한 모든import 문을 업데이트합니다.

계속 읽으면서 나머지 업그레이드 작업을 완료하십시오(v1.5 및 v1.4 사용자의 경우).

업그레이드 프로세스를 시작하려면 프로젝트의 루트 디렉터리에서 package.json을 엽니다.

그리고 다음의 새 pwa-kit-* 패키지 세 가지를 추가하고 설치합니다.

다음 종속 구성 요소를 제거합니다. 이제 새 pwa-kit-dev 도구가 이 같은 종속성을 자동으로 처리합니다. (버전 번호가 프로젝트에 있는 버전 번호와 정확히 일치하지 않으면, 종속 구성 요소를 제거합니다.)

새 pwa-kit-dev를 사용하도록 다음 NPM 스크립트를 변환합니다.

프로젝트의 루트 디렉터리에서 babel.config.js를 열고 전체 파일을 온라인의 다음 파일로 교체합니다.

Babel 구성을 맞춤화한 경우 require() 함수에 대한 호출 아래에 추가합니다.

프로젝트의 루트 디렉터리에서 webpack.config.js 파일을 맞춤화하지 않은 경우 이 파일을 삭제합니다. 기본 구성 파일은 자동으로 로드됩니다.

맞춤화한 내용이 있는 경우 require() 함수를 먼저 호출하여 기본 구성을 가져온 후에 맞춤화 구성을 추가해야 합니다.

app 디렉터리의 ssr.js 파일을 맞춤화한 경우, 맞춤화한 내용이 유지되도록 파일 이름을 ssr.backup.js로 변경합니다.

GitHub에서 ssr.js의 새 버전을 다운로드하여 프로젝트의 app 디렉터리에 복사합니다. 맞춤화한 사항이 없는 경우 기존 파일을 덮어씁니다.

맞춤화한 내용이 있는 경우 ssr.js와 ssr.backup.js를 모두 열고 맞춤화한 내용 ssr.backup.js를 ssr.js에 반영합니다.

맞춤화한 내용을 반영하려면 다음 코드 블록을 가이드로 사용하십시오.

항상 ssr.js에 그리고 ssr.js가 가져온 파일에 있는 CommonJS 모듈 구문(require, module.exports)을 사용하십시오.

getConfig를 사용할 때마다 새 pwa-kit-runtime 패키지에서 이 파일을 가져옵니다.

worker/main.js를 열고 다음의 새 경로를 추가합니다.

v2에서는 각 Managed Runtime 환경의 프록시 설정을 명시적으로 정의해야 합니다. v1에는 로컬 개발 환경과 동일한 프록시 설정을 Managed Runtime 환경에 사용할 수 있도록 하는 폴백 메커니즘이 있었습니다. 성능 및 유지 보수 문제로 인해 v2 프로젝트에는 이 폴백 메커니즘이 지원되지 않습니다.

Runtime Admin 도구 또는 Managed Runtime API를 사용하여 Managed Runtime 환경의 프록시 설정을 구성하는 방법은 프록시 요청을 참조하십시오.

또한 v2의 새로운 환경별 구성 기능을 사용하여 Managed Runtime 환경의 프록시 설정을 구성할 수도 있습니다.

v2 이전에는 PWA Kit가 Node 12.x를 지원했습니다. v2에서는 코드가 Node 16+와 호환되는지 확인해야 합니다.

변경 사항이 성공적으로 적용되었는지 확인하려면 다음 명령을 실행합니다.

  1. npm start는 앱을 로컬로 실행할 수 있는지 확인합니다.
  2. npm run build는 빌드 프로세스가 성공적으로 실행되었는지 확인합니다.
  3. npm run push(및 Runtime Admin을 통해 배포)는 번들이 성공적으로 배포되었는지 확인합니다.