Logo

GitHub Actions 자바스크립트 셋업

이번 포스팅에서는 GitHub의 CI 서비스인 GitHub Actions를 사용하여 자바스크립트 프로젝트에서 CI를 구성하는 방법에 대해서 알아보겠습니다. 또한 자바스크립트 프로젝트에서 GitHub Actions 셋업이 용이하도록 GitHub에서 제공하는 Setup Node 액션에 대해서도 살펴보겠습니다.

실습 프로젝트와 코드 저장소 생성

간단한 실습을 위해서 Create React App을 통해 간단한 자바스크립트 프로젝트를 하나 생성하겠습니다.

$ npx create-react-app github-actions-setup-node

Creating a new React app in /Users/daleseo/temp/github-actions-setup-node.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


(... 생략 ...)

We suggest that you begin by typing:

  cd github-actions-setup-node
  npm start

Happy hacking!

그 다음 본인 GitHub에 계정에 새로운 코드 저장소(repository)를 하나를 만들고 위에서 생성한 프로젝트의 코드를 올립니다.

$ cd github-actions-setup-node
$ git remote add origin https://github.com/DaleSchool/github-actions-setup-node.git
$ git branch -M main
$ git push -u origin main
Enumerating objects: 22, done.
Counting objects: 100% (22/22), done.
Delta compression using up to 8 threads
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 285.94 KiB | 8.41 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/DaleSchool/github-actions-cache.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

저장소의 이름은 원하는대로 지으시면 되며 저는 프로젝트 명과 동일한 github-actions-setup-node이라는 이름으로 실습 코드 저장소를 만들었습니다.

npm 패키지 설치

자바스크립트 프로젝트에서 모든 CI 작업은 npm 패키지 설치에서 시작한다고 해도 과언이 아니겠죠? 먼저 CI 서버에 npm 패키지를 설치해보도록 하겠습니다.

프로젝트에 .github/workflows/라는 폴더를 만든 후, 그 안에 ci.yml이라는 이름의 YAML 파일을 하나 생성합니다.

코드 저장소에서 push 이벤트가 발생되면 워크플로우가 실행되도록 설정하고 build라는 간단한 작업(job)을 추가합니다. build 작업은 총 2단계로 이뤄지는데 첫번째 단계에서는 체크아웃 액션을 이용하여 코드 저장소에 올려둔 프로젝트의 코드를 CI 서버로 내려받고, 두번째 단계에서는 npm을 이용하여 package.json 파일에 명시되어 있는 패키지들을 CI 서버에 설치합니다.

GitHub에서 제공하는 체크아웃(Checkout) 액션에 대해서는 별도의 포스팅에서 자세히 다루었으니 참고 바랍니다.

.github/workflows/ci.yml
name: Our CI
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3      - run: npm ci

ci.yml 파일을 GitHub의 코드 저장소로 올린 후 Actions 탭에 들어가면 워크플로우가 실행될 것입니다.

Log
☑️ Set up Job
☑️ Run actions/checkout@v3
☑️ Run npm ci
▶ Run npm cinpm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecatednpm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.added 1415 packages, and audited 1416 packages in 27s179 packages are looking for funding  run `npm fund` for details6 moderate severity vulnerabilitiesTo address all issues (including breaking changes), run:  npm audit fix --forceRun `npm audit` for details.☑️ Post Run actions/checkout@v3
☑️ Complete Job

Run npm ci 단계를 보면 CI 서버에 총 1415개의 패키지가 설치된 것을 확인할 수 있습니다.

테스트 실행 및 프로젝트 빌드

CI에서 테스트를 실행과 프로젝트 빌드는 거의 필수적으로 진행되죠? 테스트를 실행 후에 프로젝트가 빌드되도록 워크플로우 파일을 한번 수정해보겠습니다.

.github/workflows/ci.yml
name: Our CI
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npm test      - run: npm run build

이제 ci.yml 파일의 변경 내용을 GitHub의 코드 저장소로 올리면 워크플로우가 실행될 것입니다.

Log
☑️ Set up Job
☑️ Run actions/checkout@v3
☑️ Run npm ci
☑️ Run npm test▶ Run npm test  npm test  shell: /usr/bin/bash -e {0}> github-actions-setup-node@0.1.0 test> react-scripts testPASS src/App.test.js  ✓ renders learn react link (36 ms)Test Suites: 1 passed, 1 totalTests:       1 passed, 1 totalSnapshots:   0 totalTime:        1.468 sRan all test suites.☑️ Run npm run build
▶ Run npm run build  npm run build  shell: /usr/bin/bash -e {0}> github-actions-setup-node@0.1.0 build> react-scripts buildCreating an optimized production build...Compiled successfully.File sizes after gzip:  46.39 kB  build/static/js/main.f5998c51.js  1.79 kB   build/static/js/787.2063ca84.chunk.js  541 B     build/static/css/main.073c9b0a.cssThe project was built assuming it is hosted at /.You can control this with the homepage field in your package.json.The build folder is ready to be deployed.You may serve it with a static server:  npm install -g serve  serve -s buildFind out more about deployment here:  https://cra.link/deployment☑️ Post Run actions/checkout@v3
☑️ Complete Job

