sourcemap과next-pwa

소스맵을 만드는 경우next-pwa에 직접 사용하면 오류가 발생할 수 있으므로 원인과 대처 방법을 글에 써야 한다.

까닭

보통 실무 환경에서 잘못된 보고를 위해 Sentry 등 서비스를 가져오고, Sentry 보고서에서 자바스크립트의 어느 부분이 잘못되었는지 쉽게 알 수 있도록 소스맵을 만든다.이 두 가지 의견은 두 가지가 있지만 제품 환경에서 함께 디자인을 하는지 여부는 조직에 따라 다르다고 생각합니다.
저는 소스맵을 넣지 않는 사람이기 때문에 소스맵을 만들어서 구축합니다. Sentry라면 cli를 통해 업로드하고 CI에서 삭제합니다.이 상태에서next-pwa를 사용하면 다음과 같은 오류가 발생합니다.

Uncaught (in promise) bad-precaching-response: bad-precaching-response::[{"url": "http://example.com/_next/static/chunks/hash.js.map ", "status":404}]
이것은 구축할 때 _next/static/chunks/hash.js에 대한sourcemap_next/static/chunks/hash.js.map이 존재하기 때문에precache의 대상에 속한다.
그럼 public/ 부하가 뱉은 sw.js 내용을 확인해 보세요.뱉은 거sw.js는 압축되었으니 프리티어 등으로 성형하세요.확인 후 아래와 같이 url: '_next/static/chunks/hash.js.map'precacheAndRoute로 설정합니다.

이른바 precacheAndRoute

precacheAnd Route는 어떤 행동을 취할까요?
Calling precacheAndRoute() or addRoute() will create a route that matches requests for precached URLs.
The response strategy used in this route is cache-first: the precached response will be used, unless that cached response is not present (due to some unexpected error), in which case a network response will be used instead.
The order in which you call precacheAndRoute() or addRoute() is important. You would normally want to call it early on in your service worker file, before registering any additional routes with registerRoute(). If you did call registerRoute() first, and that route matched an incoming request, whatever strategy you defined in that additional route will be used to respond, instead of the cache-first strategy used by workbox-precaching.
ref: https://developers.google.com/web/tools/workbox/modules/workbox-precaching
개괄적으로 말하면precacheAnd Route에 설정된 것은 고속 캐시 응답이 될 것이다.캐시 내용이 존재하지 않으면 네트워크를 방문하여 자원을 얻으십시오.
지정한 물건은 특정한 열쇠와 함께 캐시 메모리에 저장됩니다.

여기에 저장할 파일을 확인할 수 없어서 상술한 오류가 발생했습니다.

해결책

오류가 발생하면 ServiceWorker를 시작할 수 없습니다.이렇게 되면 현금을 쓸 수 없어 넥스트-pwa를 어렵게 도입했는데 사용할 수 없는 상태가 된다.
해결 방법은 간단하다. 넥스트-pwa의 README에도 적혀 있다.
buildExcludes - an array of extra pattern or function to exclude files from being precached in .next/static (or your custom build) folder
default: []
example: [/chunks/images/.*$/] - Don't precache files under .next/static/chunks/images (Highly recommend this to work with next-optimized-images plugin)
doc: Array of (string, RegExp, or function()). One or more specifiers used to exclude assets from the precache manifest. This is interpreted following the same rules as Webpack's standard exclude option.
shadowwalker/next-pwa#buildExcludes
설정buildExcludes하면 되니까 이번에.js.mapexclude하면 돼요.아래와 같이 고쳐 쓴다next.config.js.

const withPWA = require('next-pwa')

module.exports = withPWA({
  buildExcludes: [/.*\.js\.map/],
});

설치된 상태에서 다시 구축하고 확인public/sw.js.

소스맵 exclude를 잘 완성했습니다.이 상태에서는 ServiceWorker의 Activate도 정상적으로 사용할 수 있습니다.

네트워크 레이블을 확인하면 ServiceWorker에서 반환된 내용도 확인할 수 있습니다.