Github Actions로 CI 적용하기(극 초보자용😈), Github Actions 작동 확인하는 법

이거 보십시오!!! 제가 멋진 것을 해냈습니다!!!

크크 뿌듯✌🏻이런 스크립트를 작성해본 게 처음이라 많이 헤맸다. 나같은 초보자들이 이해하기 쉽게 작성해보겠다.

 

💁🏻‍♂️ Github Actions란?

CI/CD 툴이다. Jenkins, CircleCI, TravisCI 등의 다른 툴들도 있지만 Github Actions의 경우 Github에서 제공하는 CI/CD 툴이라는 게 큰 이점이다.

 

👩🏻‍💻 적용 방법

1. 프로젝트 최상단에 .github 폴더 생성
2. 그 안에 workflows 폴더 생성
3. 개별 workflow 파일 작성. 확장자는 .yml 을 사용한다. 파일명은 자유롭게 지으면 된다.

나는 CI 라는 이름의 workflow를 작성했다. 파일명은 ci.yml로 지었다. workflow는 말그대로 일련의 동작들을 의미한다. 특정 이벤트가 발생했을 때 자동으로 실행할 작업들을 나열해두면, Github Actions가 이를 실행해주는 것이라고 이해했다.

 

Github이 제공하는 템플릿 활용하기

Github에서 제공하는 기본 템플릿을 사용하는 것을 추천한다. 백지 상태에서 적으려면 무척이나 막막하다. Github 레포지토리에서 Actions 탭을 클릭하면, 제공되는 여러 가지 템플릿을 확인할 수 있다. 아래 화면의 set up a workflow yourself 를 클릭하면 가장 기본 템플릿이 나온다.

위 화면에서 작성을 시작해보자.

 

workflow를 이루는 개별 요소들 이해하기

• name: workflow의 이름을 의미한다. 아무렇게나 지어도 상관없다.
• on: 해당 workflow를 트리거할 이벤트를 명시한다. ex) main 브랜치에 pull request가 발생했을 때 일련의 작업들을 수행한다.
• jobs: 한 workflow는 여러 개의 job을 가질 수 있다. 개별 job은 여러 개의 step들로 이뤄진다. job의 하위에 step들을 작성하면 된다. step들은 차례대로 실행되고, job들은 병렬적으로 실행된다. 이때 개별 step을 action이라고 부른다. action은 workflow에서의 가장 작은 단위다.

이해하기 쉽게 실제 코드에 표시를 해봤다. 민트색 사각형이 개별 job이고, 핑크색 사각형이 개별 step이다. 민트색 사각형 내에 핑크색 사각형이 여러 개 있다.

전반적인 구조를 이해했다면, 이제는 어떤 작업들을 할 지를 작성해야 한다. (각 step을 작성해야 한다.)

 

action 작성하기

CI를 처음 접하는 초보자 입장에서 개별 단계를 깊이 이해하긴 어렵다고 생각한다. 지극히 초보자 수준에서 얕게 알아보자.

 

action(개별 step)을 작성하는 방법에는 크게 두 가지가 있다. 첫째는 이미 다른 사람들이 작성해놓은 걸 그대로 가져다 쓰는 것이고, 두번째는 직접 작성하는 것이다. 전자의 경우 uses 키워드로 사용하고자 하는 action명을 명시한다. 후자의 경우 run 키워드로 실행하고자 하는 CLI 명령어를 작성한다.

 

action을 세 종류로 나눠서 소개해보겠다. 개별 action을 자세히 이해할 필요는 없다.

 

1. 필수 action
   • 가장 최근 commit에 checkout 하기 uses: actions/checkout@v3
   • node 세팅하기 uses: actions/setup-node@v1
   • 의존성 설치하기 run: yarn install
2. 추가하면 좋은 action
   • 의존성 캐싱하기 uses: actions/cache@v3
     : CI를 할 때마다 의존성을 새롭게 설치하는 것은 비효율적이다. 이전 CI와 의존성이 동일할 경우 캐싱된 값을 사용한다.
3. 실제 CI action
   • lint
   • test: 변경된 코드에 대한 테스트
   • build

 

아마 다들 나처럼 3번에 해당하는 기능을 추가하고 싶어서 Github Actions를 구글링 했을텐데, 뭘 하는지 모르겠는 여러 코드들이 추가되어 있어서 적잖이 당황했을 것이다😇 위 분류를 참고한다면 구글링 해서 나온 코드 중 필요한 것을 취사선택 하는데 도움이 될 것이다.