Actions 탭에 들어가 워크플로우 실행 로그를 확인해보면 CI 서버에서 테스트가 통과하고 프로젝트가 빌드되는 것을 볼 수 있습니다.

참고로 여기서 의도적으로 프로젝트 빌드보다 테스트를 먼저 실행되도록 워크플로우를 설정하였는데요. 테스트가 실패한 코드를 굳이 빌드하여 CI 서버의 리소스를 낭비할 필요가 없기 때문입니다.

특정 노드 버전 설치

GitHub Actions에서는 기본적으로 CI 서버에 Node.js가 이미 설치가 되어 있어서 굳이 별도로 설치를 해 줄 필요는 없는데요. 그럼에도 불구하고 GitHub Actions의 CI 서버는 주기적으로 이러한 소프트웨어가 업데이트되기 때문에 프로젝트에서 사용하는 정확한 버전의 Node.js를 설치하는 편이 더 안전할 수도 있습니다.

우분투 운영체제의 apt-get 명령어나 윈도우즈 운영체제의 choco 명령어를 사용해서 직접 설치 스크립트를 작성하여 실행할 수도 있지만, GitHub에서 제공하는 Setup Node 액션을 사용하면 CI 서버의 운영체제를 신경쓰지 않고 단순히 버전만 명시하여 Node.js를 설치할 수 있어서 매우 편리합니다. actions/setup-node@v3 액션의 node-version 입력 옵션을 16.14.2로 넘겨보겠습니다.

.github/workflows/ci.yml
name: Our CI
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3        with:          node-version: 16.14.2      - run: npm ci
      - run: npm test
      - run: npm run build

다시 ci.yml 파일의 변경 내용을 GitHub의 코드 저장소로 올리면 워크플로우가 실행될 것입니다.

Log
☑️ Set up Job
☑️ Run actions/checkout@v3
☑️ Run actions/setup-node@v3▶ Run actions/setup-node@v3Attempting to download 16.14.2...Acquiring 16.14.2 - x64 from https://github.com/actions/node-versions/releases/download/16.14.2-2007501289/node-16.14.2-linux-x64.tar.gzExtracting .../usr/bin/tar xz --strip 1 --warning=no-unknown-keyword -C /home/runner/work/_temp/b7b24842-f513-43a7-938d-2a409c6055c4 -f /home/runner/work/_temp/48e86587-038b-4eae-9b1d-dafbd445c172Adding to the cache ...Done☑️ Run npm ci
☑️ Run npm test
☑️ Run npm run build
☑️ Post Run actions/setup-node@v3
☑️ Post Run actions/checkout@v3
☑️ Complete Job

워크플로우의 로그를 통해 Node.js의 정확히 16.14.2 버전이 CI 서버에 설치되는 것을 확인할 수 있습니다.

npm 패키지 캐싱

워크플로우 로그를 확인해보면 npm 패키지를 설치하는 단계에서 시간이 가장 많이 소모되는 것을 눈치챌 수 있는데요. 개발자들은 계속 같은 컴퓨터를 사용하므로 npm 패키지를 최초에 한 번만 설치해주면 되지만, 항상 새롭게 셋업되는 CI 서버에서는 모든 npm 패키지를 매번 설치해야하는 비효율이 발생합니다.

특히 프로젝트의 규모가 커지고 더욱 많은 npm 패키지가 설치됨에 따라 이 것은 프로젝트의 개발 생산성에도 부정적인 영향을 줄 수 있는데요. 다행이도 GitHub Actions에서는 캐싱(caching)을 지원하기 때문에 CI 서버에서 npm 패키지를 설치할 때 성능 향상을 꾀할 수 있습니다.

GitHub의 Setup Node을 사용하면 매우 간편하게 이러한 npm 패키지 캐싱도 설정할 수 있는데요. actions/setup-node@v3 액션의 cache 입력 옵션을 통해 npm, yarn, pnpm과 같은 패키지 매니저를 넘길 수 있습니다. 실습 프로젝트는 npm을 사용하므로 package-lock.json 파일을 기준으로 캐싱을 하도록 cache 입력 옵션을 npm으로 넘기겠습니다.

.github/workflows/ci.yml
name: Our CI
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16.14.2
          cache: npm      - run: npm ci
      - run: npm test
      - run: npm run build

이제 ci.yml 파일의 변경 내용을 GitHub의 코드 저장소로 올리면 워크플로우가 실행될 것입니다.

