Fandom-k 프로젝트 회고3

CICD

기본적인 기능이 끝나고 배포를 할 차례였다. CICD는 일정에 없던 업무였는데 기본적인 기능이 끝나기도 했고 Github Action을 통해서 자동 배포를 하면 훨씬 편해지지 않을까 하는 생각이 들어서 팀원들과 이야기 후 고민을 시작하였고 우선 Github Action을 알아야 적용을 할 수 있다는 생각에 Github Action 기본을 학습한 후에 프로젝트에 적용하였다.

개념

여러가지 이론이 있지만 간단하게 설명해보면

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

Trigger와 Jobs이다.

Trigger는 말그대로 무언가를 촉발시키는 것이고

Jobs은 촉발되었을 때 작동되는 무언가이다.

Trigger에는 Event가 존재하는데 깃허브와 연관된 Event 들이다. push, pr, issue, workflow-dispatch 등등 많은 Event 들을 다룰 수 있으며 제한을 걸어둘 수도 있다. (pr을 열었을 때만 동작하는 것처럼)

Jobs에는 job > step으로 이어지는 하위 구조들이 존재하며 최종적으로 하는 작은 단위의 동작들을 Action이라고 부른다. 이 action은 github 자체에서 만든 것들도 있고 라이브러리처럼 github marketplace라는 곳에 올려놓고 나누는 action들도 존재한다.

이 프로젝트를 위해선 어떻게 해야할지 먼저 정의를 해야했다.

1. PR을 올려서 Main으로 merge를 할 때
2. Netlify와 연결되어 앱을 배포해야한다.

1번 조건을 위해선 Main branch라는 제약과 PR이 닫혀야 한다는 제약, 거기에 merge시에만 동작한다는 제약이 동시에 들어가 있어야 한다.

2번 조건을 위해선 Netlify로 배포하는 action과 ubuntu에 node를 set-up하고 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: $-node-$
          restore-keys: |
            $-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: $
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: false
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: $
          NETLIFY_SITE_ID: $
        timeout-minutes: 1

cache를 적용해서 재실행시 성능을 늘렸다. netlify에서 토큰들을 가져오고 GITHUB_TOKEN을 github에서 가져와서 github 설정의 secret에 넣어놓으면 종료되는 작업이었다.

Trouble shooting

1. npm 자체 에러

배포중 npm 자체의 에러가 존재했다.

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

issue에서 제안하는 대로 package.lock.json과 node_modules를 삭제하고 다시 설치 후 진행하여 성공하였다.

결과

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

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

감사합니다.