저번에 폰트 파일을 바탕으로 font-face CSS 파일을 만들어주는 간단한 node cli 를 개발하는 과정을 포스팅 했었는데 이제는 이를 npm 에 올리고, github actions 을 통해 자동 배포를 하는 방법을 포스팅 해보려고 한다.

node cli 로 @font-face generator 만들기 - 1

생각보다 간단하다.

Github actions workflow 생성

먼저 github actions 에 workflows 파일을 만들어야한다.
해당 레포에 Actions 탭을 눌러보면 New workflow 라고 볼 수 있다.

이를 클릭해서 필자는 npm 에 올릴것이기 때문에 Publish Node.js Package 에 Set up this workflow 를 눌러서 들어간다.

그러면 .yml 파일이 생성되는것을 볼 수 있는데 여기서 필요한 부분만 살리고 나머지는 지워서 다음과 같이 만들었다.

name: Publish to NPM

on:
  release:
    types: [created]

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 16
          registry-url: https://registry.npmjs.org/
      - run: npm install
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

대략적으로 요약하자면

• release 가 만들어지면 jobs 가 실행된다.
• 코드를 받아오고 node 를 설치한다.
• npm install 를 통하여 package 를 설치한다.
• npm publish 를 통하여 등록한다.

물론 다음과 같은 포맷을 이용하지 않고 바로 '.github/workflows/public-node.yml' 로 작성해도 된다. 하지만 귀찮고 이미 어느정도 만들어 지는걸 잘 가져다 쓰는것도 능력이라 생각한다. ㅎㅎ

그 다음 커밋하면 된다 ㅎㅎ

그런 다음 github action 을 trigger 하기 위해 Releases 를 만들어주면 되는데 그전에 secrets.NPM_TOKEN 를 해결해주어야한다.

보통 npm 계정을 만들고 cli 에서 npm login -> npm publish 를 해주면 되지만 github actions 에서는 npm 으로 부터 받아온 token 을 설정해주어야지 인증된 사용자라고 인식하고 npm publish 를 해준다.

NPM token 발행

npm token 발급도 역시 아주 간단하다.

npm 계정이 있어야한다 당연하게도

npm 에 로그인 후 프로필을 클릭하면 누가봐도 토큰을 만들어주는Access Tokens 메뉴가 보이는것을 알 수 있다.

들어가서 Generate Token 누르면 다음과 같은 창이 뜨는데 여기서 Automation 을 선택 후 Generate Token을 누른다. 그러면 토큰이 생성되는데 그것을 복사해서 잘 가지고 있어야한다. 왜냐면 다시 들어가면 안보이기 때문이다.

NPM token 주입

npm token 을 github actions 에서 사용할 수 있도록 주입해주어야한다.
Settings > Secrets 를 들어가서 Repository secrets 에 ${{secrets.NPM_TOKEN}} 와 이름이 같도록 (NPM_TOKEN) 등록해주면 끝이난다.
여기서 Name 은 NPM_TOKEN, value 는 아까 npm 에서 발급받은 token 값이 된다.

그럼 다음과 같이 잘 등록된 모습이 보인다.

Publish!!

이제 마지막으로 Publish 이다!
repo 에서 Releases 를 통해 하나 release 해주면 이제 github action 이 돌고 npm 에 잘 publish 되는것을 확인 할 수 있다.

단, git tag 를 달아야 Release 할 수 있다. 그리고 다양한 방법으로 github action 을 trigger 할 수 있다.

그리고 npm 에 올라갔기 때문에 이제 다음과 같은 명령어도 사용할 수 있다.

npx gen-font-face

결론

github action 을 통해서 npm에 publish 하는것은 정말 어렵지 않다. 한번 정도 해보면 다음 부터는 수월하게 CI/CD 를 구축 할 수 있다고 생각이 든다. 그리고 요즘에는 정말 많은 레퍼런스들이 많아서 보고 쉽게 따라할 수 가 있기 때문에 누구나 쉽게 오픈소스를 배포하고 관리 할 수 있다고 생각이 든다.

다음에는 어떤 프로젝트를 해볼지 고민도 되고 설레기도 한다. 다음에는 Rust? Svelte?

gen-font-face