사내 github에 내 package를 게시해보자 (github packages)

사내에 내 패키지를 게시해보자!

배경

우리 회사는 차트IQ라는 라이브러리를 사용하고 있었고, 최근에 내가 맡은 프로젝트에서 트레이딩뷰 라는 새로운 차트를 도입했다.

거래소 페이지가 Angular로 되어있는데 일정에 맞춰 빠르게 개발하다보니.. Angular와 강결합 된 상태의 결과물이 나왔다.

 

이는 두 가지 포인트에서 문제가 있었는데

1. Angular -> Next로 프레임워크를 전환하고 있다.

2. 이 차트가 현재 웹에만 도입됐는데, 언제 앱에 도입될지 모른다.

이러한 포인트 때문에, 프레임워크와 결합되지 않은 상태로 모듈화(패키지화) 시켜야 한다는 결론에 다다랐다.

 

패키지화 순서

사내 private package로 만들어서, npm install로 사용하는 것이 가장 이상적이라고 생각했다.

우리 회사는 github enterprise를 사용하고 있어서, github packages라는 기술을 사용하기로 했다. (공식문서)

아래 순서로 진행했다.

 

1. Angular와 트레이딩뷰의 결합을 분리한다.

패키지화 할 수 있는 로직은 순수 javascript로 작성하고

Angular 로직을 사용해야 하는 부분은 Angular가 주입하는 방식으로 만든다.

 

2. 새로 repo를 파서, 분리한 로직을 옮긴다.

 

3. 이 모듈에 github packages를 위한 작업을 추가한다.

 

github packages를 위한 작업

1. github 토큰 생성

Settings -> Developer Settings -> Personal Access Token -> Tokens (classic)

아래 권한을 가진 토큰을 생성한다.

• read:packages
• write:packages
• delete:packages
• repo:*

 

2. .npmrc 작성

여기서 삽질을 좀 했는데, 많은 블로그에서 아래와 같이 알려준다.

(사내 private registry가 있다면 이렇게 하면 안된다)

@회사명:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken={위에서 생성한 토큰}

 

이렇게 하면 토큰 인증 에러가 난다.

사내 private registry 가 있으면 그 주소를 써야한다.

@회사명:registry=https://{사내 private registry 주소}
//{사내 private registry 주소}:_authToken={위에서 생성한 토큰}

 

3. package.json 수정

"publishConfig": {
  "registry": 사내 private registry 주소
},
"repository": {
  "type": "git",
  "url": 내 repo의 url (.git으로 끝나는 url)
},

 

결과

이렇게 하고 npm publish를 하면 사내 github에 배포가 된다.

현재는 로컬에서 npm publish하는 형태인데, 추후에는 github actions로 publish하는 방향으로 변경할 예정이다.

 

추가

패키지를 받는 쪽도 동일한 .npmrc 설정이 필요하다.

사내 private registry에 대한 권한이 필요하기 때문.