Motivation💡

저번 중급 프로젝트에 이어서 이번 고급 프로젝트에서도 Github Actions(깃헙 액션)를 사용하기로 했다. 저번 프로젝트에서는 팀원이 적용한 코드 그대로 읽고 넘어갔지만, 이번에는 깃헙 액션이 무엇인지 정확히 짚고 넘어가면 좋을 것 같아서 공부해봤다!

Github Actions

GitHub Actions는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD(지속적 통합 및 지속적 전달) 플랫폼입니다. 레포지토리에 대한 모든 풀 요청을 빌드 및 테스트하거나 병합된 풀 요청을 프로덕션에 배포하는 워크플로우를 생성할 수 있다.
GitHub는 워크플로우를 실행하기 위한 Linux, Windows 및 macOS 가상 머신을 제공하며, 자체 데이터 센터 또는 클라우드 인프라에서 자체 호스팅 실행기를 호스팅할 수도 있다.
https://docs.github.com/ko/actions/learn-github-actions/understanding-github-actions#overview

구성 요소

Workflows

여러 개의 Job으로 구성되고, Event에 의해 트리거될 수 있는 자동화된 프로세스를 말한다.
Workflows(워크플로우)는 저장소의github/workflows 에 YAML, YML 파일로 작성되고, 각각 서로 다른 작업을 수행하는 여러 개의 워크플로우가 있을 수 있다.

Events

워크플로우를 트리거하는 저장소의 특정 활동이나 규칙을 말한다.
(ex. pr 생성, 이슈 생성, 커밋 푸시 등)

• 이벤트의 전체 목록
  https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows

Jobs

동일한 runner에서 실행되는 워크플로우의 일련의 단계(steps)들을 말한다.
각 단계는 실행될 쉘 스크립트이거나 실행될 action들이다. steps는 순서대로 실행되며 서로 종속된다.
(ex. 애플리케이션을 빌드하는 단계, 빌드된 애플리케이션을 테스트하는 단계 등)

기본적으로 Job은 서로 병렬로 실행되지만, 종속적으로 실행하게 구성할 수 있다.

Actions

복잡하지만 자주 반복되는 작업을 수행하는 깃헙 액션 플랫폼용 사용자 지정 애플리케이션을 말한다. Actions를 사용하면 워크플로우 파일에 작성되는 반복적인 코드의 양을 줄이는데 도움이 된다.

Runners

워크플로우가 트리거될 때 워크플로우를 실행하는 서버를 말한다. 각각의 runner는 한 번에 하나의 job을 실행할 수 있다. 깃헙은 워크플로우를 실행하기 위한 Ubuntu Linux, Microsoft Windows 및 macOS 실행기를 제공한다.

팀 작성 코드 👾

name: ci

on: [push, pull_request]

jobs:
  run-lint:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Cache node modules
        uses: actions/cache@v3
        id: cache
        with:
          path: node_modules
          key: npm-packages-${{ hashFiles('**/package-lock.json') }}

      - name: Install the project dependencies
        if: steps.cache.outputs.cache-hit == false
        run: npm ci

      - name: Build
        run: npm run build

      - name: action-discord
        uses: sarisia/actions-status-discord@v1
        if: failure()
        with:
          webhook: ${{ secrets.DISCORD_WEBHOOK }}
          content: '<@&1192747539124977736> ${{ github.actor }} 확인해주세요! ( っ •‌ᜊ•‌ )う'
          title: ❗️ failed ❗️
          color: FF0000
          username: GitHub Actions

      - run: echo '${{github.actor}}님 에러 확인 확인해주세요 ( っ •‌ᜊ•‌ )う'

workflows 구문 이해하기

name

깃헙 레파지토리에 Actions 탭에 표시될 워크플로우 이름이다.

name: ci

on

이 워크플로우에 대한 트리거를 지정한다. 우리는 푸시와 pr을 올릴 때 워크플로우 실행이 트리거 될 수 있도록 설정했다.

on: [push, pull_request]

Jobs

run-lint -> 해당 job의 이름
runs-on: ubuntu-latest
-> Job이 최신 버전의 Ubuntu Linux 실행기에서 실행할 수 있도록 설정했다.

jobs:
  run-lint:
    runs-on: ubuntu-latest
    steps: 
    	- ...
        - ...

Steps

actions/checkout

Git의 체크아웃을 깃헙 액션 입장에서 바라보면 깃헙의 코드 레파지토리에 올려둔 코드를 CI 서버로 내려받은 후에 특정 브랜치로 전환하는 행위라고 할 수 있다.
깃헙 액션에서 처리되는 모든 작업은 이 checkout 단계부터 시작하므로 깃헙에서는 이 과정을 묶어서 액션으로 제공하고 있다.

    steps: 
    	- name: Checkout
        uses: actions/checkout@v3

