npm publish에서 E413로 인한 npm 업데이트 불가 문제 및 npm 패키지 용량 이슈

[orioncactus]

개요

E413 - 413 Payload Too Large 이슈로 현재 npm에 업로드가 불가능합니다. 따라서 npm으로부터 영향을 받는 cdnjs, unpkg가 1.3.0으로 업데이트되지 않습니다.

해결 방법

1. .npmignore를 추가해 src 및 examples 디렉터리 제외
   • 이 방법으로 unpacked 크기를 300mb 미만으로 줄여도 E413 에러 발생
2. npm에 publish할 때 --max_old_space_size=10336와 같은 명령어 추가
   • node.js에서 해당
3. Pretendard JP 및 Pretendard Std를 다른 package로 배포
   • cdnjs와 UNPKG에서 대응 고민 필요

한 패키지에 JP와 Std까지 에셋으로 두는 것이 맞을까?

• import 'pretendard'와 같이 npm으로 pretendard를 설치하더라도 특정 에셋만 빌드할 수 있게 관리 가능
• 그러나 현재 상황이라면, import로 에셋을 관리하더라도 pretendard 패키지를 설치할 때 JP와 Std를 포함한 모든 에셋을 추가하게 됨
• 따라서 모노레포 형태로 pretendard와 pretendard-jp, 그리고 pretendard-std와 같이 패키지를 나눠 쓸 수 있게 하면 어떨지?

[kms0219kms]

3번으로 진행 하는 수밖에는 없을 듯 합니다.
unpkg는 npm 퍼블리시 즉시 사용할 수 있습니다만 cdnjs의 경우 다시 이슈를 열고 모듈 추가를 요청해야 하는것이 흠이네요.
그렇지만 저희가 더 어떻게 할 수 있는 방법이 없습니다. npm 서버 관리자가 아니니까요..

[orioncactus]

@victorrica님께서 npm/cli에 413 Payload Too Large 오류와 관련해 npm/cli#4794 이슈를 등록해주셨습니다. npm에서 받은 답변이 어떤지 본 뒤에 진행해보겠습니다. 해당 이슈 질문을 올려주신 @victorrica님께 진심으로 감사드립니다!

[hiddenest]

저도 3번 방향이 좋을 것 같습니다.
만약 별도의 패키지로 배포하게 된다면 아래의 방향으로 패키지를 구분하면 좋을 것 같습니다.
(나중에 언어셋이 추가될 가능성 등을 고려하였을 때, JP와 Std를 나누는 것이 좋을 것 같다고 생각했습니다)

• pretendard (한글 + 영어)
• pretendard-jp (한글 + 영어 + 일본어)
• pretendard-std (영어)

구현 방향성

만약에 모노레포 형태로 구현을 하게 된다면, Yarn workspace, pnpm workspace, lerna 등을 사용해서 구축을 할 수 있을 것 같습니다.
구축 자체는 생각보다 간단하지 않을까 하는 생각도 듭니다.
+ 개인적으로는 pnpm workspace의 구축 경험이 가장 좋았습니다.

cdnjs와 UNPKG에서 대응 고민 필요

cdnjs 역시 unpkg와 마찬가지로 npm에 등록되면 사용이 가능하며, 그 이전에 cdnjs는 GitHub 자체로 제공중이라 큰 문제가 없습니다.

[kms0219kms]

cdnjs가 깃허브에서 가져와서 제공중이었나요? npm에서 제공되는것이 아니었나요?
혹시나 패키지가 나눠질경우, 아마 cdnjs에 다시 이슈를 올려야 하는거로 알고 있습니다.

[kms0219kms]

일단 패키지가 나눠질 경우 아래 플랫폼에서 아래의 절차에 따라 사용 가능합니다.

jsDelivr: GitHub Repository로 바로 사용 가능.
unpkg: npm publish 즉시 사용 가능. (초반 캐시되는 동안 로딩 속도는 저하될 수 있음)
cdnjs: GitHub Issue를 오픈하여 등록되면 사용 가능.

[hiddenest]

아, jsDelivr랑 순간 헷갈렸네요. cdnjs는 말씀주신대로 이슈 등록하여 추가할 수 있습니다.

[kms0219kms]

The cli itself does not limit payload sizes, it works with many different registries. Each one can set their own upload size limit and the 413 response is how they indicate that an upload is too large. This is not something the npm cli can do anything about.

