Svelte 프로젝트 Vercel에 배포하기, 무료 웹호스팅 방법

Svelte를 공부하면서, 하나씩 공부한 것들을 구현해보는 간단한 프로젝트를 하나 만들었다. 로컬PC에서만 서버를 구동해서 결과만 확인하다가, 무료 웹호스팅을 이용하여 언제든 외부에서 접근할 수 있게 하고 싶었다. Vercel 을 한번 사용해서 무료로 클라우드 서비스를 이용해보자.

Vercel

Vercel은 프론트엔드 클라우드 서비스로서 개발자에게 더 빠르고 개인화된 웹을 구축할 수 있는 프레임워크, 워크플로우 및 인프라를 제공하고 있다. Pricing 정책은 Hobby/Pro/Enterprise 3개로 나뉘는데, 당연히 무료인 Hobby로 사용할 것이다. 가입하면 본인의 DashBoard 가 나올텐데 [Add New...] 버튼을 클릭하고 Project 를 선택한다.

github 레파지토리를 연결했다면 아래와 같이 접근가능한 레파지토리 목록이 나올 것이다. 그 중 import 할 대상을 선택한다.

들어가면 입력란이 있긴한데 입력하지 않고 그대로 나뒀다.

음.. 이렇게 해도 되나 싶긴한데, 바로 Deploy 버튼을 클릭했다. 내 경우에는 빌드커멘드나 빌드디렉토리가 다르지 않고, vite 를 그대로 사용하다보니 변경할게 너무 없었다. 본인 프로젝트에 알맞게 변경할 게 있으면 입력하여 처리해야 한다.

빌드하면서 오류가 나지 않는다면, 아래와 같이 상태가 Ready 인 정상배포된 프로젝트 정보를 볼 수 있다. Vercel에서 svelte-study-mocha.vercel.app 이런식으로 주소까지 만들어서 주지만, 본인이 사용자 도메인을 가지고 있다면 그걸로 매핑할 수도 있다. 이전에 작성한 포스팅이 있어서, 자세한 내용은 여기를 클릭하면 볼 수 있다.

Hobby 계정은 상업적인 이용금지

Hobby 계정은 비상업적 개인 용도로만 제한되며, 플랫폼의 모든 상업적 사용에는 Pro 또는 Enterprise 요금제로 변경 필요하다. 상업적 사용이 무엇인지 아래와 같은 사이트를 예시로 들고 있지만, 그외에도 금전적 이득을 목적으로 하는 사이트라면 돈을 내고 Pro/Enterprise 요금제를 사용토록 안내하고 있다. 원문 내용은 여기를 클릭한다.

상업적인 이용관련 예시

  • 사이트 방문자에게 결제를 요청하거나 처리하는 모든 방법.
  • 제품 또는 서비스 판매 광고
  • 사이트 생성, 업데이트 또는 호스팅에 대한 대금 수령
  • 사이트의 주요 목적이 제휴사로의 연결 기능일때
  • Google 애드센스와 같은 온라인 광고 플랫폼을 포함하되 이에 국한되지 않는 광고 포함

더 보면 좋을 글들