Vercel로 배포하기

1TBhard·2022년 12월 27일
0

vercel은 nextJS 만든 곳으로 유명한 회사로 미국 클라우드 플랫폼이다.

이번에 포트폴리오 사이트를 nextJS로 만드는 김에 배포도 vercel을 이용하고자 했다.

먼저 이용한 후기는 정말 편했다.

그리고 nextJS 뿐만 아니라 Vite, Nust, Remix 등 다양한 프레임워크에 대한 프리셋을 제공했다.

원래 배포는..

이전 회사에서는 배포 환경이 이미 구축한 상태라 master 브랜치에 올라가기만 한다면 AWS 빌드 파이프라인이 자동으로 배포해주었다.

하지만 지금은 퇴사한 이후로는 빌드하기 위해서 내가 손수 모든 과정을 해야하는 번거로움이 있었다.
전 회사에서의 파이프라인이 수행한 일을 간략하게 설명하자면 아래와 같다.

  1. master 브랜치로 merge
  2. 기존의 빌드 파일 제거
  3. node 설치, 패키치 설치
  4. 프로젝트 빌드
  5. 빌드된 파일을 s3에 등록
  6. s3에 등록된 파일을 cloud front에 게시

이러한 과정들을 vercel의 배포는 간단하게 해결해준다.

Vercel 배포하기

원격 저장소에 master(main) 브랜치 push

먼저 github, gitlab 등 원격 저장소에 완성된 코드를 push해야한다.

새 Vercel 프로젝트 만들기

먼저 vercel의 계정이 있어야한다.(가입 과정에서 결제관련한 정보는 입력되지 않아서 좋았다.)

가입을 한 후에 다음과 같은 화면에서 Add New 버튼을 눌러 새로운 Vercel 프로젝트를 생성한다.

해당 버튼을 누르면 원격 저장소의 Repo 목록이 나오고 배포를 원하는 프로젝트를 import버튼으로 선택한다.

해당 프로젝트에 대한 설정을 해준다.

각 설정은 덮어씌울 수 있으며 설명은 아래와 같다.

  • Project Name
    • 프로젝트명으로 만들어질 프로젝트의 URL에 영향을 준다.
    • 프로젝트명-{작성자_계정}.vercel.app으로 URL이 형성된다.
  • Framswork Preset
    • 프레임워크 프리셋 설정(Remix,Nuxt의 프레임워크를 쓰면 알맞게 설정해아한다.)
  • Root Directory
    • 루트 디렉토리에 대한 설정이다.
  • Build and Output Settings
    • Build Command
    • Output Directory
      • 컴파일 된 코드가 위치할 디렉토리
    • Install Command
      • 패키지를 설치할 때 명령어
      • yarn 사용시 yarn install을 npm 사용시 npm install을 입력한다.
  • Environment Variables
    • 환경변수 설정이다.

여기까지 설정후 Deploy버튼을 누르면 Vercel에서 알아서 빌드가 된다.

이렇게 반들어진 Vercel 프로젝트는

  • 원격 저장소의 master 브랜치에 커밋이 쌓일 때 마다 Vercel에서 배포를 해준다.
  • 빌드에 성공하면 github 페이지의 좌측의 About에 빌드된 페이지 링크가 생긴다.

hobby 등급의 제한

추가로 비용을 지불하지 않은 계정은 hobby 등급으로 시작하며
그 제한은 아래와 같다.

  • 배포
    • 하루에 최대 100번
  • Serverless 함수
    • 배포당 최대 12번
    • 실행시간은 10초 이내여야함
  • redirection(원래 요청한 것과 다른 URL로 보내는 것)
    • 프로젝트당 최대 1024번
  • 팀멤버 불가
  • 동시 빌드
    • 1개
  • 용량
    • 13GB까지

참조

profile
기억을 넘어 습관으로

0개의 댓글