사내 Nexus 저장소에 npm 저장소 구축하고 리액트 패키지 배포 및 설치하기

📒 Nexus npm repository 구축

---

사내에서 여러 프로젝트들을 진행하며 공통 컴포넌트들을 만들어두고 사용하고 있었습니다.

 

항상 사용해야 하는 공통 컴포넌트들을 만들어만 두고 그저 파일을 복사 붙여 넣기 하며 조금씩 수정하다 보니 프로젝트가 늘어날수록 감당이 안 됐습니다.

 

그래서 이 참에 백엔드 팀에서 사용하는 Nexus서버도 이미 있겠다, 여기에 private npm repository를 구축하고 유틸, 공통 컴포넌트, 디자인 시스템을 제대로 패키지화해서 관리해 보기로 다짐했습니다.

 

그럼 그 험난한 과정의 첫 번째 과정.

npm repository 구축과 패키지 빌드 그리고 publish와 install 하는 과정에 대해 설명하겠습니다.

Nexus Repository는 소프트웨어 개발에서 사용되는 아티팩트 관리 시스템으로, Maven, npm, NuGet 등과 같은 다양한 패키지 형식의 아티팩트를 저장하고 관리합니다. 이를 통해 개발자들은 필요한 종속성을 쉽게 찾고 사용할 수 있으며, 효율적인 협업 및 빌드 관리가 가능해집니다.

📌 Blob Stores 생성

Nexus에 Blob Stores와 Repositories의 개념은 다음과 같습니다.

• Blob Store: 물리적 저장소
• Repositories: 논리적 저장소

그렇기에 저장소 구축에 앞서 실질적으로 파일이 저장되는 물리적 공간을 만들어 줘야 합니다.

 

Settings → Blob Stores → Create blob stroe

---

📌 Repository 생성

우리가 실질적으로 사용하는 repository 주소는 이 Repository를 통해 만들어집니다.

 

repository는 다음과 같이 주로 3가지 타입을 가지고 있습니다.

1. hosted
   사내 라이브러리 및 패키지를 저장하고 제공합니다.
2. proxy
   maven이나 npm에서 제공하는 패키지를 캐시 하거나 proxy 해서 설치 속도에 이점을 가집니다.
3. group
   Group 저장소는 여러 개의 저장소(Hosted 및 Proxy 포함)를 하나의 URL로 그룹화합니다. 이를 통해 사용자는 여러 저장소에 걸쳐 있는 아티팩트를 단일 접점을 통해 검색하고 다운로드할 수 있습니다.

저희는 이 중 hosted로 repo를 생성합니다.

 

Setting → Create repository → npm (hosted) → Create repository

여기서 Name에 이름을 적어주고 아까 만들어두었던 Blob Storage을 등록해 준 후 Create repository를 눌러 생성해 줍니다.

---

📌 Role 생성

생성한 repo에 접근하기 위해서는 role을 생성하고 계정에 등록해주어야 합니다.

 

repo에 대한 권한은 2가지로 나뉩니다.

• nx-repository-admin-{저장소 종류}-{저장소 이름}-{작업}: 해당 저장소에 대한 설정
• nx-repository-view-{저장소 종류}-{저장소 이름}-{작업}: 해당 저장소에 대한 사용

admin 권한이 있으면 상단 톱니바퀴 버튼에서 설정을 관리할 수 있고, view 권한이 있으면 톱니바퀴 좌측 repo를 시각적으로 확인할 수 있습니다.

 

위에서 마지막에 해당되는 5가지 작업 내용은 다음과 같습니다.

1. add (추가)
   • 기능: 이 권한은 사용자가 새로운 아티팩트나 컨텐츠를 Nexus 저장소에 추가할 수 있게 합니다.
   • 적용: 개발자나 배포 팀이 새로운 빌드나 라이브러리를 저장소에 업로드할 때 필요합니다.
2. browse (탐색)
   • 기능: Browse 권한은 사용자가 저장소의 내용을 탐색하고, 아티팩트의 목록을 볼 수 있게 합니다. 하지만, 아티팩트의 실제 내용을 읽거나 다운로드할 수 있는 권한은 포함하지 않습니다.
   • 적용: 일반 사용자나 외부 이해관계자가 저장소의 내용을 확인할 필요가 있을 때 유용합니다.
3. delete (삭제)
   • 기능: 이 권한을 가진 사용자는 저장소에서 아티팩트나 컨텐츠를 삭제할 수 있습니다.
   • 적용: 관리자나 특정 권한을 가진 사용자가 오래된 또는 불필요한 아티팩트를 정리할 때 사용됩니다.
