본문 바로가기
C.W.K.
Stream
Lesson 07 of 13 · published

Vercel & Netlify

~9 min · vercel, netlify, preview

Level 0견습생
0 XP0/101 lessons0/10 achievements
0/120 XP to next level120 XP to go0% complete

Git-푸시 배포; CI는 보완 역할

Vercel이나 Netlify에 저장소를 연결해 두면 푸시할 때마다 자동으로 배포가 돼. 배포하려고 굳이 워크플로를 만들 필요는 없어. 워크플로가 해줄 수 있는 건 이런 거야:

  • 플랫폼에서 직접 돌리지 않는 배포 전 검사(링크 확인, 이미지 최적화 감사, 콘텐츠 검증).
  • 수동 승인이 있는 워크플로에서 배포 훅으로 Vercel이나 Netlify 배포를 실행.
  • 플랫폼이 배포를 마친 뒤 프리뷰 URL에 대해 스모크 테스트 진행.
  • 프리뷰 URL과 검사 요약을 담은 고정 PR 코멘트 남기기.

CI에서 Vercel CLI로 배포하기

CI가 배포를 명시적으로 제어하고 싶다면 이렇게 해:

vercel deploy --prebuilt --token=$VERCEL_TOKEN --prod

이렇게 하면 빌드와 배포를 분리할 수 있어. CI에서 먼저 빌드를 하고, 완성된 아티팩트를 Vercel로 푸시하는 거지.

Code

프리뷰 URL에 대한 스모크 테스트·yaml
  preview-smoke:
    if: github.event_name == 'pull_request'
    needs: vercel-deploy
    runs-on: ubuntu-latest
    steps:
      - name: Wait for Vercel preview
        uses: patrickedqvist/wait-for-vercel-preview@v1.3.2
        id: preview
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          max_timeout: 300
      - name: Smoke test
        run: |
          curl -fsS "${{ steps.preview.outputs.url }}/api/health"
          curl -fsS "${{ steps.preview.outputs.url }}/" | grep -q '<title>'

External links

Exercise

Vercel이나 Netlify로 배포할 때, 배포가 끝날 때마다 프리뷰 URL을 찔러서 중요한 엔드포인트나 페이지를 검증하는 스모크 테스트 작업을 추가해 봐. 스모크 테스트는 프리뷰에 의도치 않은 회귀가 섞여서 출시되는 걸 막아주는 가드레일 역할을 하니까.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.