라이브러리 배포 및 패킹 프로세스 자동화

들어가며

요즘 사내에서 리액트 컴포넌트 라이브러리를 제작하고 있습니다.
기존의 프론트엔드 프로젝트에서는 필수 컴포넌트를 구현하기 위해 다양한 서드파티 라이브러리의 힘을 빌리고 있었는데요.
여러 라이브러리를 사용하다보니 라이브러리의 버전 관리도 어렵고 어떤 라이브러리는 유지보수가 중단된지 3년이 지났는 등 다양한 이슈가 발생하기 시작했습니다.
 
이로 인해서 파편화된 라이브러리 (react-modal, react-select, react-tooltip 등)를 걷어내고 headless UI 라이브러리인 radix-ui/premitive를 활용해 필수 컴포넌트를 구현하고 라이브러리화 시켜서 컴포넌트를 사용하자는 의견을 냈고, 현재 초기 작업에 있습니다.

지난번 제작중인 라이브러리를 쉽게 로컬에서 프로젝트에 설치해 테스트 하는 방법을 공유해드렸는데요, 이번엔 해당 과정을 스크립트를 활용해 더욱 쉽게 테스트를 해볼 수 있도록 자동화 한 과정을 공유하고자 합니다.
 
테스트를 위한 프로세스만 자동화 하기는 아쉬우니 배포를 위한 프로세스도 자동화 시켜보도록 하겠습니다.
 
스크립트 작성에 앞서 OS환경을 고려해야 합니다. 현재 사내에서는 Windows를 사용해 개발을 하고 있습니다. 하지만 맥북을 사용하는 개발자도 있기 때문에 두 가지 쉘을 고려해 스크립트를 작성해야 합니다. Windows는 PowerShell을 활용하고 Linux(Unix기반)는 bash쉘을 활용해 스크립트를 작성해보도록 하겠습니다.
 

패킹 프로세스 자동화

먼저 로컬 테스트를 위한 단계는 다음과 같습니다.
1. 라이브러리를 빌드한다.

- 만약 빌드가 실패한다면 프로세스를 종료한다.
2. 패키지의 버전을 올린다.
3. 빌드한 파일을 패킹한다.
 
간단한 과정인데 라이브러리를 로컬에서 적용하며 테스트를 하다보면 지속해서 수정이 발생하는 케이스가 있습니다. 그럴때마다 위의 프로세스를 수행하는 것은 여간 쉬운 일이 아닙니다. 그러므로 프로세스화 시켜 자동화를 시켜봅니다.

# Build the project
& pnpm run build

# If Build Fail, Kill Process
if ($LASTEXITCODE -ne 0) {
    Write-Host "Error: Build failed. Process cancelled."
    exit 1
}

# Read the current package.json version
$current_version = node -p "require('./package.json').version"
Write-Host "Current version: $current_version"

# Increment the version number
$new_version = pnpm version --no-git-tag-version patch
Write-Host "New version: $new_version"

# Packing build dir
& pnpm pack

# Build the project
pnpm run build

# If Build Fail, Kill Process
if [ $? -ne 0 ]; then
    echo "Error: Build failed. Process cancelled."
    exit 1
fi

# Read the current package.json version
current_version=$(node -p "require('./package.json').version")
echo "Current version: $current_version"

# Increment the version number
new_version=$(pnpm version --no-git-tag-version patch)
echo "New version: $new_version"

# Packing build dir
pnpm pack

 
간단하게 package.json 파일에 접근해 패키지의 버전을 알아오고, 새로운 버전을 넣어줍니다. 빌드를 수행 후 패킹까지 수행하면 간단하게 테스트를 위한 사전 프로세스를 만들 수 있습니다.
 

라이브러리 배포 자동화

테스트가 완료되어 이제 배포를 할 차례가 됐습니다. 배포를 위한 프로세스를 나열해보도록 하겠습니다.\

 

1. 현재 브랜치를 확인한다.

- 마스터 브랜치(퍼블리싱 하는 브랜치 설정)가 아니라면 프로세스를 종료한다.

2. 빌드를 수행한다.

- 빌드가 실패하면 프로세스를 종료한다.

3. 패키지의 버전을 올린다.
4. 저장소에 병합되지 않는 소스코드를 커밋, 푸쉬한다.
5. 저장소 레지스트리에 퍼블리싱을 수행한다.
 
위 프로세스를 스크립트로 자동화 시켜봅니다.

# Check if the current branch is master
$current_branch = git rev-parse --abbrev-ref HEAD
if ($current_branch -ne "master") {
    Write-Host "Error: Not on master branch. Current branch is $current_branch"
    Write-Host "Process cancelled."
    exit 1
}

# Build the project
& pnpm run build

# If Build Fail, Kill Process
if ($LASTEXITCODE -ne 0) {
    Write-Host "Error: Build failed. Process cancelled."
    exit 1
}

# Read the current package.json version
$current_version = node -p "require('./package.json').version"
Write-Host "Current version: $current_version"

# Increment the version number
$new_version = pnpm version --no-git-tag-version patch
Write-Host "New version: $new_version"

# Commit the changes and push to origin
git add .
git commit -m "release/ new release $new_version"
git push

# Publish the project
& pnpm publish

# Inform Host
Write-Host "Release Success $new_version"

# Check if the current branch is master
current_branch=$(git rev-parse --abbrev-ref HEAD)
if [ "$current_branch" != "master" ]; then
    echo "Error: Not on master branch. Current branch is $current_branch"
    echo "Process cancelled."
    exit 1
fi

# Build the project
pnpm run build

# If Build Fail, Kill Process
if [ $? -ne 0 ]; then
    echo "Error: Build failed. Process cancelled."
    exit 1
fi

# Read the current package.json version
current_version=$(node -p "require('./package.json').version")
echo "Current version: $current_version"

# Increment the version number
new_version=$(pnpm version --no-git-tag-version patch)
echo "New version: $new_version"

# Commit the changes and push to origin
git add .
git commit -m "release: new release $new_version"
git push

# Publish the project
pnpm publish

# Inform the user
echo "Release Success $new_version"

 

package.json 스크립트 업데이트

이제 작성한 스크립트를 패키지 매니저로 실행할 수 있도록 스크립트를 만들어줍니다. 스크립트는 Windows와 Linux 환경을 고려해 다른 스크립트로 작성했습니다.

// package.json

{
  ...
  "scripts": {
      "release:windows": "powershell.exe ./script/release.ps1",
      "release:linux": "sh ./script/release.sh",
      "pack:windows": "powershell.exe ./script/pack.ps1",
      "pack:linux": "sh ./script/pack.sh"
      ...
  }
}

 

수행 테스트

이제 작성한 스크립트를 테스트 하겠습니다.
 
먼저 테스트를 위한 사전 프로세스 입니다.

 
다음은 릴리즈 자동화 프로세스 입니다. 퍼블리싱은 하면 안됨으로 주석처리 했습니다.

 
 

마치며

간단한 스크립트로 팀원들의 수고를 덜어줬습니다.
뭐든지 불편한 과정을 개선하는 것은 즐거운 것 같습니다. 다음 번엔 어떤 과정을 자동화 시켜볼 수 있을지 고민해 봐야겠습니다!
읽어봐주셔서 감사합니다.