4. edit (편집)
   • 기능: Edit 권한은 사용자가 저장소의 메타데이터나 구성 설정을 변경할 수 있게 합니다. 이는 아티팩트 자체의 수정이 아니라 저장소 설정의 수정을 의미합니다.
   • 적용: 저장소 관리자나 DevOps 팀이 저장소 설정을 최적화하거나 변경해야 할 때 필요합니다.
5. read (읽기)
   • 기능: Read 권한은 아티팩트의 실제 내용을 읽고 다운로드할 수 있는 권한을 제공합니다.
   • 적용: 대부분의 개발자와 사용자에게 필요한 기본 권한으로, 아티팩트의 의존성 해결이나 빌드 프로세스에서 중요합니다.

규모가 클수록 권한을 세분화하는 것이 좋지만 저희는 소규모로 관리하기 때문에 한 계정으로 해당 repo에 대한 모든 권한을 부여해 관리하도록 하겠습니다.

 

그럼 Role을 생성해 주겠습니다.

 

view와 admin에 대한 5가지 작업 권한을 와일드카드로 모두 포함시킨 npm-admin이란 규칙을 설정하고 생성합니다.

---

📌 User 생성

Setting → Create local user

 

뭐 그냥 Id, Password, Email 적어주고 Status를 Active, 마지막으로 위에서 설정한 Roles를 등록하고 Create local user 버튼을 눌러 계정을 생성해 줍니다.

---

📌 Realms 설정

Realms에 npm Bearer Token Realm을 Active로 설정합니다.

 

이걸 설정하지 않으면 npm login 후 클라이언트 ↔ nexus 간 토큰 방식의 인증이 되지 않아 E401 에러가 발생하게 됩니다.

---

📌 패키지 배포

처음에 만들어둔 Repository 설정을 들어가 보면 해당 URL이 있습니다.

publish 하려는 패키지의 package.json에 다음과 같이 저장소 정보를 적어줍니다.

{
  ...
  "publishConfig": {
    "registry": "저장소_npm_repository_주소"
  },
  ...
}

---

🔎 npm login

설정을 완료한 패키지를 올릴 수 있게 위 URL로 로그인해 줍니다.

$ npm login --registry=위에_있는_저장소_URL
$ Username: 위에서_만든_계정_ID
$ Password: 위에서_만든_계정_PW
$ Email: 본인_이메일

---

🔎 배포

$ npm publish

위 명령어를 입력해 정상적으로 배포되면 다음과 같은 결과가 나옵니다.

nexus에서 확인해 봐도 잘 올라간 것을 볼 수 있습니다.

---

🔎 React+TS 컴포넌트 패키지 컴파일

React+TS 컴포넌트 패키지 컴파일하는 방법은 전에 올린 글을 참고해 주세요.

나만의 React + TypeScript 라이브러리를 NPM에 배포해보자

---

📌 설치

올렸으니 받을 수도 있어야겠죠.

 

그러나 아무 계획 없이 패키지 이름을 설정하면 나중에 골치 아파집니다.

 

왜냐하면 그냥 npm install xxx 했을 때는 우리가 올린 nexus가 아니라 npm 공식 저장소에서 패키지를 찾기 때문입니다.

 

패키지가 저장소를 잘 찾을 수 있게 .npmrc에 해당 패키지에 대한 저장소 주소를 다음과 같이 설정해두어야 합니다.

패키지_이름:registry=https://저장소_이름.com

그런데 이러한 방식으로 한다면 패키지가 많아질수록 라인 수가 늘어나 관리하기 힘들겠죠?

 

그래서 패키지에 @스코프 를 사용해서 관리해야 합니다.

 

예를 들어 여러 패키지 이름 앞에 @my-package 라고 설정했을 경우 저장소 주소를 다음과 같이 설정할 수 있습니다.

@my-package:registry=https://저장소_이름.com

그러면 @my-package/util, @my-package/component와 같은 패키지들은 스코프에 의해 해당 저장소에서 패키지를 찾아오게 됩니다.

---

📌 또 다른 login 방법

위에서는 .npmrc 파일에 저장소 위치를 설정했는데요.

 

사실은 여기에 계정정보를 넣어두어 해당 저장소에서 알아서 인증을 하도록 할 수 있습니다.

$ echo -n '계정_ID:계정_PW' | openssl base64

대충 터미널에서 이렇게 계정 정보를 base64로 인코딩 한 뒤 .npmrc에 다음과 같이 입력합니다.

//저장소주소:_auth=인코딩_결과

위 저장소 주소는 해당 전체 주소에서 https: 혹은 http: 를 제외한 문자열입니다.

 

이와 같이 인증을 한다면 추후 CI/CD 파이프라인에 패키지 배포 로직을 태울 수도 있겠다고 생각합니다.

---

다음은 큰 도움이 됐던 글입니다.

https://devblog.kakaostyle.com/ko/2022-03-07-1-npm-private-repository/