netlify & GitHub Actions 사용하기 (CI/CD)

netlify 로 배포가 된 React Project 를 진행하고 있는데, 매번 배포를 수동적으로 하려니 귀찮은 마음에 github actions 을 적용하여 지속적으로 배포를 해보려 한다.

---

GitHub Actions

GitHub Actions는 CI/CD와 같은 workflow를 자동화 할 수 있는 도구라고 설명되어 있는데, 쉽게 말해 GitHub 내 어떤 이벤트(push, pull, merge ...)가 발생하면 해당 이벤트에 대해 정해진 동작을 실행하게 하는 도구이다.

GitHub Actions 사용해보기

yml 작성 방법 소개

# test-every-push.yml

name: 'test-every-push'

on: push

jobs:
  test:
  	# job 이름 설정
    name: Test lint, tsc, build
    # 리눅스 환경에서 사용
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
		
      # 해당 환경을 Node.js 위에서 실행하겠다고 명시
      - name: Use Node.js
        uses: actions/setup-node@v2
        with:
          node-version: ${{ secrets.NODE_VERSION }}
		
      # 모듈 변화가 있을 때만 npm install
      - name: Cache node modules
        uses: actions/cache@v2
        id: cache
        with:
          path: node_modules
          key: npm-packages-${{ hashFiles('**/package-lock.json') }}

      - name: Install Dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm install

      - run: npm run build
        if: ${{ always() }}

• push를 할 때, 자동으로 build가 되게 설정을 하였다.

---

Commit을 Push 해보자.

임시로 Test Commit 을 push 하였다.
Push를 하자마자, 진행 중인 표시가 뜬다.
build 완료 시에는, 초록색으로 색이 변하는 것을 확인할 수 있다.

[진행중] main 커밋 내역

[진행중] Actions

[완료] main 커밋 내역

[완료] Actions

[완료] netlify

Test commit 내역이 Published 되었다고 netlify 에서도 역시 확인할 수 있다.

---

schedule 사용해보기

schedule event를 통해 workflow가 실행될 schedule을 정의

• cron 표현식 을 확인해볼 수 있다.

주의사항

• 원하는 시간에 정확히 이뤄지지 않을 수도 있음
  • /1 * * * -> 1분마다 실행되지 않음

on: 
  schedule:
    - cron: '*/5 * * * *'

---

REFERENCE

https://fe-developers.kakaoent.com/2022/220106-github-actions/