Log
☑️ Set up Job
☑️ Run actions/checkout@v3
☑️ Run actions/setup-node@v3
▶ Run actions/setup-node@v3Attempting to download 16.14.2...Acquiring 16.14.2 - x64 from https://github.com/actions/node-versions/releases/download/16.14.2-2007501289/node-16.14.2-linux-x64.tar.gzExtracting .../usr/bin/tar xz --strip 1 --warning=no-unknown-keyword -C /home/runner/work/_temp/763ebb03-a499-446c-9a7e-ca4f5565cca1 -f /home/runner/work/_temp/eebaaa50-d30d-4b26-b2da-a687b624e6d2Adding to the cache ...Done/opt/hostedtoolcache/node/16.14.2/x64/bin/npm config get cache/home/runner/.npmnpm cache is not found☑️ Run npm ci
☑️ Run npm test
☑️ Run npm run build
☑️ Post Run actions/setup-node@v3
▶ Post job cleanup./opt/hostedtoolcache/node/16.14.2/x64/bin/npm config get cache/home/runner/.npm/usr/bin/tar --posix --use-compress-program zstd -T0 -cf cache.tzst -P -C /home/runner/work/github-actions-setup-node/github-actions-setup-node --files-from manifest.txtCache Size: ~37 MB (39269225 B)Cache saved successfullyCache saved with the key: node-cache-Linux-npm-0ea44dc6f6ce94ea47107f7661af88d55a05d065fdb8b953a40ff5c25151ffe7☑️ Post Run actions/checkout@v3
☑️ Complete Job

첫번째 실행에는 워크플로우가 전혀 빨라지지 않을 거에요. 아직까지 캐시에 npm 패키지를 저장한 적이 없으니까요. 하지만 Post Run actions/setup-node@v3 단계를 보시면 npm 패키지를 압축하여 GitHub의 캐시에 올리는 것을 볼 수 있습니다.

이제 Actions 탭에서 실습 워크플로우를 수동으로 재실행해볼까요?

Log
☑️ Set up Job
☑️ Run actions/checkout@v3
☑️ Run actions/setup-node@v3
▶ Run actions/setup-node@v3Attempting to download 16.14.2...Acquiring 16.14.2 - x64 from https://github.com/actions/node-versions/releases/download/16.14.2-2007501289/node-16.14.2-linux-x64.tar.gzExtracting .../usr/bin/tar xz --strip 1 --warning=no-unknown-keyword -C /home/runner/work/_temp/85c6463c-9771-4922-9fa8-79825bd14a85 -f /home/runner/work/_temp/f80c4dd5-fcf0-411c-ad5e-5b7bfbb6e7e9Adding to the cache ...Done/opt/hostedtoolcache/node/16.14.2/x64/bin/npm config get cache/home/runner/.npmReceived 4194304 of 39269225 (10.7%), 4.0 MBs/secReceived 39269225 of 39269225 (100.0%), 27.1 MBs/secCache Size: ~37 MB (39269225 B)/usr/bin/tar --use-compress-program zstd -d -xf /home/runner/work/_temp/bc7adebc-41de-4291-845f-6915f7cd49a4/cache.tzst -P -C /home/runner/work/github-actions-setup-node/github-actions-setup-nodeCache restored successfullyCache restored from key: node-cache-Linux-npm-0ea44dc6f6ce94ea47107f7661af88d55a05d065fdb8b953a40ff5c25151ffe7☑️ Run npm ci
☑️ Run npm test
☑️ Run npm run build
☑️ Post Run actions/setup-node@v3
▶ Post job cleanup./opt/hostedtoolcache/node/16.14.2/x64/bin/npm config get cache/home/runner/.npmCache hit occurred on the primary key node-cache-Linux-npm-0ea44dc6f6ce94ea47107f7661af88d55a05d065fdb8b953a40ff5c25151ffe7, not saving cache.☑️ Post Run actions/checkout@v3
☑️ Complete Job

이 번에는 패키지를 설치하는 속도가 훨씬 빨라졌는데요. 기존에는 약 30초가 걸렸었는데 이번에는 약 10초가 걸리네요.

Run actions/setup-node@v3 단계를 보면 GitHub의 캐시에서 npm 패키지가 들어있는 약 37 MB의 압축 파일을 읽어와서 CI 서버에 압축을 풀고 있는 것을 볼 수 있습니다.

참고로 이 것보다 좀 더 세밀한 캐싱 설정이 필요하다면 GitHub의 Cache 액션을 사용할 수도 있는데요. GitHub의 Cache 액션에 대해서는 별도의 포스팅에서 다루었으니 참고 바랍니다.

실습 코드

본 포스팅에서 작성한 YAML 파일과 워크플로우 실행 결과는 아래 코드 저장소에서 확인하실 수 있습니다.

마치면서

지금까지 자바스크립트 프로젝트를 만들고 GitHub의 저장소에 올린 후 간단하게 GitHub Actions를 셋업해보았습니다. 실습 워크플로우에서는 일반적인 CI에서 기본적으로 필요한 패키지 설치, 테스트 실행, 프로젝트 빌드까지만 설정을 해보았는데요.

실제 프로젝트에서는 여기에 코드 포멧팅(formatting)이나 린팅(linting)를 추가 셋업할 수도 있고, 타입스크립트를 사용한다면 당연히 컴파일 오류를 확인하는 단계도 필요할 것입니다. 뿐만 아니라 단순한 CI(Continuous Integration)에서 더 나아가 애플리케이션을 상용 환경에 반영하거나 라이브러리를 npm 저장소에 배포하는 CD(Continuous Deployment)까지 확장할 수 있겠죠?

본 포스팅에서 활용한 Setup Node 액션에 대한 좀 더 세부적인 내용은 GitHub 마켓플레이스를 참고 바라겠습니다.