CICD: package 배포

Jenkins를 사용해 내가 만든 UI 패키지(예: React 컴포넌트 라이브러리)를 npm에 배포하고, 서버에서 설치해 사용하는 방법을 단계별로 설명드리겠습니다.

---

1. npm 패키지 배포 준비

(1) package.json 설정

• 필수 필드: name, version, main, files
• 예시:

  {
    "name": "@your-org/your-ui-package",
    "version": "1.0.0",
    "main": "dist/index.js",
    "types": "dist/index.d.ts",
    "files": ["dist"],
    "scripts": {
      "build": "tsc && vite build",
      "prepublishOnly": "npm run build"
    }
  }
  

(2) 빌드 설정

• TypeScript + Vite 예시 (vite.config.ts):

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    build: {
      lib: {
        entry: 'src/index.ts',
        name: 'YourUI',
        fileName: 'index',
      },
      rollupOptions: {
        external: ['react', 'react-dom'],
      },
    },
    plugins: [react()],
  });
  

(3) npm 계정 로그인

npm login  # npm 계정 인증

---

2. Jenkins 파이프라인 구성

(1) 배포 스크립트 (Jenkinsfile)

pipeline {
  agent any
  environment {
    NPM_TOKEN = credentials('npm-auth-token')  # Jenkins에 저장된 npm 토큰
  }
  stages {
    stage('Build') {
      steps {
        sh 'npm install'
        sh 'npm run build'
      }
    }
    stage('Publish to npm') {
      steps {
        sh 'echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc'
        sh 'npm publish --access public'
      }
    }
  }
}

(2) npm 토큰 등록 (Jenkins Credentials)

• npm에서 토큰 생성:
• npm 공식 사이트 → Access Tokens → Generate New Token (Automation 권한).
• Jenkins에 토큰 저장:
• Jenkins > Credentials > System > Global credentials → Secret text로 추가.

---

3. 서버에서 npm 패키지 사용

(1) 패키지 설치

npm install @your-org/your-ui-package

(2) 컴포넌트 사용 예시 (React)

import { Button } from '@your-org/your-ui-package';

function App() {
  return <Button variant="primary">Click Me</Button>;
}

---

4. 주의사항

• 버전 관리:
• npm version patch|minor|major로 버전 업데이트 후 배포.
• Private Registry:
• 사내 npm 레지스트리 (예: Verdaccio) 사용 시 .npmrc 설정 필요.
• Jenkins 빌드 캐싱:
• turbo build 또는 nx로 모노레포 빌드 최적화.

---

문제 해결

• 403 Forbidden: npm 토큰 권한 확인.
• Missing Files: package.json의 files 필드에 dist 폴더 포함 여부 확인.

이렇게 구성하면 Jenkins로 자동 배포 → 서버에서 npm 설치까지 원활히 진행됩니다! 🚀