github action 사용해보기

요즘 채용공고를 보거나 주변의 개발자 지인들에게 얘기를 들어보면, github action을 사용해서 자동 CI/CD를 적용하는 경우가 많은 것 같다. 하지만 나는 일년반 실무 경험을 쌓으면서 한번도 이런 기능을 사용해본 적이 없다.😅

며칠 전부터 2년전에 만든 포트폴리오 사이트, 작년 하반기에 만든 개인 프로젝트의 마이그레이션을 진행하고 있다. github action을 사용해보고 싶어서, 개인 프로젝트들의 마이그레이션 과정에서 자동 CI를 적용해보았다. 2개의 프로젝트 모두 이미 vercel로 배포된 상태이고 vercel이 CI/CD를 전부 해주기 때문에, github action은 코드 품질검사에 대한 CI만 진행하도록 만들었다.

---

github action 적용과정

일단 로컬의 루트에 /.github/workflow 라는 폴더를 만들고 ci.yml 파일을 생성했다.

yml 파일은 이번에 처음 알게 되었는데, "YAML 형식으로 작성된 설정 파일" 이라고 한다.

확장자는 보통 yml 또는 yaml 이라고 하고, 기본 구조는 아래처럼 된다.

name: 워크플로우 이름

on: 언제 실행할지

jobs:
  작업이름:
    runs-on: 어떤 OS에서 실행할지
    steps:
      - 순서1
      - 순서2
      - 순서3

• name: 이 파일이 무슨 작업을 하는건지 식별하기 위한 이름이다. GitHub Actions 탭에서 보이는 워크플로우 이름. 기능에는 영향이 없음.
• on: 해당 작업이 언제 실행될지를 나타낸다. 특정 브랜치로 푸시되거나 PR을 통해 머지되는 시점을 작성하는 등, 어떤 이벤트가 발생됐을때 실행할지 정의하는 부분이다.
• jobs: 무슨 작업을 자동으로 실행할지, 큰 작업 단위를 작성한다.
• runs-on: 해당 작업을 어떤 운영체제에서 실행할지 작성한다. 주로는 GitHub가 제공하는 가상 머신 OS를 지정한다. 보통은 ubuntu-latest 라고 많이 쓰는데, GitHub가 제공하는 가상 실행 환경 중에서 웹 프론트엔드 프로젝트에 가장 안정적이고 표준적인 환경이라서 사용한다.
• steps: 어떤 작업들을 순서대로 실행할지 작성한다. 위에서 아래로 순차적으로 실행하고, 하나라도 실패하면 jobs 전체가 실패한다.

---

트러블슈팅

github action 적용과정에서, 개인 프로젝트가 CRA 명령어로 만든 React-ts 프로젝트인데 의존성 설치 명령어를 npm install 가 아닌 npm ci 라고 적었다가 에러가 났었다. node.js 버전도 로컬에는 24버전이 설치되어있는데, yml 파일에는 20이라고 작성된 상태였다.

실제 로컬에서 웹서버를 띄웠을 때랑 일치하는 명령어와 node.js 버전으로 수정해서 다시 푸시했더니 에러가 해결되었다.

지금은 develop 브랜치에만 적용된 상태인데, 나중에 마이그레이션 진행하며 현재의 CRA를 vite로 변환하고, PR 열어서 메인 브랜치로 merge했을 때에도 문제가 없어야 할텐데 걱정된다.

일단 1차적인 github action 적용은 끝!

https://github.com/yjinn0813/nimbus/blob/develop/.github/workflows/ci.yml

nimbus/.github/workflows/ci.yml at develop · yjinn0813/nimbus