[CI/CD] Vue.js GitHub Actions 적용기 #2 (test)

https://honggom.tistory.com/199

[CI/CD] GitHub Actions 적용기 #1 (Front-prod)

이전 글에서는 prod의 워크플로우를 다뤘고, 이번 글에서는 test 워크플로우를 다룬다.

 

test의 워크플로우는 prod의 워크플로우에 비해 간단하다. test는 tag가 push됐을 때를 제외하고는 매번 동작하는데, 따로 build된 소스를 업로드 하거나 push, commit 등의 과정이 없기 때문에 그냥 lint, build를 해보는 과정에만 초점이 잡혀있다.

 

test의 워크플로우

1. push되면 동작
2. repository checkout
3. node setup 및 cache
4. ci
5. lint
6. build
7. send slack message

---

1. push되면 동작

name: test
on:
  push:
    branches: '**'
    tags-ignore: '**'

tag를 제외한 push발생 시 test 워크플로우가 동작한다. tag를 ignore한 이유는 만약 ignore를 하지 않을 시 불필요하게 prod와 중복하여 워크플로우가 동작하기 때문이다.

 

 

2. repository checkout

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@main

prod와 동일하다. (GitHub Actions에서 제공하는 actions/checkout을 사용하면 해당 repository로 checkout한다.)

 

 

3. node setup 및 cache

- name: setup node
  uses: actions/setup-node@main
  with:
    node-version: 16
    cache: 'npm'

prod와 동일하다. (node setup과 의존성 cache도 그냥 플러그인을 가져다가 쓰면 되고 환경에 맞게 버전과 같은 변수만 설정해주면 된다. 이렇게 하면 해당 워크플로우 환경에 명시된 버전으로 node가 설치되고 cache도 알아서 해준다.)

 

 

4, 5, 6 : ci, lint, build 

- name: ci
  run: npm ci

- name: lint
  run: npm run lint

- name: build
  run: npm run build

test 워크플로우가 동작해야 되는 실질적인 이유가 이것이다. lint와 build를 실행해서 소스의 오류 여부를 파악한다.

 

 

7. send slack message

- name: send slack message
  uses: 8398a7/action-slack@v3
  if: always()
  with:
    status: ${{ job.status }}
    fields: repo,message,author,ref,workflow,took
    author_name: ''

lint, build의 결과를 슬랙을 통해 알려준다.

 

-워크플로우 끝-

---

test의 워크플로우는 prod에 비해 간단하고 내용 또한 비슷하기 때문에 크게 어려운 부분이 없었다.