Nx + Pnpm + 네틀리파이

모노 저장소에서 애플리케이션을 배포하는 방법

문맥

앱이나 웹사이트를 개발하고 싶을 때 배포할 때가 있습니다.

몇 달 동안 저는 Nx 워크스페이스로만 작업합니다. 여기에서 Nx가 제공할 수 있는 모든 이점을 설명할 필요는 없지만 web site을(를) 방문하도록 초대합니다. 즉, 동일한 작업 공간 내에서 여러 앱과 라이브러리를 처리할 수 있습니다. 동일한 작업 공간에서 여전히 Angular, React 및 Node 프로젝트를 개발할 수 있습니다.

지난 주에 pnpm 대신 npm 을 사용하기로 결정했습니다. 나는 그것이 더 빠르다는 것을 알았다. 그것으로 설치하는 즐거움을 정의하는 단어는 없습니다.

오늘 Netlify 덕분에 내 애플리케이션 중 하나를 배포하고 싶습니다. 나는 그것에 대해 좋은 소식을 들었습니다.

그러나 netlify는 기본적으로 pnpm에서 작동하지 않으며 모노 저장소에 대해 알아야 할 몇 가지 트릭이 있습니다. 나는 당신이 이것을 할 수 있도록 노력할 것입니다. 이를 달성하기 위해 배포할 앱이 있는 모노 저장소가 이미 있고 netlify에 계정을 생성했다고 가정합니다.

단계들

다음과 같은 아키텍처가 있다고 생각합니다.

- apps
    - my-first-app
    - my-second-app
    - ...
- libs

이제 my-first-app을 배포하려고 합니다.

먼저 패키지에 스크립트를 추가해야 합니다.

// package.json
"scripts": {
    "build:my-first-app": "nx build my-first-app --outputPath=apps/my-first-app/dist",
}

이것은 netlify의 표준 dist 폴더에 해당합니다. 이는 메인 브랜치(또는 배포하기로 결정한 브랜치)에서 병합되어야 합니다.

따라서 netlifyweb site로 이동하여 배포 탭 링크로 이동합니다.



배포 설정으로 이동:



빌드 설정으로 이동하여 설정 편집을 클릭합니다.



아래와 같이 정보를 채웁니다.



빌드 명령 필드에 다음을 입력합니다.

pnpm run build:my-first-app || ( npm install pnpm && pnpm run build:my-first-app )

저장을 클릭하십시오. Et voilà (저는 프랑스인입니다. 저도 그렇게 말할 수 있습니다). 새 배포를 트리거하면 괜찮을 것입니다.

이것이 누군가를 도울 수 있기를 바랍니다.

읽어 주셔서 감사합니다.

더 알아보기

Angular for everyone: All about it