Vercel에 Git조직 저장소 레퍼지토리 배포하기

발단

Vercel은 기본적으로 개인프로젝트만 무료로 배포가 가능하며, 팀 프로젝트의 경우 pro를 사용해야하며 이 경우 팀원 두당 추가 요금이 발생한다.

때문에 만약 GitHub에서 조직으로 만들어진 레퍼지토리의 경우 vercel에 연동하려고 하면 유료인 pro로 바꾸라고 한다.

이를 회피하기 위해 나는 github action을 사용해 직접 vercel에 배포하는 방법을 선택했다.

 

다른 방법으로는 조직 레퍼지토리를 개인 레퍼지토리로 fork 한 후, 이를 vercel와 연동하는 방법이 있는데, 결국 fork를 자동화 하려면 github action을 사용해야하고, 같은 내용인 레퍼지토리를 새로 만들어야되면서 뭔가 레퍼지토리가 분리되는것이 별로라고 생각해 위 방법을 택했다. 그리고 해보지는 않았지만, 원래의 레퍼지토리에서 작업한 사람이 vercel에 등록이 안되어있으면 오류가 뜰것 같기도 했다.

---

작업

우선 vercel에 가입하고, vercel에 배포할 프로젝트로 와서 vercel CLI를 사용해 초기 배포를 진행해준다.

npm install -g vercel

vercel를 설치하고

vercel login

vecel에 로그인한다.

 

내 경우 email을 선택해 로그인 처리했고, email 주소를 입력하면 인증 이메일이 오며, 내용에는 인증 번호와 링크가 있다.
인증번호를 복사 후, 링크로 들어가서 인증번호를 입력해주면 된다.

 

vercel

vercel 설정을 한다.

프로젝트 이름, 팀 선택, 빌드 및 배포 설정 등을 물어본다.

프로젝트 이름이 대시보드에 나오는 이름이고, 팀선택은 본인 계정이 선택으로 뜰것이며, 배포 설정의 경우 특별히 변경할게 없다면 n을 입력하여 추천해준 그대로 사용하면 된다.

vercel --prod

위 명령어가 vercel에 배포하는 명령어로, 이후 github action에서도 해당 명령어를 사용하여 배포한다.

 

이렇게 vercel에 초기 배포를 마쳤다면, 프로젝트에 .vercel/project.json 파일이 생성되어있다.

 

그리고 루투(최상단 경로)에 .github/workflows 폴더를 만들고, deploy.yml 파일을 만들어준다. (파일명은 달라도 된다.)

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:
      # 1. GitHub 저장소 코드 체크아웃
      - uses: actions/checkout@v2

      # 2. Node.js 환경 설정
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18 # 프로젝트에 맞는 Node.js 버전을 설정

      # 3. pnpm 설치
      - name: Install pnpm
        run: npm install -g pnpm

      # 4. Vercel CLI 설치
      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      # 5. Vercel 환경 정보 가져오기
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      # 6. 프로젝트 빌드
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      # 7. Vercel에 배포
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

위 코드는 vercel의 공식문서에 있는 코드를 가져온것이다.

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

How to Use GitHub Actions to Deploy to Vercel

 

위 코드에 있는 secret들을 github의 해당 레퍼지토리의 Settings > Secrets and variables > Actions 로 가서 New repository secret으로 등록해줘야한다.

VERCEL_ORG_ID 와 VERCEL_PROJECT_ID 는 앞서 언급한 .vercel/project.json에 나와있는 내용을 넣어주면 된다.

VERCEL_TOKEN 의 경우 vercel에서 오른쪽 상단의 본인 프로필을누르고, Account Settings를 선택하면 왼쪽에 Tokens 탭이 있다.
해당 탭에서 발급해주면 된다.

 

이렇게 설정을 마쳤다면 해당 프로젝트를 git의 main에 푸시 했을 때 github action이 동작하여 vercel에 배포를 하게 된다.

---

궁금증

위는 github action과 로컬 그리고 vercel에 git을 연동했을 때 차이점들에 대하여 gpt가 대답해준것이다.

 

앞서 내가 설명했던 방법은 local에서 vercel의 CLI를 사용해 배포했던 작업을 github action에서 했다고 보면된다.
그리고 vercel가 git과 연동된 경우에는 vercel의 서버에서 해당 작업을 한다고 보면된다.

 

참고로 github action의 경우 private 레퍼지토리는 2000분이 무료이다.

https://docs.github.com/ko/billing/managing-billing-for-your-products/managing-billing-for-github-actions/about-billing-for-github-actions

GitHub Actions 요금 청구 정보 - GitHub Docs

 

만약 github action의 사용시간을 보고싶다면 아래 글을 참고하자.

https://docs.github.com/ko/actions/monitoring-and-troubleshooting-workflows/monitoring-workflows/viewing-job-execution-time

작업 실행 시간 보기 - GitHub Docs