Skip to content

03. CI·CD 환경 구성

Jump to bottom
pozafly edited this page Sep 8, 2023 · 4 revisions

개요

GitHub Actions를 사용해 코드를 빌드하고 vercel에 배포합니다.


캐싱

캐싱은 CI 환경에서 중요한 부분을 차지합니다. GitHub Actions가 트리거 되어 배포 되기까지 일련의 과정에서 소모되는 시간을 캐싱을 통해 줄일 수 있습니다.

그 중 GitHub Actions의 restore-keys 옵션에 대해 궁금한 점이 생겨 이에 대해 'GitHub Actions 캐시 조금 더 다뤄보기 (feat. restore-keys)' 글에 실험한 내용을 자세히 적어두었습니다.


흐름

  1. 코드가 main 브랜치에 push 되면 GitHub Actions가 트리거 됩니다.
  2. 러너 환경을 ubuntu로 설정합니다.
  3. GitHub의 코드를 러너 환경으로 가져옵니다.
  4. .nvmrc 파일을 기준으로 node 버전을 설정하고, 설치합니다. 설치한 node는 캐시 됩니다.
  5. 빌드 시 필요한 캐시 데이터를 가져옵니다. node_modules, .next, .vercel 3가지 파일이 캐싱의 대상입니다.
  6. vercel CLI를 설치합니다.
  7. vercel CLI를 이용해 pull, build, deploy를 순차적으로 실행합니다.
  8. 성공 혹은 실패 메시지를 slack webhook을 통해 개인 workspace로 전달합니다.

아래는 프로젝트에 적용한 .github/workflows/deploy.yml 입니다.


name: Deploy
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches: main
jobs:
  Deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version-file: '.nvmrc'
          cache: npm
      - uses: actions/cache@v3
        id: npm-cache
        with:
          path: |
            **/node_modules
            **/.next
            **/.vercel
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

      - uses: 8398a7/action-slack@v3
        with:
          status: ${{ job.status }}
          fields: repo,message,commit,author,eventName,workflow,job,took
        env:
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
        if: always()

vercel CLI

1. vercel pull

환경 변수 및 프로젝트 설정을 로컬 캐시(.vercel/.env.$target.local.)에 저장하는데 사용합니다.

image

이렇게 npm i -g vercel 후, vercel pull을 받으면 환경 변수를 가져옵니다.

이런 명령을 사용하지 않는 경우 vercel pull을 실행할 필요가 없습니다. 따라서, GitHub Actions에서는 매번 환경변수가 필요하기 때문에 가져와 주어야 합니다.

vercel에서 환경 변수 또는 프로젝트 설정이 업데이트된 경우, vercel pull을 다시 사용해 로컬 환경 변수 및 프로젝트 설정 값을 .vercel/ 에서 업데이트해야 합니다.

2. vercel build

빌드 아티팩트는 빌드 출력 API에 따라 .vercel/output 디렉토리에 배치됩니다.

여기서 Artifacts 라는 용어가 등장하는데, 이는 환경 변수 + 컴파일된 코드 를 빌드 해 탄생하는 자료들을 뜻합니다. 즉, Artifacts 라는 용어는 빌드 결과물인 것. output 아래 생성되는 모든 파일들을 뜻하는 단어입니다.

image

생성되는 파일은, Next.js 소스 코드가 전부 빌드된 모습을 볼 수 있다. 그렇다면 vercel build 명령어는 내부적으로 빌드 명령어를 수행합니다.

image

husky 를 실행하는 것을 보아, git hook이 실행 되었는데, 패키지를 다운 받습니다. 위 사진을 보면, package-lock.json 파일을 기준으로 패키지를 다운 받고 있는 것을 볼 수 있습니다.

따라서, vercel build 명령어에서 패키지를 다운 받고 있으므로 npm ci 혹은 npm install 명령어는 GitHub Actions에는 따로 필요가 없습니다.

3. vercel deploy

단순 배포 명령어입니다. --prebuilt 명령어를 붙여주고 있는데, 로컬에서 빌드된 파일을 Vercel에 직접 업로드 하는 옵션입니다. Vercel 서버에서 다시 빌드하는 단계를 생략하는 옵션입니다. 이로 인해 배포 시간을 단축시킬 수 있습니다.

기본적으로 vercel deploy 명령어는 vercel 서버에서 프로젝트를 빌드한 후 배포하는데 --prebuilt 옵션을 사용하면 로컬에서 빌드된 파일을 업로드 하기 때문에 vercel 측의 배포 속도를 높여주는 옵션입니다.

Clone this wiki locally