Learn

첫 번째 프로젝트 배포하기

Vercel

Git 레포에서 .vercel.app URL까지, 단계별 가이드.

Git 레포가 있고 실제 URL에서 실행되는 것을 보고 싶은가요? 이 레슨에서는 두 가지 경로를 안내해 드려요. Vercel 대시보드(빠르고 시각적)와 CLI(터미널에서 편리하게). 두 방법 모두 몇 분 안에 작동하는 .vercel.app URL로 이어져요.

Vercel 대시보드를 통한 방법 (Git 임포트)

첫 번째 배포에 가장 빠른 방법이에요. 모든 과정이 브라우저에서 이루어져요.

1. 계정 생성 및 Git 연결

vercel.com/signup으로 이동해 GitHub, GitLab, Bitbucket으로 회원가입하세요. Vercel이 이 계정을 사용해 레포에 접근해요.

2. 레포 임포트

대시보드에서 Add New... > Project(오른쪽 상단 버튼)를 클릭한 다음 Import Git Repository를 클릭하세요. Vercel이 Git 계정에서 접근 가능한 모든 레포를 나열해요. 배포하고 싶은 것을 선택하세요.

3. 설정 및 배포

설정 페이지에서 Vercel이 프레임워크(Next.js, Vite, SvelteKit 등)를 자동으로 감지하고 빌드 명령어를 미리 채워줘요. 대부분의 경우 변경할 필요가 없어요.

Deploy를 클릭하세요. Vercel이 프로젝트를 빌드하고 배포해요. 프로젝트 크기에 따라 첫 번째 빌드는 1~3분 정도 걸려요.

Vercel CLI를 통한 방법

CLI는 터미널에서 배포하거나 파이프라인에서 배포를 자동화하고 싶을 때 유용해요.

1. CLI 설치

shell
npm i -g vercel

패키지 이름은 vercel(접두사 없음)이에요. 설치 후 vercel 명령어(또는 별칭 vc)를 전역으로 사용할 수 있어요.

2. 로그인

shell
vercel login

CLI가 브라우저에서 링크를 열어요. 대시보드와 같은 계정으로 인증하세요. 터미널로 돌아오면 확인 메시지가 표시돼요.

3. 미리보기(preview) 배포

프로젝트 폴더에서:

shell
vercel

처음에는 CLI가 몇 가지를 물어봐요. 대상 계정, 프로젝트 이름, 루트 폴더. 프레임워크를 감지하고 빌드를 자동으로 구성해요. 마지막에 고유한 미리보기 URL이 표시돼요.

4. 프로덕션에 배포

shell
vercel --prod

이 명령어는 프로덕션 브랜치에 배포하고 프로젝트의 안정적인 URL(예: https://my-project.vercel.app)을 업데이트해요.

Preview 배포: 각 PR에 고유한 URL

대시보드를 통해 레포를 Vercel에 연결하면, 각 풀 리퀘스트(또는 머지 리퀘스트)가 자동으로 미리보기 배포를 트리거해요. Vercel이 GitHub, GitLab, Bitbucket의 PR 댓글에 URL을 직접 게시해요.

로직은 간단해요.

  • main (또는 master) 브랜치 - 프로덕션 배포, 실제 URL을 서비스해요.
  • 다른 모든 브랜치 - 미리보기 배포, <project>-git-<branch>.vercel.app 형식의 고유 URL이에요.

Project Settings > Environments > Production > Branch Tracking에서 프로덕션 브랜치를 변경할 수 있어요.

프로덕션 URL 찾기

세 가지 방법으로 찾을 수 있어요.

  1. Vercel 대시보드의 프로젝트 카드 상단: 프로젝트 이름 아래에 클릭 가능한 URL이 있어요.
  2. 프로젝트의 Deployments 탭: "Production"으로 표시된 최신 배포예요.
  3. CLI에서 vercel inspect 뒤에 배포 URL을 입력하거나, 단순히 vercel list로 최신 배포를 확인해요.

출처

관련

참고 · git레포를 GitHub에 연결하기

Concepts-ponts

Concept-pont · Git push, GitHub, et deploiement automatique

Pousser un commit sur GitHub n'est plus juste 'sauvegarder' : c'est aussi le declencheur du deploy continu et la source d'un graphe d'historique visualisable dans l'IDE.

다음 단계를 열려면 단계를 체크하세요

코스로 돌아가기