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)

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

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

(1) 패키지 설치