---

 

 

((사설))

사실 내가 가장 의문이었던 건 대체 CI에 뭘 추가해야하는가? 였다. 프로젝트 뼈대부터 잡고 있는 단계라 아직 테스트 코드가 없는데?

그래서 무척 소심하게 첫 질문을 올렸는데 팀원분들이 넘나 친절하게 답해주셨다 🥺 감동

감동 잘 받는 편

 

 

 

 

 

 

 

📔 내가 작성한 workflow

name: CI

on: # main 브랜치에 push 혹은 PR이 발생했을 때 아래 기술한 작업들을 수행한다.
  push:
    branches: ['main']
  pull_request:
    branches: ['main']

env: # jobs에서 사용될 수 있는 전역 상수값을 선언하는 것이라고 이해하면 된다.
  CACHED_DEPENDENCY_PATHS: ${{ github.workspace }}/.yarn/unplugged
  DEFAULT_NODE_VERSION: '16'

jobs:
  job_continuous_integration: # job의 이름
    runs-on: ubuntu-latest # ubuntu 환경에서 실행할 것임을 명시
    steps:
      - name: Checkout current commit # action의 name은 맘대로 지어도 된다.
        uses: actions/checkout@v3 # 최근 commit에 checkout

      - name: Set up Node
        uses: actions/setup-node@v1 # node setup
        with:
          node-version: ${{ env.DEFAULT_NODE_VERSION }}

      - name: Compute dependency cache key # 캐싱 key를 계산한다.
        id: compute_lockfile_hash
        run: echo "::set-output name=hash::${{ hashFiles('yarn.lock') }}" 

      - name: Check dependency cache # key에 대한 캐시값이 있는지 확인한다.
        uses: actions/cache@v3
        id: cache_dependencies
        with:
          path: ${{ env.CACHED_DEPENDENCY_PATHS }}
          key: ${{ steps.compute_lockfile_hash.outputs.hash }}

      - name: Install dependencies # 일치하는 캐시값이 없을 경우 의존성을 새로 설치한다.
        if: steps.cache_dependencies.outputs.cache-hit == ''
        run: yarn install

      - name: Check lint # lint를 진행한다.
        run: yarn lint
    outputs:
      dependency_cache_key: ${{ steps.compute_lockfile_hash.outputs.hash }}

주석을 매우매우 자세히 달아뒀다. 참고가 됐으면 좋겠다!

✅ 잘 작동되는 지 확인하기

극 소심이인 나는 내가 작성한 워크플로우가 제대로 작동 안되면 어쩌지가 무척이나 걱정됐다 ^_^ 그렇지만 아무리 구글링을 해도 잘 작동하는지에 대한 방법은 나오지 않았다... 나같은 사람들을 위해 혹시 몰라 추가하는 내용

 

결론부터 이야기하자면, 레퍼지토리에 push를 하고, main 브랜치에 PR을 날리면 된다. 그 후 Actions 탭을 확인해보면 내 워크플로우가 잘 작동하는지 확인할 수 있다. 아래 사진 처럼 말이다.

 

workflow 자체에 문제가 있으면 Startup failure가 뜬다. (나는 실수로 중괄호 하나를 빼먹었었다.) workflow에는 문제가 없지만 내 코드가 CI를 통과하지 못했을 경우, 왼쪽에 X 아이콘이 뜬다. 클릭해보면 아래 사진처럼 왜 CI를 통과하지 못했는지, 각 step에 얼마의 시간이 소요되었는지도 확인할 수 있다.

 

 

 

+) 로컬에서 Github Actions를 테스트해볼 수 있는 툴도 존재한다.

https://github.com/nektos/act

GitHub - nektos/act: Run your GitHub Actions locally 🚀

사용해봤었는데, 도커에 문제가 있는건지 yarn 명령어가 실행이 안됐다. yarn 명령어 이전까진 테스트가 가능했다. 사용법이 그리 어렵지 않으니 필요하신 분들은 한 번 시도해보시길!

 

References

 github action cache 하기 
 React Native CI/CD using GitHub Actions - LogRocket Blog 
 Github Action에 대한 소개와 사용법 

 

 

매.우.뿌.듯. 넘나 재밌당