Vercel 태그 푸쉬로 배포하기

Vercel에서 하는 방법을 문서에 제공하고 있습니다.

https://vercel.com/guides/can-you-deploy-based-on-tags-releases-on-vercel

직접 한번해보겠습니다. 🫨

해보기

시작하기 앞서, 만약 태그로만 배포하려면 커밋 배포는 끄면 됩니다. 프로젝트의 루트 경로에 vercel.json을 아래 코드로 만들어주세요.

{
  "git": {
    "deploymentEnabled": {
      "main": false
    }
  }
}

이후 Vercel CLI 설치 및 로그인 그리고 링크를 만들어 줍니다.

brew install vercel-cli or npm i -g vercel
vercel login
cd {project_path} && vercel link

vercel link 를 프로젝트 폴더에서 입력해주시고 오게니제이션과 프로젝트를 설정해주세요.

❯ vercel link
Vercel CLI 32.5.0
? Set up “~/workspaces/side-projects/memozang”? [Y/n] y
? Which scope should contain your project? tolluset
? Found project “tolluset/memozang”. Link to it? [Y/n] y
✅  Linked to tolluset/memozang (created .vercel)

하고나면 .vercel 폴더에 프로젝트와 오게니제이션의 아이디가 있는 json 파일이 생성됩니다.

🧨 (주의) .vercel/project.json 파일은 커밋해서 퍼블릭한곳에 푸쉬하시면 안됩니다! Vercel에서 친절하게 자동으로 .gitignore에 추가해주니까 그대로 두시면 됩니다.

이후에 .vercel/project.json의 아이디 그리고 Vercel의 액세스 토큰을 아래와 같이 깃헙 시크릿에 추가해줍니다.

// 깃헙 프로젝트 레포에서 Settings > Secrets and variables > Actions > New repository secret
// {시크릿 변수명} = {넣는 값} 
// 한개씩 넣어주시면 됩니다.
VERCEL_PROJECT_ID = projectID
VERCEL_ORG_ID = orgID
VERCEL_TOKEN = vercelAccessToken

액세스 토큰은 아래 링크에서 Create Token 섹션에서 토큰 이름, 스코프, 만료 시간을 설정해서 만들어주시면 됩니다. 만들고 나서는 다시 안보여주니까 나오는 토큰 값을 복사주시면 됩니다.

https://vercel.com/account/tokens

• 액세스 토큰 예시

TOKEN NAME = github_tag_deploy
SCOPE = Full Account // 다른 스코프가 없더라구요..
EXPIRATION = No Expiration // 주기적으로 재발급을 해주실분들은 기간을 짧게 설정해주세요!

그리고 아래 코드를 .github/workflows/prd_tag_deploy.yaml 에 추가해주세요.

name: Production Tag Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    # Pattern matched against refs/tags
    tags:        
      - '*' # Push events to every tag not containing /
jobs:
  Deploy-Production:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - 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에서 잘 동작하는 걸 볼 수 있습니다!

마무리

배포 프리뷰도 똑같이 동작하고 좋네요.

태그주의자들에게 이런 설정에 대한 귀찮음은 감수해야하는 걸까요...