Github Actions 와 Vercel 을 활용해 개발하고 있는 블로그의 배포 프로세스를 설정해보려고 한다.

기본적으로 Vercel 은 브랜치에 Push 하면 자동으로 배포가 진행되지만,
나는 내가 설정한 방식으로 동작하는 프로세스를 원했다.

따라서, 브랜치 전략과 Vercel 의 배포 생명주기에 맞는, Github Actions 를 통해 제어되는 배포 프로세스를 만들어보려고 한다.

Vercel 의 배포 생명주기

Vercel 의 배포 생명주기를 보면, 총 6단계로 구성되어 있다.

1. Local Development: 개발
2. Commit and build: Github 등의 저장소에 푸시 → 빌드 시작
3. Preview: 빌드 성공 → 프리뷰 배포 생성
4. Production: 프로덕션 배포 생성 ( main 브랜치에 푸시된 경우 )
5. Retention: 일정 기간 보관
6. Recovery: 복구 기간 내 복구 가능

이 중 나는 빌드하고 배포(Preview, Production)하는 3, 4단계의 동작을 제어해보려고 한다.

실제로, Vercel 설정에서 Preview 와 Production 환경의 환경 변수를 각각 설정할 수 있다.
이를 사용해서 env.local env.production 도 Vercel 과 동일하게 유지할 수 있다.

브랜치 전략

지금은 개인 블로그 만들기 프로젝트이기 때문에 다음과 같은 브랜치 전략을 사용했다.

• feature/기능명: 새로운 기능 개발
• dev (main): 개발 브랜치. feature 를 dev 로 병합
• release: 실제 운영 배포

이 전략을 다음과 같이 Vercel 의 배포 생명주기와 연계하려 한다.

• feature 브랜치 → 로컬 환경
  • 별도의 Vercel 을 통한 배포를 진행하지 않는다.
  • 로컬에서 확인한다.
• dev 브랜치 → Preview 배포
  • dev 브랜치로 병합된 작업을 기반으로 Preview 배포를 생성한다.
• release 브랜치 → Production 배포
  • Preview 로 검증이 되면, release 배포로 병합해 Production 배포를 생성한다.

Vercel 설정하기

Vercel 과 Github 를 연동하면 내 커밋 Push 를 기반으로 빌드가 진행되고,
Preview 혹은 Production 배포가 진행된다.

이 자동화를 꺼줄 필요가 있다.

Vercel 프로젝트의 Settings - Git 페이지를 보면, 아래와 같이 Ignored Build Step 이 있다.
이것을 아무것도 하지 않도록 Don't build anything 으로 바꿔준다.

그러면, 커밋 Push 를 하더라도 어떤 빌드 과정이나 배포 프로세스도 동작하지 않는다.

그리고, Github Actions 동작을 위해 Vercel 의 토큰을 발급받아야 한다.
Account Settings - Tokens 의 Create Token 으로 이동해 토큰을 발급받는다.

워크플로우 작성

배포 동작은 dev 혹은 release 브랜치로 병합되었을 경우 동작하도록 설정하면 된다.
그리고 Vercel CLI 를 이용하면, —prod 로 Production 배포를 설정할 수 있다. ( 없으면 Preview )

name: Deploy to Vercel

on:
  push:
    branches:
      - dev
      - release

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'

      - name: Install Vercel CLI
        run: npm install -g vercel

      - name: Deploy to Vercel
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
        run: |
          if [ "${{ github.ref }}" == "refs/heads/release" ]; then
            echo "Deploying Production..."
            vercel deploy --prod --yes --token $VERCEL_TOKEN
          else
            echo "Deploying Preview..."
            vercel deploy --yes --token $VERCEL_TOKEN
          fi

Vercel Action 이 있었는데, 문서를 읽어보면서 CLI 기반으로 작성했다.
이게 더 쉽고 간단한 방법인 것 같다.

마무리

생각보다 간단하고 쉽게, 내 입맛에 맞는 배포 프로세스를 설정할 수 있다.

아직은 개발, 프로덕션 별로 다른 환경 변수가 없지만, 점차 필요성이 커질 것이다.
Vercel의 환경 변수 설정을 활용하면 개발 및 운영 환경 간 설정 차이를 관리하고, 배포된 상태에서 dev와 release를 비교할 수도 있게 됐다.