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() 함수를 먼저 호출하여 기본 구성을 가져온 후에 맞춤화 구성을 추가해야 합니다.

v2에서 Express 서버를 생성하는 데 사용되는 메서드가 변경되었습니다. createApp 메서드는 더 이상 사용하지 않으며 getRuntime 메서드로 대체되었습니다.

getRuntime 메서드는 런타임 오브젝트를 반환합니다. createHandler 메서드를 사용하여 Managed Runtime 호환 Lambda 핸들러를 생성할 수 있습니다. 두 번째 인수는 Express 앱에 대한 액세스를 제공하는 콜백 함수로, Express 앱을 맞춤화할 수 있게 해줍니다. 예를 들어 이 콜백 함수를 사용하여 맞춤형 엔드포인트를 구현할 수 있습니다.

v2에서는 body-parser 라이브러리가 Express 앱에서 제거되었습니다. req.body를 구문 분석하고 채워야 하는 맞춤형 엔드포인트가 있는 경우 npm install body-parser를 실행하여 body-parser 라이브러리를 설치하고 본문 구문 분석 라이브러리를 ssr.js에 포함합니다.

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을 통해 배포)는 번들이 성공적으로 배포되었는지 확인합니다.