Vercel 로 간단하게 React 웹 사이트 무료 배포하기

 

지난번 서비스가 유료로 전환된 줄 모르고 Heroku로 포트폴리오 사이트를 배포했었다.

배포하자마자 이 사실을 알아차리고 바로 내려서 비용은 거의 나가지 않았지만 대체할 서비스를 찾아야 했고 그렇게 Vercel로 갈아타기로 결심했다.

 

Heroku 배포가 궁금하다면 이전 포스팅 참고!

https://ramveloper.tistory.com/73

Heroku(헤로쿠)로 간단하게 React 웹 사이트 배포하기

 

 

Vercel이란?

Vercel은 프론트엔드 배포 및 서버리스 기능을 제공하는 플랫폼으로, Next.js 공식 지원 및 빠른 CI/CD 기능이 특징이다.

무료 플랜으로 소규모 프로젝트 배포 가능해 포트폴리오 사이트 배포용으로 아주 적합하다고 판단했다.

 

 

Vercel에 프로젝트 배포하기

1. GitHub 저장소와 연결

1. Vercel 홈페이지에 접속하여 회원가입 혹은 로그인한다.
2. "New Project" 클릭 후 GitHub 계정을 연동한다.
3. 배포할 React 프로젝트를 선택한다.

 

 

2. 프로젝트 자동 배포

1. Framework Preset: React 선택(혹은 프레임워크 맞춰서 선택)
2. Build Command: yarn build(혹은 npm도 가능)
3. Output Directory: build
4. "Deploy" 버튼 클릭 → 배포 완료.

 

Vercel에서 자동 배포 확인

• GitHub에 코드를 푸시하면 Vercel이 자동으로 배포를 진행한다.
• 배포 완료 후 https://프로젝트명.vercel.app/ 링크가 제공된다.

 

 

 

Vercel Analytics 추가

Vercel은 Analytics 기능을 제공한다. 방문자 수, 접속 위치와 OS 및 모바일 혹은 Desktop 여부를 확인할 수 있다.

공식 문서 참고

Vercel Web Analytics Quickstart

 

1. 프로젝트의 Analytics 탭에서 활성화

 

공식 문서에는 다음과 같이 설명되어 있다.

Enabling Web Analytics will add new routes (scoped at /_vercel/insights/*) after your next deployment.

(/_vercel/insights/*웹 분석을 활성화하면 다음 배포 후에 새로운 경로(범위)가 추가됩니다.)

 

 

2. @vercel/analytics를 프로젝트에 추가.

yarn add @vercel/analytics

 

 

3. App.tsx에 코드 추가

import { Analytics } from "@vercel/analytics";

const App = () => (
  <>
    <YourComponents />
    <Analytics />
  </>
);

 

 

패키지 설치 및 코드 추가 후 앱을 재배포하면 다음과 같이 확인이 가능하다.

 

 

Heroku의 경우 git push heroku ~ 로 별도의 푸시를 해주어야 하는데, vercel은 깃 레퍼지터리에 푸시하면 바로 반영된다는 점이 좋았다. 또한 Heroku는 30분간 트래픽이 발생하지 않으면 앱이 잠들게 되어 Heroku 카페인이라는 서비스에 등록을 해주어야 했는데, vercel은 별도로 그런 작업을 거치지 않아도 되는 것 같았다.

간단한 포트폴리오 사이트이기 때문에 Vercel이 여러모로 장점이 많이 보였다!