Github Actions 사용해보기

https://ldd6cr-adness.tistory.com/309

Github Actions란 뭘까

 

목차

1. 워크플로우 파일 생성

2. ESLint 및 Prettier 통합

3. 빌드 성공한 모습

---

1. 워크플로우 파일 생성

레포지토리의 루트 디렉토리에 .github/workflows/ci.yml 파일을 생성하고 내용을 작성한다.

// ci.yml

name: CI

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

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

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18"

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test -- --coverage

 

 

github 저장소에 위 내용을 push 하면 Actions 탭에서 워크플로우 실행 상태를 확인할 수 있다.

짜잔 빌드 실패!

 

 

현재 빌드가 실패하는 이유는 테스트 코드가 없어서이다.

이렇게 자세한 내용을 볼 수 있는데, 중간에 No tests found, exiting with code 1이라는 문구를 볼 수 있다.

 

원래라면 테스트 파일을 작성해주는 것이 맞지만 그건 다른 실습으로 진행해보고 여기서는 테스트를 건너뛰는 키워드를 넣어주자

 

--passWithNoTests옵션은 테스트파일이 존재하지 않을 때 테스트를 건너뛸 수 있는 옵션이다.

 

 

---

2. ESLint 및 Prettier 통합

코드 품질 유지를 위해 ESLint와 Prettier도 워크플로우에 통합해보자.

이런 식으로 몇 줄 추가해주면 된다.

 

또한 package.json에도 스크립트를 추가해줘야한다.

 

이걸 안하면 npm error Missing script: "lint"이런 에러로 빌드가 안된다.

 

---

3. 빌드 성공한 모습

이런식으로 내가 push할 때마다 자동 테스트가 진행된 걸 확인할 수 있다

 

 

 

 

참고

GitHub Actions를 활용한 CI/CD 파이프라인 구축

GitHub Actions를 활용한 CI/CD 파이프라인 구축