<div id="readability-page-1" class="page"><div>
 <a href="/m/category/WEB2.0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D">WEB2.0/프로그래밍</a><h3>매우 쉬운 github action의 시작, npm test 실행하기</h3>
 </div><cite>나를찾는아이</cite>
 2023. 3. 10. 09:22
 <div>
 매우 간단하게 github action을 시작해볼수 있는 github action을 작성해보도록 합시다

github action 은 yaml 포맷으로 작성이 되는데요

기본형이 되는 다음의 내용을 작성해봅시다

<pre id="code_1678179835380" data-ke-language="javascript" data-ke-type="codeblock"><code>// action.yml
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
 with:
 node-version: 16
- run: npm ci
- run: npm test</code></pre>

하나씩 항목을 살펴봅시다

uses 에

<pre id="code_1678180762637" data-ke-language="javascript" data-ke-type="codeblock"><code>actions/checkout@v3
actions/setup-node@v3</code></pre>

라고 나와있는 부분은

이미 다른 사람이 만들어 생성되어있는 액션을 가져다 쓴다고 생각하시면 됩니다

actions/checkout@v3
actions/setup-node@v3

두개의 액션을 가져다 쓰는데요

actions/checkout@v3는 repository를 checkout 하는 액션입니다

actions/setup-node@v3는 node환경을 셋업하는 액션입니다

이름이 아주 직관적이지요?

그런데 actions/setup-node@v3 밑에&nbsp;

with라는 이름으로

node-version: 16 이라고 표기되어있습니다


actions/setup-node@v3는 여러 파라메터를 받을수 있는데요

액션에 필요한 파라메터를 전송할때 with를 사용합니다

with를 통해 node-version 이라는 파라메터를 보냈는데요

node-version을 16버전을 사용하겠다라는 의미겠죠?


그리고&nbsp;

<pre id="code_1678180793284" data-ke-language="javascript" data-ke-type="codeblock"><code>run : npm ci</code></pre>

이것은 말그대로 npm ci 명령어를 실행합니다

체크아웃한 repo의 package.json, package-lock.json을 이용해 패키지들을 설치합니다

그리고 마지막으로

<pre id="code_1678180803305" data-ke-language="javascript" data-ke-type="codeblock"><code>run : npm test</code></pre>

여러분의 레파지토리에 npm test 명령어가 설정되어있다면

npm test 명령어를 실행합니다


당연히 여러분들이 만들어놓은 테스트 케이스들이 동작을 하겠지요?


짧고 쉬운 설명을 마쳤는데요


심화로 들어가봅시다


npm ci 명령어를 통해 패키지를 설치하는것은 사실 상당한 시간이 걸리는 작업입니다

추가적인 패키지의 설치가 없이 아주 작은 코드를 변경할때도 액션이 긴 시간 수행이 될텐데요

depecency에 아무런 변경이 없는 경우에 node_modules를 캐시를 하게 된다면

이 액션이 좀 더 빠르게 동작할수 있겠죠?

actions/setup-node@v3는

내부적으로 action/cache를 사용하여 캐싱을 할수 있는 기능을 제공합니다

<pre id="code_1678180373803" data-ke-language="javascript" data-ke-type="codeblock"><code>steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
 with:
 node-version: 16
 cache: 'npm'
- run: npm ci
- run: npm test</code></pre>

with에 cache : 'npm' 이라는 파라메터를 추가로 전달하게 되면

이 프로젝트가 npm 패키지라는것을 인식하여 루트경로에 위치한 package-lock.json 파일의 해시값을 키로하여

캐시를 저장합니다

그래서 다음 실행부터는 install 과정을 건너뛰고 좀 더 빠르게 액션이 수행됩니다


<pre id="code_1678180461435" data-ke-language="javascript" data-ke-type="codeblock"><code>// ./github/workflows/acton.yml
name : nodejs CI

on:
 push:
 branches: [master]
 pull_request:
 branches: [master]
jobs:
 build:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v3
 - uses: actions/setup-node@v3
 with:
 node-version: 16
 cache: 'npm'
 - run: npm ci
 - run: npm test</code></pre>

