CICD

기본 기능 개발이 끝나고 배포를 준비했습니다. CICD는 일정에 없던 업무였지만, Github Action을 통한 자동 배포가 효율적일 것으로 판단했습니다. 팀원들과 논의 후 Github Action 기본을 학습하고 프로젝트에 적용했습니다.

개념

Github Action은 두 가지 구성으로 이루어져 있습니다.

Trigger는 작업을 촉발시키는 조건이고, Jobs는 촉발되었을 때 실행되는 작업입니다.

Trigger는 GitHub와 연관된 Event를 사용합니다. push, pr, issue, workflow-dispatch 등 다양한 Event를 다룰 수 있으며, 특정 조건으로 제한할 수 있습니다(예: pr을 열었을 때만 동작).

Jobs는 job > step으로 이어지는 하위 구조를 가지며, 최종 동작 단위를 Action이라고 부릅니다. Action은 GitHub에서 제공하거나 GitHub Marketplace에서 공유되는 것을 사용할 수 있습니다.

프로젝트에 필요한 조건을 정의했습니다.

1. PR을 Main으로 merge할 때 실행
2. Netlify와 연결하여 앱 배포

1번 조건을 위해 Main branch에서 PR이 닫히고 merge되었을 때만 동작하도록 제약을 설정했습니다.

2번 조건을 위해 Netlify 배포 action과 ubuntu에 node를 설치하고 dependency를 설치하는 action이 필요했습니다.

다음과 같이 코드를 구현했습니다.

name: build and deploy to Netlify
on:
  pull_request:
    types:
      - closed

jobs:
  build:
    if: github.event.pull_request.merged == true
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v4
      - name: setup-nod
        uses: actions/setup-node@v3
      - name: Cache Node.js modules
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{hashFiles('**/package-lock.json')}}
          restore-keys: |
            ${{ runner.os }}-node-
      - name: Install dependencies, build
        run: |
          npm ci
          npm run build
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v3.0
        with:
          publish-dir: "./dist"
          production-branch: "main"
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: false
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        timeout-minutes: 1

cache를 적용하여 재실행 시 성능을 개선했습니다. Netlify에서 토큰을 가져오고 GITHUB_TOKEN을 GitHub Secret에 등록하여 설정을 완료했습니다.

Trouble shooting

1. npm 자체 에러

배포 중 npm 에러가 발생했습니다.

https://github.com/npm/cli/issues/4828

issue에서 제안한 대로 package.lock.json과 node_modules를 삭제하고 재설치하여 해결했습니다.

결과

코드잇 프로젝트 진행 중에 겪은 경험들입니다.

문제가 되는 부분이 있다고 요청 주시면 삭제하겠습니다.

감사합니다.