[Private UPM 개발(4/4)] UPM 빌드 파이프라인 자동화 (CI/CD)

📌 개요

 

 

이전 포스터에서 Verdaccio 레지스트리 서버에 패키지를 등록하고 배포하는 방법에 대해 알아보았습니다.

 

또한 패키지 버전을 관리하고 업데이트하는 법까지 살펴봤는데요,

 

이전 포스터에서 보셨듯이 이 과정이 다소 귀찮고 휴먼 에러가 발생할 수 있답니다.

 

 

 

여러분이 제작한 최초의 패키지(v1.0.0)이 완벽하지 않을 것입니다.

 

프로젝트를 할 때마다 새로운 기능을 추가하거나, 버그를 수정하는 작업이 필요하죠.

 

그때마다 package.json 파일을 수정하고, Verdaccio 서버에 명령어로 배포한다고 상상해봅시다.

 

음, 아무래도 상당히 귀찮은 작업이 되지 않을까요?

 

 

 

 

그래서 저는 Github Actions을 활용해서 빌드 자동화 파이프라인을 구축했습니다.

 

패키지 변경사항(커밋)을 분석하여 새로운 버전을 계산하고, package.json을 직접 수정하지 않고도

 

자동으로 패키지를 등록하는 과정에서 새로운 버전을 적용합니다. (semantic-release)

 

그 후 가상머신(VM) 인스턴스에 접속하여 Verdaccio 서버에 패키지를 업데이트합니다.

 

이 과정을 개발자가 아닌, Github Actions가 실행하도록 해줄겁니다.

 

 

[ 이 포스터에서 구현할 내용 ]

[커밋] → [GitHub Push] → [GitHub Actions] → [semantic-release 실행]
→ [버전 계산 및 배포 로그 생성] → [Verdaccio에 publish] → [CHANGELOG 자동 생성]

 

 

 

 

 

---

📌 semantic-release을 활용한 버전 관리 자동화

 

https://gus6615.tistory.com/155

[Public UPM 개발(2/3)] Semantic-Release 자동화

 

이전 포스터에서 버전 관리 자동화를 위해 semantic-release 사용법에 대해 알아본 적이 있습니다.

 

따라서 자세한 설명은 넘어가고, 바로 실습으로 들어가도록 하겠습니다.

 

※ 만약 Github Actions을 활용한 버전 관리에 대해 자세히 공부하고 싶은 분은 위 포스터를 참고해주세요.

 

 

 

 

먼저, 여러분이 제작한 패키지는 위 사진처럼 Github 레포지토리에 업로드되어 있어야 합니다.

 

지금부터 Github Actions을 사용하기 위해 워크플로우를 제작해보도록 하겠습니다.

 

 

 

.git 폴더가 위치한 경로(패키지 루트 폴더)로 이동합니다.

 

그리고 위 사진처럼 .github 폴더를 생성합니다.

 

 

 

그리고 .github 폴더로 들어가 workflows 폴더를 생성합니다.

 

 

 

그리고 워크플로우를 정의하는 .yml 파일을 추가합니다.

 

이 파일은 아래에서 다운받아 넣어주시면 됩니다.

Semantic-Release.yml

0.00MB

 

※ 파일의 해석은 넘어가도록 하겠습니다. (해석에 대해 궁금하다면 https://gus6615.tistory.com/155 참고)

 

 

 

여기서 중요한 부분은 다음과 같습니다.

 

중괄호{} 로 묶여 있는 부분은 여러분이 직접 수정해줘야 합니다.

• public-ip: 오라클 클라우드 인스턴스 고정 IP
• authToken: Verdaccio 서버 사용자 인증 정보

 

 

authToken 알아내는 방법

 

 

MobaXterm 툴을 사용해 가상머신에 접속합니다.

 

그 다음 Verdaccio 서버에 로그인합니다.

npm login --registry http://{public-ip}:4873

 

 

그 후 .npmrc 파일을 확인합니다.

cat ~/.npmrc

 

 

그러면 위 사진처럼 출력이 될겁니다.

 

여기서 localhost가 아닌, 아래에 public-ip에 대한 authToken 값을 사용합니다.

 

 

 

 

다시 루트 폴더로 돌아와 다음 작업을 수행해주세요.

1. CHANGELOG.md 파일 생성 (내용은 semantic-release 플러그인이 채워줌)
2. 아래 파일(.releaserc.json) 넣기

.releaserc.json

0.00MB

 

※ 파일의 해석은 넘어가도록 하겠습니다. (해석에 대해 궁금하다면 https://gus6615.tistory.com/155 참고)

 

 

이제 준비는 끝입니다!

 

커밋 메세지 규칙에 맞춰 커밋을 해보세요.

 

 

예를 들어, 위 사진처럼 "fix: ~~~" 형태로 커밋 메시지를 구성하여 커밋한다면?

 

 

 

위 사진들처럼 Github Actions가 자동으로 버전을 관리하고,

 

Verdaccio 서버에 패키지를 등록하는 것을 확인할 수 있습니다.

 

이제 앞으로 패키지를 개발할 때 편하게 관리할 수 있겠네요!

 

 

 

⚠️ Verdaccio 서버에 패키지를 등록할 때 요청을 거부하는 문제 해결

 

 

만약 여러분의 패키지의 용량이 한계점을 넘어가면 위 사진처럼 응답이 취소됩니다.

 

※ 제 경우에는 패키지 사용법을 위한 Samples 폴더가 있었는데, 그게 용량이 컸습니다.

 

해결책: config.yaml 파일을 열어 아래 문구를 추가하여 패키지 최대 크기를 명시합니다.

max_body_size: 200mb

 

 

 

 

 

---

📌 UPM 개발 완료 소감

 

 

...! 드디어 UPM 개발을 모두 끝마쳤군요!

 

오라클 클라우드 가상머신을 활용하여 저만의 24시간 서버도 구축해보고,

 

Github Actions를 활용하여 CI/CD 개발 경험도 할 수 있는 좋은 경험이었습니다.

 

 

 

 

하지만 이 과정에서 많은 고난이 있어서 시간이 조금 걸렸네요.

 

특히 가상머신을 외부에서 접근할 수 있도록 가상 네트워크를 구축하고,

 

라우터 및 방화벽 설정에서 많은 시간이 걸렸습니다.

 

 

 

 

 

그리고 Github Actions을 활용하여 Verdaccio 자동 배포에도 애를 먹었죠.

 

 

 

https://verdaccio.org/docs/github-actions/

GitHub Actions | Verdaccio

 

https://github.com/verdaccio/github-actions

GitHub - verdaccio/github-actions: 🤖Verdaccio GitHub Actions

 

분명 Verdaccio 공식 문서과 Github에서 Github Actions에 대한 항목이 있었지만...

 

알고보니 이미 프로젝트가 반쯤 중단된 상태더군요.

 

그래서 어쩔 수 없이 npm을 활용하여 CI/CD을 구축하여 해결하였습니다.

 

해결했을 때의 기분은 정말 좋더군요 ㅎㅎ

 

 

 

아무튼, 앞으로 프로젝트에 필요한 라이브러리를 제작하여 UPM으로 관리하면 좋겠다는 생각이 드네요.

 

여러분도 자신만의 라이브러리를 패키지로 제작하여 관리해보는건 어떨까요?

 

지금까지 UPM 제작기를 봐주셔서 감사합니다!