자 이제 이렇게 최종적으로 완성된 yml 파일을 프로젝트의 .github/workflow 폴더를 생성하여 두게되면

master 브랜치의 push 또는 pull_request가 생성될때 이 액션이 수행되게 됩니다

스케줄에 기반하여 정기적으로 액션을 수행할수도 있구요


한번 만들어볼까요?


 
 
 </div></div>

나를 찾는 아이

Kyoung min, Kim

매우 간단하게 github action을 시작해볼수 있는 github action을 작성해보도록 합시다
 
github action 은 yaml 포맷으로 작성이 되는데요
 
기본형이 되는 다음의 내용을 작성해봅시다
 
// action.yml
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
  with:
    node-version: 16
- run: npm ci
- run: npm test
 
하나씩 항목을 살펴봅시다
 
uses 에
 
actions/checkout@v3
actions/setup-node@v3
 
라고 나와있는 부분은
 
이미 다른 사람이 만들어 생성되어있는 액션을 가져다 쓴다고 생각하시면 됩니다
 
actions/checkout@v3
actions/setup-node@v3
 
두개의 액션을 가져다 쓰는데요
 
actions/checkout@v3는 repository를 checkout 하는 액션입니다
 
actions/setup-node@v3는 node환경을 셋업하는 액션입니다
 
이름이 아주 직관적이지요?
 
그런데 actions/setup-node@v3 밑에 
 
with라는 이름으로
 
node-version: 16 이라고 표기되어있습니다
 
 
actions/setup-node@v3는 여러 파라메터를 받을수 있는데요
 
액션에 필요한 파라메터를 전송할때 with를 사용합니다
 
with를 통해 node-version 이라는 파라메터를 보냈는데요
 
node-version을 16버전을 사용하겠다라는 의미겠죠?
 
 
그리고 
 
run : npm ci
 
이것은 말그대로 npm ci 명령어를 실행합니다
 
체크아웃한 repo의 package.json, package-lock.json을 이용해 패키지들을 설치합니다
 
그리고 마지막으로
 
run : npm test
 
여러분의 레파지토리에 npm test 명령어가 설정되어있다면
 
npm test 명령어를 실행합니다
 
 
당연히 여러분들이 만들어놓은 테스트 케이스들이 동작을 하겠지요?
 
 
짧고 쉬운 설명을 마쳤는데요
 
 
심화로 들어가봅시다
 
 
npm ci 명령어를 통해 패키지를 설치하는것은 사실 상당한 시간이 걸리는 작업입니다
 
추가적인 패키지의 설치가 없이 아주 작은 코드를 변경할때도 액션이 긴 시간 수행이 될텐데요
 
depecency에 아무런 변경이 없는 경우에 node_modules를 캐시를 하게 된다면
 
이 액션이 좀 더 빠르게 동작할수 있겠죠?
 
actions/setup-node@v3는
 
내부적으로 action/cache를 사용하여 캐싱을 할수 있는 기능을 제공합니다
 
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
  with:
    node-version: 16
    cache: 'npm'
- run: npm ci
- run: npm test
 
with에 cache : 'npm' 이라는 파라메터를 추가로 전달하게 되면
 
이 프로젝트가 npm 패키지라는것을 인식하여 루트경로에 위치한 package-lock.json 파일의 해시값을 키로하여
 
캐시를 저장합니다
 
그래서 다음 실행부터는 install 과정을 건너뛰고 좀 더 빠르게 액션이 수행됩니다
 
 
// ./github/workflows/acton.yml
name : nodejs CI
on:
  push:
    branches: [master]
  pull_request:
    branches: [master]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'npm'
      - run: npm ci
      - run: npm test
 
자 이제 이렇게 최종적으로 완성된 yml 파일을 프로젝트의 .github/workflow 폴더를 생성하여 두게되면
 
master 브랜치의 push 또는 pull_request가 생성될때 이 액션이 수행되게 됩니다
 
스케줄에 기반하여 정기적으로 액션을 수행할수도 있구요
 
 
한번 만들어볼까요?

매우 쉬운 github action의 시작, npm test 실행하기

댓글