actions/setup-node@n4

이 단계에서는 특정 Node.js 버전을 설치할 수 있도록 하는 action을 제공한다.

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

-> 우리는 .nvmrc 파일을 사용하기 때문에 아래와 같이 바꿀 수 있을 것 같다

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: '.nvmrc'
          cache: npm

• npm 패키지 캐싱
  일반적으로 npm 패키지는 최초에 한 번만 설치하면 되지만, 항상 새롭게 셋업되는 CI 서버에서는 모든 npm 패키지를 매번 설치해야 하는 비효율이 발생한다. 깃헙에서는 캐싱을 지원하기 대문에 CI 서버에서 npm 패키지를 설치할 때 성능을 향상시킬 수 있다.
  actions/setup-node@v4 액션의 cache 옵션을 통해 해당 프로젝트에서 쓰고 있는 패키지 매니저를 넘길 수 있다.
  우리는 npm을 사용하므로 package.json 파일을 기준으로 캐싱하도록 cache 옵션에 npm을 넘겼다.

actions/cache

깃헙이 제공하는 캐시(cache) 액션을 사용하면 깃헙 액션에서 워크플로우가 실행될 때 필요한 파일 중에서 거의 잘 바뀌지 않는 파일들을 깃헙 캐시에 올려놓고 CI 서버로 내려받을 수 있다.
설치해야 할 파일이 많은 프로젝트의 경우, 캐시를 활용하면 매번 설치할 필요 없어 workflows의 성능을 최적화하는데 도움이 된다.

uses를 사용해 액션을 가져오고, 액션에 필요한 인자를 with 키워드로 넘겨줄 수 있다.

      - name: Cache node modules
        uses: actions/cache@v3
        id: cache
        with:
          path: node_modules
          key: npm-packages-${{ hashFiles('**/package-lock.json') }}

• path: cache의 대상을 정한다.
• key: 캐시를 저장할 때 생성되는 키를 말한다. 캐싱된 데이터를 찾을 때 이 key를 사용한다.
  더 검색해보니 key에 오히려 npm-packages를 적은 이유를 잘 모르겠다.
  추측: path에 ~./npm 대신 node_modules라고 명시적으로 적었기 때문..?

- uses: actions/cache@v3
  id: npm-cache
  with:
    path: ${{ steps.npm-cache-dir.outputs.dir }} 
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

• restore-keys: key가 일치하지 않을 경우를 대비해 여러 key를 지정할 수 있다. 이때 목록에 작성된 순서대로 탐색을 진행한다.
  ex)

      - uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

이 부분은 나중에 따로 더 공부를 할 필요가 있는 것 같다;;
(참고: https://www.daleseo.com/github-actions-cache/)

run

run은 실행기에서 명령을 실행하도록 job에 지시하는 명령어를 말한다.

      - name: Install the project dependencies
        if: steps.cache.outputs.cache-hit == false
        run: npm ci

if: steps.cache.outputs.cache-hit == false -> 추가적인 공부 필요;;

      - name: Build
        run: npm run build

또 우리는 디스코드 웹훅을 연결해서 오류 발생 시 디스코드에 해당 메시지를 띄울 수 있게 설정했다.

      - name: action-discord
        uses: sarisia/actions-status-discord@v1
        if: failure()
        with:
          webhook: ${{ secrets.DISCORD_WEBHOOK }}
          content: '<@&1192747539124977736> ${{ github.actor }} 확인해주세요! ( っ •‌ᜊ•‌ )う'
          title: ❗️ failed ❗️
          color: FF0000
          username: GitHub Actions

      - run: echo '${{github.actor}}님 에러 확인 확인해주세요 ( っ •‌ᜊ•‌ )う'

마무리

이번 공부를 통해서 CI/CD 서버에 대해서 배울 수 있었고 결국 자동화가 중요하다는 것을 깨달았다. 아직 캐싱 과정에 대해서는 이해가 부족해서 프로젝트가 끝나고 나면 추가적인 공부가 필요하다!
비록 설정 과정은 어려워도 한번 설정하면 실수와 반복을 줄일 수 있어서 제대로 공부하면 더욱 좋을 것 같다.

참고자료

https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions
https://www.daleseo.com/github-actions-cache/
https://pozafly.github.io/dev-ops/cache-and-restore-keys-in-github-actions/
https://github.com/actions/cache/blob/main/examples.md#node---npm
https://www.daleseo.com/github-actions-setup-node/
https://blog.banksalad.com/tech/github-action-npm-cache/
https://roseline.oopy.io/dev/github-action-cahce
https://www.daleseo.com/github-actions-basics/