CI/CD - vercel 배포 & CD 워크플로우 커스텀 설정

김선은·2024년 6월 25일
0

GitHub Actions이란?

GitHub에서 제공하는 CI/CD(Continuous Integration and Continuous Deployment) 플랫폼입니다. 이를 통해 개발자들은 자동화된 워크플로우를 생성하여, 코드 변경 시 자동으로 빌드, 테스트, 배포 등의 작업을 수행할 수 있습니다.
GitHub Actions는 단순한 DevOps를 넘어 리포지토리에서 다른 이벤트가 발생할 때 워크플로를 실행할 수 있도록 합니다.

주요 기능

자동화된 워크플로우:

코드 저장소의 이벤트(예: 푸시, PR 생성, 이슈 생성 등)를 트리거로 하여 다양한 작업을 자동으로 실행할 수 있습니다.

CI/CD 파이프라인 구축:

코드를 푸시하거나 PR을 생성할 때, 자동으로 빌드, 테스트, 린트, 배포 등의 작업을 수행할 수 있습니다.


문제상황

  • 깃허브 액션과 워크플로우의 ci.xml 파일을 작성하여 CI를 추가했습니다.
  • CI 과정의 Lint가 실패했는데도 버셀에서는 배포가 되는 문제가 있었습니다.

    버셀의 배포는 Production과 Preview가 있습니다. 프로덕션(Production) 배포는 main, master 브랜치와 같은 기본 브랜치의 변경 사항이 배포됩니다.
    프리뷰(Preview) 배포는 기능 브랜치의 push, PR, merge 등의 상황에 생성되며 임시 도메인을 가집니다.

버셀 프로젝트 페이지

PR의 버셀

PR의 CI

접근하기

main 브랜치로 PR이나 merge가 있을 때만 배포되는 줄 알았는데, 그렇지 않았습니다. PR이 생성되면 Vercel이 PR 브랜치를 배포합니다. 그래서 CI가 실패했는데도 Vercel에서 PR 브랜치가 Preview 배포가 이루어진 것입니다.

일단 버셀의 자동배포를 끄면 되지 않을까 싶었지만 그런 설정은 버셀에 없었습니다.
github actions ci/cd Vercel 로 검색해보니 버셀의 문서가 있습니다.

https://vercel.com/guides/how-can-i-use-github-actions-with-vercel

위 문서를 따라 CD 워크플로우를 추가해보겠습니다.

Vercel 배포에서 GitHub Actions를 사용하여 CD 워크플로우 커스텀 설정하기

cd.yml 파일 작성

  • 문서의 <Vercel 프로덕션 배포를 생성하는 GitHub 작업> 으로 안내된 코드 사용
name: Vercel Production Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches:
      - main
jobs:
  Deploy-Production:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - 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 }}

Vercel CLI 설치와 진행

맥북 터미널이나 윈도우 파워쉘에서

npm i -g vercel

vercel login

프로젝트 내의 터미널에서

vercel link

  • 프로젝트 루트 폴더에 .vercel/project.json 폴더와 파일이 생깁니다.
  • 이곳에 적힌 projectId와 orgId을 깃허브 레포지토리 설정의 환경변수로 등록합니다.

버셀 토큰 발급하기

  • 버셀의 계정 설정 (Account Settings) 페이지
  • Tokens에서 Create Token

깃허브 레포 Secrets 환경변수 등록

Github Repository의 Secrets은 환경 변수를 암호화해서 저장할 수 있습니다. 해당 기능은 Actions를 트리거할 때, 환경 변수를 가져오기 위해 사용할 수 있으며 로컬의 .env 파일과 같은 기능입니다.`

  • Settings -> Secrets and variables -> Actions 에서 Secret 등록하기
  • vercel link로 생긴 파일의 값으로 VERCEL_ORG_ID & VERCEL_PROJECT_ID 등록하기
  • 버셀 토큰 발급한 것도 VERCEL_TOKEN으로 등록하기

이제 CI 과정을 거쳐서 CD가 이뤄지고, main에 push가 발생하면 자동으로 배포를 합니다.

profile
기록은 기억이 된다

0개의 댓글