Vercel 소개, 서버 간단하게 배포해보기 (무료 테스트)

 

Replit 을 써보다 보니, 다른 배포 서비스 뭐있는지 궁금해서 검색하다가 Heroku 가 있고 Vercel 을 추천하는데, Heroku는 배포에 복잡성이 조금 보이고, Vercel이 간단하면서도 자세히 들여다보니 프론트 UI를 자동으로 생성해주는 AI서비스인 V0를 만들 Vercel이여서 서버 배포법을 단계별로 알아보겠습니다.

 

 

Vercel 소개

사이트: https://vercel.com/

 

Vercel은 Next.js 개발팀이 만든 호스팅 플랫폼으로, 정적 사이트와 서버리스 기능을 위한 클라우드 서비스를 제공합니다. 개발자들은 복잡한 설정이나 관리 없이도 즉시 배포할 수 있으며, 자동으로 확장되어 웹 사이트 및 웹 서비스를 호스팅할 수 있습니다. 또한, GitHub, GitLab, Bitbucket 등의 저장소와 연동하여 코드 푸시 시 자동으로 배포할 수 있습니다.

Vercel을 사용하면 Next.js 기반의 프로젝트를 손쉽게 배포할 수 있습니다. 특히, 서버 사이드 렌더링(SSR)을 사용하는 Next.js 프로젝트의 경우, 정적 웹 호스팅 서비스로는 배포가 어려울 수 있는데, Vercel은 이러한 프로젝트를 간편하게 배포할 수 있도록 지원합니다.

 

 

 

Vercel을 이용한 배포 과정

1. Vercel 회원가입 및 로그인

• Vercel 공식 웹사이트에 접속하여 GitHub, GitLab, Bitbucket 계정 중 하나로 회원가입 및 로그인을 진행합니다.
  
  

2. 프로젝트 가져오기

• 로그인 후, 'New Project' 또는 'Add New' 버튼을 클릭하여 새로운 프로젝트를 추가합니다.
• 연동된 Git 저장소 목록에서 배포하려는 프로젝트를 선택하거나, 저장소 URL을 직접 입력하여 프로젝트를 가져올 수 있습니다.

 

3. 프로젝트 설정

• 프로젝트 이름, 프레임워크 프리셋(예: Next.js), 루트 디렉토리 등을 설정합니다.
• 필요에 따라 환경 변수를 설정할 수 있습니다.
• 기존에 있는 Github와 연결할 수 있습니다.
• Framework을 선택할수도 있고 Tempalte을 클론(복사)해서 만들어볼수 있습니다.
• v0 에게 말하면 프론트 UI를 만들어줍니다.

 

 

신기하니 챗봇을 일단 만들어본다.

 

 

뭔가 Products를 Add해달라고 해서 Add 해봄

 

API 키를 입력해달랜다. 오. 그럼 바로 배포가 됩니다.

 

4. 배포

• 모든 설정을 완료한 후, 'Deploy' 버튼을 클릭하면 Vercel이 자동으로 빌드 및 배포를 진행합니다.
• 배포가 완료되면 제공된 도메인을 통해 웹사이트에 접근할 수 있습니다.

 

눈깜짝할 사이에 챗봇사이트 하나 만들어졌는데, 그냥 OpenAI - GPT 클론이네요.

ㅎㅎ.. 재밌네.

 

 

 Vercel을 활용하여 Next.js 프로젝트를 손쉽게 배포하고 관리할 수 있고,

또한, 코드 변경 시 Git을 통해 자동으로 배포가 진행되어 개발 및 배포 효율성을 높일 수 있습니다.

그리고 Vercel은 v0라는 Front UI - AI (React 기반)을 개발했는데 이걸 보니 백앤드 개발 기능도 기대되네요.

---

Vercel 가격

취미로 한다면 무료, Pro 버전은 월 20달러

 

무료계정으로 위의 챗봇 사이트 만들어봤습니다. 

 

 

By. skyfishb