You can contact the npm registry for support at https://www.npmjs.com/support

[kms0219kms]

자기도 어쩔 수 없는 문제니까 알아서 용량을 줄여서 올리라고 하네요..

[kms0219kms]

@orioncactus

[orioncactus]

hiddenest님께서 말씀해주신 것처럼 Yarn workspace, pnpm workspace, lerna 중 하나를 이용해 모노레포로 구현하려고 하는데요, 현재 제가 해야 하는 일들이 많아 선뜻 나서지 못하고 있는 상황입니다 🥲 시간이 되어 진행하면 이곳에서 알려드리겠습니다. 또는 기여를 해주셔도 환영입니다!

[issac4892]

it works with many different registries

이 문장은 나라마다 제공사가 다를수도 있다는 말인데, 만약 이 문제가 우리나라에서만 발생하는 문제라면 임시방편으로 VPN을 이용해 해외에서 publish를 시도해 보는것은 어떤가요?

[kms0219kms]

it works with many different registries

이 문장은 나라마다 제공사가 다를수도 있다는 말인데, 만약 이 문제가 우리나라에서만 발생하는 문제라면 임시방편으로 VPN을 이용해 해외에서 publish를 시도해 보는것은 어떤가요?

네, 아마 한국에 있는 미러나 그런걸 뜻하는것 같지만, 그렇게 우리나라 서버의 문제이면,
국내에서는 퍼블리쉬 되어도 사용할 수 없어질 수 있다는 말도 됩니다.

한번 시도는 해볼텐데, 안될 가능성이 높기는 합니다.

[kms0219kms]

@orioncactus

[issac4892]

it works with many different registries

이 문장은 나라마다 제공사가 다를수도 있다는 말인데, 만약 이 문제가 우리나라에서만 발생하는 문제라면 임시방편으로 VPN을 이용해 해외에서 publish를 시도해 보는것은 어떤가요?

네, 아마 한국에 있는 미러나 그런걸 뜻하는것 같지만, 그렇게 우리나라 서버의 문제이면, 국내에서는 퍼블리쉬 되어도 사용할 수 없어질 수 있다는 말도 됩니다.

한번 시도는 해볼텐데, 안될 가능성이 높기는 합니다.

413이 업로드할때만 나오는 문제이지 다운로드할때도 생기는 문제였나요?

[kms0219kms]

it works with many different registries

이 문장은 나라마다 제공사가 다를수도 있다는 말인데, 만약 이 문제가 우리나라에서만 발생하는 문제라면 임시방편으로 VPN을 이용해 해외에서 publish를 시도해 보는것은 어떤가요?

네, 아마 한국에 있는 미러나 그런걸 뜻하는것 같지만, 그렇게 우리나라 서버의 문제이면, 국내에서는 퍼블리쉬 되어도 사용할 수 없어질 수 있다는 말도 됩니다.
한번 시도는 해볼텐데, 안될 가능성이 높기는 합니다.

413이 업로드할때만 나오는 문제이지 다운로드할때도 생기는 문제였나요?

다운로드시에는 해당 오류가 나오지는 않지만, 다른 나라의 미러에만 저장되고 우리나라 미러에는 파일을 둘 수 없으니
한국에서는 다운로드시 404가 나온다는 얘기입니다.

다른 나라 서버에서 우리나라로 파일이 복사되어야 하는데, 용량이 커서 복사하는데도 413이 뜰수밖에 없으니까요.

[kms0219kms]

@hiddenest @black7375 도와주세요 ㅠㅠ

제가 한번 이 폰트들을 모노레포로 작업해 보았는데, 문제가 경로가 바뀌어 서브셋과 다이나믹 서브셋 자동화에 필요한 경로를 변경해야 합니다.

제가 아는 지식을 바탕으로 경로를 입력해 보았는데, No such file or directory가 뜨네요.. 도저히 이해가 되질 않아 도움 요청 드립니다.

[black7375]

앗.. 최근에 자유 시간이 약간 줄어들어서 오늘 당장은 안될것 같구..
주말 쯤에 한번 작업해보겠습니다.

[issac4892]

npm/npm#9439 (comment) 직접 레지스트리를 정하면 되는것 같기도 하네요..? Npm이 자동으로 미러에 푸쉬를 시도하려는걸까요

