[Github] Github 패키지 배포하기 / typescript, npm, Github Packages

 

[Github Packages 배포하기]

 

---

 

여러 프로젝트를 개발하면서 같은 기능을 사용하는 경우가 많았다.

서로 다른 repository를 사용하기 때문에 같은 기능의 함수를 복사해서 가져와 사용하는 일이 많아졌고,

수정사항이 생기면 모든 repository에서 변경해야하는 상황도 종종 생겼다.

 

이런 중복되는 일을 줄이기 위해 프론트엔드 개발자인 팀원분과 고민하던 중

github packages에 대해 알게 되었다.

 

그래서 github packages와 npm의 차이점과

typescript, github packages로 패키지, 모듈을 배포하는 과정에 대해 공부해보려고 한다.

 

---

 

<STUDY>

 

❓ Github Packages

소프트웨어 패키지를 private 또는 public으로 호스트하고 프로젝트의 종속성으로 사용할 수 있는 소프트웨어 패키지 호스팅 서비스

 

공식문서에 쓰여있는 내용인데, npm처럼 패키지를 배포하여 사용할 수 있는 서비스이다.

public으로 배포하는 경우 해당 organization 뿐만아니라 다른 곳에서도 사용 가능하다고 한다.

 

💡 npm과의 차이

private repository의 경우 npm은 유료 github packages는 무료로 배포할 수 있다.

 

사내 프로젝트는 보통 비공개이기 때문에 github packages를 이용하는 것도 괜찮은 방법인 것 같다. ㅎㅎ

 

 

❓ 디렉토리 구조

 

 

 

 

❓ 배포 방법

 

0. github access token 발급

• 이후 패키지를 배포하고 설치하여 사용하는 경우 필요하다.
• 토큰을 통해 해당 사용자가 organization에 write / read 권한이 있는지를 판단하는 것 같다.

 

💡 github Settings > Developer Settings > Personal access tokens > Tokens (classic) > Generate new token (classic)

 

 

• 토큰 이름 입력, 만료일 설정 및 write:packages 선택 후 토큰 생성
• 토큰의 이름은 원하는대로 설정 가능하다.

 

 

📌 write:packages를 설정해야 패키지 배포가 가능하다.

 

 

1. package.json 생성

- init을 통해 package.json 파일을 생성한다.

npm init

# package.json

{
  "name": "@scope/package_name",
  "version": "1.0.0",
  "private": false,
  "main": "index.js",
  "description": "",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "repository_url"
  },
  "publishConfig": {
    "@scope:registry": "https://npm.pkg.github.com"
  },
}

• name: @organization or @userId/패키지명
• private: 패키지를 공개로 배포할지, 비공개로 배포할지 설정 (단, private organization의 경우 제외)
• publishConfig: 패키지를 배포할 저장소 (registry에 배포하겠다는 의미)

 

 

2. typescript 설치

npm install -D typescript

 

 

3. tsconfig.json 생성

{
  "compilerOptions": {
    "paths": {
      "@scope/package_name": [
        "./src"
      ]
    },
    "target": "es5",
    "outDir": "dist",
    "declaration": true,
    "sourceMap": true,
    "declarationMap": true
  },
  "include": [
    "src/**/*"
  ]
}

• declaration, sourceMap, declarationMap 옵선을 true로 설정해주어야한다!!

 

 

4. package.json 파일 수정

{
  // ...
  "source": "src/index.ts",
  "main": "dist/index.js",
  "module": "dist/index.module.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "tsc --build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.4.5"
  }
}

 

 

5. .npmrc 파일 생성

// .npmrc

@scope:registry=https://npm.pkg.github.com/

 

 

6. 배포할 util 함수 생성

- 배포할 간단한 util 함수를 생성한다.

// src/index.ts

export function printName(name: string) {
  return name;
}

• package.json에서 "source"를 src/index.ts로 설정해 주었기 때문에 index.ts 파일에 함수를 작성했다.
• 파일/폴더를 나누고 싶은 경우 원하는 구조로 작성한 뒤 src/index.ts 파일에서 import 및 export 해주면 된다.
• 이후 package.json 버전을 변경한다.

📌 root directory에 있는 package.json의 version을 이전에 배포한 적 없는 버전으로 변경해야 배포할 수 있다.

 

 

 

7. 배포할 소스 빌드

npm build

• 루트 디렉토리에 dist 파일 생성

 

 

8. 개인 액세스 토큰 인증

- 두 방법 중 한가지 방법을 선택한다.

 

npm login

npm login --scope=@NAMESPACE --auth-type=legacy --registry=https://npm.pkg.github.com

> Username: USERNAME
> Password: GITHUB_ACCESS_TOKEN

 

~/.npmrc 파일 에 개인 액세스 토큰(클래식) 추가

open ~/.npmrc

# 아래 내용 등록
//npm.pkg.github.com/:_authToken=GITHUB_ACCESS_TOKEN

source ~/.npmrc

 

 

9. 배포

npm publish

• 배포가 완료되면 repository 오른쪽 하단 또는 organization의 packages에 패키지가 뜬다.

 

 

 

 

❓ 사용 방법

 

배포된 패키지를 클릭하여 들어가면 command line이 나오는데 해당 스크립트를 복사하여 사용하고자하는 프로젝트에서 설치하여 사용할 수 있다.

 

npm install @scope/package_name@version

 

• 간혹 unauthorized 에러가 발생하는 경우가 있는데 그것은 사용 권한 확인이 되지 않았기 때문!
• 이런 경우 npm login을 한 다음 다시 설치하면 된다.
• 설치 완료된 이후 프로젝트에서 자동 import가 되는지까지 확인한다면 성공적이다 😋

 

---

 

 

솔직히 typescript를 도입하면서 삽질을 조금 오래(?) 했는데,,,

결국 typescript를 javascript로 변환하고 index.d.ts (타입 선언 파일)을 이용하여 type을 지정해주지 않아 발생하는 에러 때문에 고생했던 거시여따...

tsc --build를 통해 빌드 파일을 만들어 해당 파일들을 배포하니 간단하게(...?) 해결되고 말았다.

 

이상으로 간단한 util 함수를 npm 패키지처럼 배포하여 사용하는 과정에 대해 공부해 보았다.

하지만 장기적으로는 util 함수를 넘어서 공통으로 자주 사용되는 component까지 개인 패키지로 배포하여 재사용성을 높이는 것이 목표이다.

 

때문에 다음에는 pnpm과 typescript를 이용하여 모노레포를 통해 패키지를 배포하는 방법에 대해 공부해 보려고 한다.

ㅎㅎ 언제나 공부하고 싶은건 넘쳐나고 공부해야할 것들도 넘쳐난다 ㅎㅎ

화이팅 ㅎㅎ

 

 

---

 

 

👉ez1n github 구경하기👈 

 

ez1n - Overview