Github Action과 설정방법 (Vercel 버전)

최종 수정 : 2025.05.08

■ GitHub Actions

GitHub 저장소에서 직접 CI/CD 워크플로우를 자동화할 수 있는 도구이다. 코드 변경 사항을 커밋하면 자동으로 테스트, 빌드, 배포 등의 작업을 수행할 수 있다.

---

1. Github Action 설정방법

1) 워크플로우 파일 생성

• 프로젝트 루트에 .github/workflows 디렉토리 생성
  cf) github 앞에 ' . '(점)을 꼭 붙여야 한다.

2) ci-cd.yml 파일 생성

• 생성한 디렉토리에 파일을 생성한다.
• (cf. 본인은 pnpm으로 프로젝트를 빌드)
  (cf. 본인은 Supabase를 사용)

# 워크플로우 이름 설정
name: CI/CD Pipeline

# 워크플로우가 실행될 트리거 설정
on:
  push:
    branches: [main]  # main 브랜치에 푸시할 때 실행
  pull_request:
    branches: [main]  # main 브랜치로 PR을 생성할 때 실행

# 실행할 작업들 정의
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest  # Ubuntu 최신 버전에서 실행

    steps:
      # 단계 1: 저장소 코드 가져오기
      - name: Checkout code
        uses: actions/checkout@v3

      # 단계 2: Node.js 환경 설정
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'  # Node.js 버전 18 사용

      # 단계 3: PNPM 설치
      - name: Install pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8  # PNPM 버전 8 사용
          run_install: false  # 아직 의존성 설치는 하지 않음

      # 단계 4: PNPM 캐시 경로 가져오기 (빌드 속도 향상)
      - name: Get pnpm store directory
        id: pnpm-cache
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

      # 단계 5: PNPM 캐시 설정 (빌드 속도 향상)
      - name: Setup pnpm cache
        uses: actions/cache@v3
        with:
          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-

      # 단계 6: 의존성 설치 (--frozen-lockfile 옵션 제거)
      - name: Install dependencies
        run: pnpm install  # 락파일이 없어도 의존성 설치 가능

      # 단계 7: 프로젝트 빌드
      - name: Build
        run: pnpm build
        env:
          # 환경 변수 설정 (GitHub Secrets에서 가져옴)
          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}

      # 단계 8: Vercel에 배포
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}  # Vercel API 토큰
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}  # Vercel 조직/팀 ID
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}  # Vercel 프로젝트 ID
          github-token: ${{ secrets.GITHUB_TOKEN }}  # GitHub 자동 생성 토큰
          vercel-args: '--prod'  # 프로덕션 배포 인수
          working-directory: ./  # 작업 디렉토리 (프로젝트 루트)
          github-comment: false  # PR 자동 코멘트 비활성화 (오류 방지)

 

github-comment: false를 작성하지 않으면

배포는 성공했지만, 배포가 실패한 것처럼 나타나기도 한다.

로그를 클릭해보면, 배포한 링크가 잘 열리는 것을 확인할 수 있다.

---

2. Vercel 프로젝트 설정

1. Vercel에 접속하여 프로젝트를 배포한다. // 배포를 먼저 성공해야 Github Action이 제대로 나타난다.
2. Vercel에서 해당 프로젝트 페이지로 이동한 다음 개발자 도구를 연다.
3. Network 탭을 선택하고, 페이지를 새로고침 한다.
4. Network의 Response 탭에서 teamId를 찾는다.

---

3. GitHub Secrets 설정

1. 프로젝트의 레포지토리 -> Setting -> Secrets and variables -> Actions 이동
2. "New repository secret" 버튼 클릭
3. 다음 시크릿 각각 추가

3-2번

Name에 각 항목들을 넣고, Secret에 찾은 실제 값을 넣는다.

a. VERCEL_TOKEN: Vercel 계정의 API 토큰
b. VERCEL_ORG_ID: Vercel 팀 / 조직 Id (2-4에서 찾은 teamId 값)
c. VERCEL_PROJECT_ID: Vercel 프로젝트 ID

NEXT_PUBLIC_SUPABASE_URL: Supabase URL (필요한 경우)
NEXT_PUBLIC_SUPABASE_ANON_KEY: Supabase 익명 키 (필요한 경우)

 

a. https://vercel.com/account/settings/tokens 에서 새로운 토큰을 생성하면 된다.

c. Vercel에서 해당 프로젝트의 Settings -> General에서 찾을 수 있다.
(동일한 곳에서 조금만 스크롤 내리면 b도 찾을 수 있다. 값을 비교해보면 동일하다.)