그리고 제 지식에 따르면 레지스트리끼리 sync할땐 http를 사용하지 않는것으로 압니다.

[kms0219kms]

npm/npm#9439 (comment) 직접 레지스트리를 정하면 되는것 같기도 하네요..? Npm이 자동으로 미러에 푸쉬를 시도하려는걸까요

그리고 제 지식에 따르면 레지스트리끼리 sync할땐 http를 사용하지 않는것으로 압니다.

ftp를 쓸수도 있고 하지만 같은 서버라면 안될 수도 있어서요..
사실 앞으로 방향을 보았을 때 모노레포 쓰는게 맞을거 같긴합니다.

[kms0219kms]

앗.. 최근에 자유 시간이 약간 줄어들어서 오늘 당장은 안될것 같구.. 주말 쯤에 한번 작업해보겠습니다.

알겠습니다 😄 collaborator 등록해 두겠습니다. 메일 확인하셔서 수락하시면 추후에 작업 하시기 편리하실거에요

[orioncactus]

E413 이슈는 모노레포로 구성하면 해결 가능할 것 같습니다. 이렇게 선뜻 챙겨주셔서 모두 감사드립니다! 저도 주말에 여유가 되면 Pretendard를 모노레포로 구성할 수 있도록 확인해보겠습니다.

[black7375]

모노레포 작업하려고 준비 중 입니다.
제가 생각하는 방식을 설명드리려합니다.

1. 일단 yarn으로 작업해보려고 합니다. (제가 구축해본 경험이 있어서)
2. 모노레포로 변경 시 프로젝트 구조가 변경됩니다.
   이때 구글 업스트림 저장소 요구사항도 함께 고려해볼 만합니다. Google Fonts에 업로드 #7 (comment)
   문제는 해당 이슈에 언급되었듯, 기존 CDN과의 호환성이겠죠.
   우선은 현재 사용하는 docs, dist/, src/를 그대로 유지하는 방식으로 가려고 합니다.
   심볼릭 링크를 걸거나 NPM에 업로드하는 워크플로우에서 이름을 바꾸는 식으로 해결이 가능할 것 같지만, 나중에 따로 처리하는게 좋을것 같아요.
3. 이건 질문인데, 혹시 각 패키지의 버전은 어떻게 처리하면 좋을까요?
   저 같은 경우 현재와 동일하게 버전업하는 방안이 관리/구현측면에서 간단해 기본동작으로 생각하고 있어요.
   • 지금처럼 pretendard, pretendard-jp, pretendard-std의 버전을 동일하게 올리기
   • 각각의 버전을 따로 관리

[orioncactus]

@black7375님! Pretendard 기여를 위해 소중한 시간을 내주셔서 진심으로 감사드립니다!

1. 모노레포 구축에 대해서는 제가 잘 알지 못해 편하신 방법대로 해주셔도 괜찮을 것 같습니다.
2. Google Fonts 가이드라인에 따르지 않는 몇 한글 글꼴도 보아서(나눔글꼴, Plex 등), 말씀하신 것처럼 우선은 기존 cdn 호환성에 문제가 없게 고려해도 괜찮아 보입니다.
3. 저도 마찬가지로 패키지 버전을 모두 동일하게 가져가는 것이 여러모로 관리하기 편하지 않을까 싶습니다!

저도 모노레포에 대해 확인해보겠습니다. 혹시 그 사이에 알아봐야 하는 부분이 있다면 언제든지 알려주시면 감사하겠습니다!

[black7375]

PR 열었습니다.
바뀐점이 많기 때문에 코드 리뷰나 테스트 가능하시면 확인 부탁드려요.

cc @hiddenest @issac4892 @kms0219kms @victorrica

[kms0219kms]

@orioncactus 이 이슈도 닫아주시면 될 거 같습니다.
npm 배포 확인되었습니다.

[kms0219kms]

cdnjs/packages#1227
cdnjs/packages#1228

[orioncactus]

@kms0219kms님! 소중한 시간을 내어 cdnjs에 pretendard-jp와 pretendard-std를 이슈로 남겨주셔서 진심으로 감사드립니다! 말씀하신대로 이 이슈는 해결되어 닫아두겠습니다 :D cdnjs에 pretendard-jp와 pretendard-std가 적용되면 문서도 이어 업데이트하겠습니다!