Vercel 프론트엔드 배포 방법 (100% 무료)

배포를 해보자

 

우리 랩실은 올해 11월달에 한국자기학회에 참가할 예정이다.

그 전까지 홈페이지가 완성 까지는 아니더라도 소개 페이지 정도 만들어졌으면 하는 교수님의 요청이 있었고, 그 전까지 만들어보고자 한다.

그래서 배포와 도메인 구매 단가를 알아보고자 하였다.

 

처음에는 AWS 프리티어를 이용해서 배포를 하고자 하였다.

접속 시간이 최대 750시간 까지는 무료라고 하였다.

 

그러던 중 Vercel 이라는 무중단 배포 방법을 알게 되었었다.

백엔드나 DB가 필요한 경우라면 약간의 비용이 청구될 수 있다고는 하는데 내가 만드는 웹은 프론트엔드로 다 만드는 것이라 전혀 비용이 부과되지 않는다고 한다.

 

 

 

배포 방법

 

1. 아래 Vercel 링크에서 회원가입

 

깃헙 계정으로 회원가입을 하면 Repositories를 바로 연동할 수 있어 좋다.

프론트엔드 코드를 내 레포에 넣어놔서 바로 연동할 수 있었다.

 

https://vercel.com/home

Vercel: Build and deploy the best web experiences with the Frontend Cloud – Vercel

 

 

 

2. 상위폴더에 Vercel.json 파일 생성

 

이 파일을 만들어야 배포가 된다고 한다.

상위폴더에 만들어야 한다.

Vercel.json 파일 생성

 

{
    "routes": [
      { "handle": "filesystem" },
      { "src": "/.*", "dest": "/index.html" }
    ]
}

 

 

 

3. 원하는 Github Repositories와 연동

레포지토리와 연동

 

 

연동하고자 하는 레포지토리와 연동한다.

LAB_webpage를 연동하고자 하였고, 바로 Import 하였다.

Import를 하면 다음 단계로 넘어가게 된다.

 

 

 

4. 배포할 프로젝트 설정

 

Project Name : 프로젝트 이름을 지정, 이 이름으로 페이지의 url이 생성된다.

Framework Preset : 프로젝트를 빌드, 배포 하는데 사용할 프레임워크/런타임 환경 지정 (아마 자동으로 선택되어진다)

Roote Directory : 프로젝트의 루트 디렉토리(최상위 폴더 설정)

 

이 루트 폴더를 잘못 설정하게 되면 빌드 환경 지정에서 오류가 뜰 수 있고, 나중에 배포한 후 404 페이지가 뜰 수도 있으니 잘 설정해놓아야 한다.

내가 그랬었다,, 루트 폴더 설정을 잘못 해놓아서 처음에 했을 때 오류가 났었다.

아래 그림과 같이 루트 폴더를 다시 설정해놓으면 오류를 해결 할 수 있다. 

 

다른 커맨드를 세팅할 수 있다고 하는데 이번 배포에서는 다루지 않아 생략하고자 한다.

아래 Deploy 버튼을 누르면 자동으로 빌드되고, 배포된다.

 

 

 

5. 배포 성공!!!

 

배포 성공!!

 

이렇게 폭죽이 터지고 메인 페이지가 나오게 되면 배포 성공이다!

AWS 배포 보다는 쉽고 빠르게 배포되는것 같다.

 

 

 

도메인 변경

 

Vercel 프론트엔드 배포는 완벽한 무료 서비스로 제공된다.

무료 서비스이면서 도메인 까지 유저가 원하는 대로 바꿀 수 있다.

하지만 무료 버전을 쓰게되면 url 뒤에 " .vercel.app "이 붙여지게 된다.

유일한 단점이 되는것 같기도 하다만, 이정도는 괜찮은것 같기도 하다.

 

Settings >> Domains 에서 Edit 버튼을 누르면 도메인 이름을 변경할 수 있다.

Vercel 도메인 변경 방법

 

주의할 점은 무료버전을 사용하는 유저라면

도메인 뒤에 위 그림처럼 " .vercel.app "을 붙여야 한다.

그렇지 않으면 변경이 안된다.

 

변경한 후 Save를 누르게 되면 도메인이 변경된다!