Vercle로 Tag Push 배포 자동화

2024. 3. 13. 10:44·CS
728x90

vercel을 이용해서 프로젝트를 배포하고 있었는데, main 브랜치에 푸시 될 때마다, 배포되는걸 원치 않아서 해당 내용을 개선해보고자 tag push 를통한 배포가 이뤄지게끔 수정하는 작업을 진행 해봤습니다.

Vercel 가이드에 굉장히 친절하게 나와있어서 해당 내용을 참고하여 작업을 진행했습니다.

 

Vercel 공식문서

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

  1. 프로젝트 root에 vercel.json 파일을 생성하고 git.deplymentEnabled 에 main 을 false로 변경 합니다. 자동 배포 브랜치가 main 이기 때문입니다.
{
	"git": {
    	"deploymentEnabled": {
    		"main": false
    	}
    }
}
  1. github actions 에 사용될 secret을 생성합니다.

  2. 전역으로 설치된 Vercel CLi를 이용하거나 개발환경에 설치된 Vercel Cli를 이용해서 vercel login을 진행 합니다.
    설치가 되있지 않다면 아래 커맨드를 실행 해주시면 됩니다.

1. yarn global add vercel 
2. yarn add -D vercel
  1. 로그인이 되었다면 vercel link 커맨드를 실행하여, 기존에 존재하는 프로젝트 또는 새로운 프로젝트에 연결 합니다. 연결이 완료되면 프로젝트 root에 .vercel 폴더가 생기게 됩니다.
    .vercel/project.json 파일을 확인해보시면 projectId, orgId를 확인할 수 있습니다.
  1. VERCEL TOKEN을 생성하도록 하겠습니다.
    VERCEL 사이트 로그인 -> 우측 상단의 프로필 아이콘 클릭 -> Account Settings에 진입하시면
    좌측 사이드 메뉴에 Tokens이 있습니다.

    이미지와 같이 설정을 하고 Create버튼을 클릭하면 토큰 발급이 완료됩니다.
  2. Github로 이동하여 자동배포를 진행할 레파지토리로 이동합니다.
    Settings -> Secrets and variables -> Actions 에 들어오시면
    아래쪽에 New repository Secret이 보이게 됩니다.
    위에 말씀드렸던 3가지 key를 추가합니다.

 

 

3. 레파지토리 Actions로 이동하여 New workflow -> set up a workflow youreself를 클릭하여 이동합니다.

내용에 vercel 가이드에서 제공해주는 내용을 붙여넣기 하고 커밋해줍니다.



위단계까지 다 진행이 되었다면, 프로젝트로 돌아가 레파지토리와 동기화를 시켜주고, 배포 하려는 커밋에 태그를 생성 해준 후 태그 푸쉬를 하면 완료입니다.

728x90
LIST

'CS' 카테고리의 다른 글

Git) GitHub 플랜 비교 및 CI/CD 도입 가이드  (0) 2025.01.08
Servlet(서블릿) & Servlet Container(서블릿 컨테이너) 이란?  (2) 2024.02.29
Tomcat Server 외부 접속 허용 방법  (1) 2024.02.26
CORS( Cross-origin Resourcs Sharing )  (2) 2024.02.26
HTTPS 인증서 만료되었을 경우  (1) 2024.02.26
'CS' 카테고리의 다른 글
  • Git) GitHub 플랜 비교 및 CI/CD 도입 가이드
  • Servlet(서블릿) & Servlet Container(서블릿 컨테이너) 이란?
  • Tomcat Server 외부 접속 허용 방법
  • CORS( Cross-origin Resourcs Sharing )
Mr. Joo
Mr. Joo
  • Mr. Joo
    삽질의 시작
    Mr. Joo
  • 전체
    오늘
    어제
    • 분류 전체보기 (180) N
      • Flutter (67)
      • Android (9)
      • Swift (4)
      • React (11)
      • 인공지능 (4)
      • CS (10)
      • 개발 뉴스 (72) N
      • IT 기기 (1)
      • 알면 유용한 정보 (2)
  • 인기 글

  • 태그

    플러터
    앱 개발
    Flutter 기초
    개발
    이슈
    기술
    개발 뉴스
    Flutter
    react
    Dart 기초
    오늘의 이슈
    앱개발
    개발 이슈
    android
    기술 뉴스
    오늘의 뉴스
    앱
    뉴스
    뉴스 모음
    DART
  • 최근 댓글

  • 최근 글

  • 250x250
  • hELLO· Designed By정상우.v4.10.3
Mr. Joo
Vercle로 Tag Push 배포 자동화
상단으로

티스토리툴바