[NextJS/NPM] private npm registry 사용한 웹 배포기

Jiwoo JEONG·2023년 1월 29일

React elasticbeanstalk nextjs npm npmrc reactjs 배포 웹배포

상황

기존 NextJS 웹 배포 환경은 NextJS 환경으로 개발된 웹 어플리케이션 ➡️ NodeJS 환경의 ElasticBeanstalk(이하 eb) 배포이다
api, util, query 등 React, React-Native 의존성이 없는 구현부만 모아둔 Core 모듈을 기존 웹 어플리케이션에 추가하여 작업하였다.
이 Core 모듈은 NPM에 private registry로 등록 되어있다.

어려움

로컬에서는 npm login을 통해 npm config가 set 되어 있기 때문에 private registry를 사용하는 데 ERR 404를 만나지 않는다

이 글에서 ERR 404가 뜨는 상황은 사용하고자하는 Core 모듈이 private registry이기 때문에 npm config에 authToken 혹은 email, password를 통해 authenticated 되지 않아 registry를 찾을 수 없어 발생하는 것이다.
❗️eb 환경에서 private registry를 찾지 못해 npm install 시 Core 모듈 설치 과정에서 ERR 404를 마주하여 배포가 되지 않는 이슈가 있었다.

시도

1. eb ssh를 통해 직접 .npmrc 수정

가장 먼저 생각이 들었던 방법이다.
eb-cli를 설치하여 eb ssh로 eb 환경에 직접 접근하여 기존에 있던 .npmrc에 아래와 같이 추가하였다.

registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=[NPM_TOKEN값 직접 추가]

❌여기서 발견한 문제점❌
1. eb 배포, 업데이트가 롤링 배포, 업데이트여서 배포에 성공한 app은 /var/app/current(이하 current)에, 실패한 app은 /var/app/staging(이하 staging)에 추가되었다.
2. 배포 시도 시, staging 생성. -> 배포 성공 시, staging이 current를 대체 -> staging 삭제
3. 그래서 staging의 .npmrc를 직접 수정하여도 새로운 배포 시, 다시 로컬의 .npmrc로 변경됨

2. private registry에 등록된 계정의 NPM_TOKEN을 .npmrc에 추가

첫번째 시도에서 로컬의 .nprmc로 변경된다는 점에서 시도한 방법이다.
새로운 배포 시, 로컬의 소스코드로 변경된다면, 로컬의 .npmrc를 수정해보면 될 것이다.

registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=[NPM_TOKEN값 직접 추가]

위를 동일하게 로컬의 .npmrc에 추가하여 배포하였다. ✅성공✅했다.
하지만 ❌여기서 발견한 문제점❌

NPM_TOKEN이 git에 올라가면 보안 상 큰 문제가 될 것이다.
.gitignore에 .npmrc를 추가하여 .npmrc를 또 하나의 .env 파일처럼 사용할 수 있지만 더 좋은 방법이 있을 것 같았다.

➡️ 그래서 eb의 환경변수에 NPM_TOKEN을 추가하고 .npmrc를 다음과 같이 수정하였다.

registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=${NPM_TOKEN}

정상적으로 배포되었다. 하지만 로컬에서 npm(혹은 yarn) 명령어를 실행할 때 NPM_TOKEN을 환경변수로 찾을 수 없다는 문제가 발생했다.

3. .Ebextensions를 통해 .npmrc 수정 config 추가

두번째 시도에서 - NPM_TOKEN이 git에 올라가면 보안 상 큰 문제가 될 것이다. 과 로컬에서 npm(혹은 yarn) 명령어를 실행할 때 NPM_TOKEN을 환경변수로 찾을 수 없다는 문제가 발생했다. 두 문제를 해결하기 위해 로컬의 .npmrc에 추가했던 것을 지우고 .Ebextensions를 활용해 보기로 하였다.

.Ebextensions란 ?
- AWS 공식 문서

다음과 같이 ./.Ebextensions/npm.config 파일을 추가하였다.

files:
  "/var/app/current/.npmrc":
    content: |
      registry=https://registry.npmjs.org/
      //registry.npmjs.org/:_authToken=${NPM_TOKEN}
      
  "/var/app/staging/.npmrc":
    content: |
      registry=https://registry.npmjs.org/
      //registry.npmjs.org/:_authToken=${NPM_TOKEN}

정확한 원인은 파악하지 못했으나 staging의 .npmrc는 로컬과 같았다. 실패하였다.

다음과 같이 ./.Ebextensions/npm.config 파일을 수정하였다.

commands:
  echo_npmrc_staging:
    command: echo "registry=https://registry.npmjs.org/
      //registry.npmjs.org/:_authToken=${NPM_TOKEN}" > /var/app/staging/.npmrc
  echo_npmrc_current:
    command: echo "registry=https://registry.npmjs.org/
      //registry.npmjs.org/:_authToken=${NPM_TOKEN}" > /var/app/current/.npmrc

이것 또한 정확한 원인은 파악하지 못했으나 .Ebextensions의 config의 commands는 eb 서버가 설정되고 어플리케이션 버전이 추출되기 전에 실행되는데 이 때 staging directory가 생성이 안되어서 그런가 싶었다. 그래서 eb 서버가 설정되고 어플리케이션 버전 아카이브의 압축이 풀린 후에 실행되는 container_commands로 해도 동일했다.

결과(임시조치)

우선 두번째 시도로 임시조치하였다. 그리고 로컬 환경에서 환경변수를 찾을 수 없는 것은 ~/.zshrc와 ~/.bashrc에 NPM_TOKEN을 나의 npm token 값으로 환경변수화 해서 추가하여 로컬에서의 npm(혹은 yarn)이 가능토록하였다.

추가 시도 가능

시간이 나면 다음 것을 시도하고 포스트를 업데이트 하겠다.

.npmrc를 로컬과 eb환경에서 없애고 .Ebextensions의 command를 활용하여 어플리케이션 버전이 추출되기 이전에 글로벌하게 npm config set하기.
submodules를 써서 그냥 로컬 환경의 Core 모듈로 배포하기.

느낀 점

역시나 배포 환경 세팅은 어렵다. 기존에 사용하지 않았던 private registry를 적용하는데에 어려움을 겪고 있다. 그럼에도 .Ebextentions라는 것을 알게 되어 기쁘다 :) 지난 번 포스트의 NPM 패키지 배포 자동화 w/Github Action에 이어 npm package 관련 포스트를 작성하며 npm package를 조금 더 이해할 수 있었던 것 같다!

참고한 것들

npmrc 파일과 npm config 커맨드
https://stackoverflow.com/questions/53099434/using-auth-tokens-in-npmrc
[AWS] EB(Elastic Beanstalk) .ebextensions 사용하기
AWS 공식 문서