Github Actions로 CI/CD 구축해보기 (with Jest)

기존 프로젝트 활용 & 목표

이번 목표는 main에 머지하거나 PR을 올릴 때 Github Actions을 동작하게하는 것이다.
CI/CD와 github Actions 이해를 위한 학습으로 따로 프로젝트를 만들지는 않았다. 대신 평소에 알고리즘 문제를 풀고 올리고 있었던 코딩테스트 문제풀이 레포지토리를 사용했다.

javascript로 푼 문제를 올려 간단한 test를 넣어 실행해보기 딱 좋은 레포였다. 복습을 할 때 직접 문제푸는 사이트에 들어가지 않아도 test case를 활용할 수 있기에 코테 문제푸는 레포를 이용하기로 했다.

---

Github Actions

1. 개념

github actions에서 가장 중요한 5가지 키워드이다. 
 
Events

• 어떤 일이 일어났는지 지정한다.
• pr을 main 브랜치로 머지, 커밋을 푸쉬, 이슈를 누군가 열면 등등 ~ 의 이벤트

Workflows ---- On Runners ⚙️

• 어떤 일을 수행했으면 좋겠는지~?
  • Jobs
    
    • Workflows 안에는 하나 또는 다수의 Job이 있다.
    • Job은 병렬적으로 수행되지만 순서대로 수행 하도록 할 수도 있다.
    • shell script를 사용해서 각 step을 수행할 수 있다.
    • 여기에서 Actions를 사용할 수 있다.
      • github actions를 통해 CI/CD를 할 때 흔하게 사용하는 다양한 명령을 action으로 수행하는 것이다.
      • npm에서 다른 사람의 라이브러리를 가져다 쓰는 것처럼 actions를 가져다 쓸 수 있다.

 

2. 설정 하기

project 경로 안에서
.github/workflows/WorkflowNAME.yml
을 만들어 설정한다. 
 

셋팅에 대한 설명

기본적인 내용들

 
이제 실재로 Actions를 셋팅해보았다. 
 
actions Tab에서 참고하여 설정하기.

레포지토리에서 "Actions" 탭을 누르면 아래같은 화면이 나온다.
파일을 직접 작성할 수도 있지만 프로젝트의 언어와 파일에 대해 추천 설정을 보여준다. 
 
나는 Node.js를 검색해서 선택하여 이를 토대로 작성했다.

 

 
내 프로젝트는 코딩테스트 문제만 올린 프로젝트였기 때문에 배포는 제외했다.
 

3. Workflow 동작 확인

 
이렇게 YAML 파일을 작성한 뒤 커밋해주면 현재 셋팅되어있는 main branch를 테스트해준다.
아코디언의 각 화살표를 누르면 어떤 내용이 통과/미통과 되었는지 알 수 있다.
내가 작성해준 테스트코드 2개가 통과되었다는걸 볼 수 있다.

 
 
그리고 현재 main 브랜치에서 테스트 코드가 모두 통과되었으니 체크표시와 함께 Verified tag가 달린 것을 확인헀다. 
 

 
 

주의해야 할 점

test code도 모두 통과된 것을 보고 main에 올렸는데, github actions에서는 위에서 체크표시 된 "Run npm test"가 통과되지 못했었다.
에러 메세지는 아래의 내용이었다.
 

npm ci can only install packages with an existing package-lock.json or npm-shrinkwrap.json with lockfileVersion >= 1
 

그 이유는 나는 Yarn을 사용했었는데 npm 을 사용하지 않을 때 이런 일이 발생한다는 것이었다. 
 
기존 코딩테스트 프로젝트에는 yarn.lock파일 만 있었기 때문에 간단하게 npm install을 실행하여 package-lock.json 파일을 만들어 main에 올려 해결하였다.
 
 

TODO

간단한 javascript 파일을 test하는 workflow를 만들어보며 github actions를 직접 설정해보았다.
action을 가져다 쓸 수도 있어서 YAML 생각보다 간단했다. (간단한 프로젝트이기도 하지만..ㅎ)  React를 사용해서 컴포넌트를 테스트하는 것에도 관심이 있는데, CI 뿐만 아니라 배포를 하는 것까지도 해봐야겠다.

---

 
 

GitHub - hyojin916/practice-problems: 코딩테스트를 연습해보자

 

Workflow syntax for GitHub Actions - GitHub Docs