[Github Workflows] - Vercel: Managing Deployments

Deploy to Vercel

• Vercel은 Next.js 프레임워크를 만든 회사로서 Next.js 및 Node.js 프로젝트에 대해 아주 편리한 CI/CD 환경을 제공한다
• Next.js를 공부하고 있는 프론트엔드 개발자라면 개인 프로젝트를 진행할 때 사용해본 경험이 있을거다.
• https://vercel.com 에 로그인 (깃허브를 사용한다면 깃허브 로그인을 권장) 하면 사용자의 깃 레포지트리의 특정 브랜치와 연동하여 해당 브랜치가 머지가 되었을 때 자동으로 **.vercel.app으로 배포가 된다
• 개별 프로젝트의 Settings / Domains 탭에서 해당 정보를 확인할 수 있다

---

Using Github Actions with Vercel

• vercel build 명령어를 사용하여 소스 코드에 대한 Vercel 액세스 권한을 부여하지 않고 애플리케이션을 로컬 또는 GitHub Actions에서 빌드할 수 있다
• Vercel은 프론트엔드 프레임워크를 자동으로 감지하고 Build Output API 사양을 준수하는 .vercel/output 폴더를 생성한다

Why? 이리 편한 걸 굳이 왜?

라고 물어본다면 아래 예시가 있을 수 있다

• 기본 Vercel 플랫폼 빌드 외부에서 빌드 프로세스를 사용자 정의하고 배포 워크플로우를 처리할 수 있는 유용한 방법이다
• 특히 빌드 프로세스를 더 세밀하게 제어하거나 기존 CI/CD 설정과 통합해야 하는 경우에 유용하다
• Vercel 배포의 CI/CD를 직접 건들고 배포 전후로 작업을 추가하고 싶은 경우, 깃허브 액션에서 기본 액션을 설정할 수 있다
• 나 같은 경우:
  - 배포 전 package.json의 버젼을 conventional commit 커밋 내역을 기준으로 작동 업데이트 및 커밋 작업을 vercel build 전 실행
  - Preview 배포를 dev 브랜치에서만 작업할 수 있도록 변경

---

Vercel Preview Deployment

name: Vercel Preview Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches-ignore:
      - main
jobs:
  Deploy-Preview:
    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=preview --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

Vercel Production Deployment

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 }}

---

Reference

• Vercel - Managing Deployments