Vercel을 이용한 무료 웹 배포 이용해보기

Vercel은 Next.js 프레임워크를 만든 어마어마한 회사입니다.

Vercel은 사실 클라우딩 서비스를 지원하는 회사인데, 즉 next.js 만들고 우리껄로 많이많이 배포해줘라는 취지를 가지고 있는거 같습니다.

 

자 이제 Vercel에서 가격정책과 배포방법 그리고 도메인 설정방법에 대해 설명하겠습니다.

 

가격

vercel 가격정책

vercel은 Hobby, Pro, Enterpirse 총 3개의 가격정책이 있습니다. Hobby인 경우 꽁짜로 위에 써있는 기능뿐만 아니라 아래의 resource를 제공합니다. 또한 domain연결과 배포과정이 딸깍으로 연결할 수 있기 때문에 아주 좋습니다.

 

일주일간 배포한 사이트 트래픽은 100회미만이여서 아주 넉넉히 사용할 수 있었습니다.

 

배포방법

vercel에서 배포하는 방법은 다음과 같습니다.

1. 로그인 후 Import 프로젝트를 눌러 git 연결을 합니다.

2. 연결할 프로젝트의 Import를 누릅니다.

연결된 깃

 

3. 프레임워크 및 build setting environments를 셋팅 후 Deploy를 눌러 배포를 시작합니다.

배포설정

 

 

그럼 끝입니다. 배포가 완료되면 새로운 주소가 생깁니다. 

하지만 주소값이 이상하니 사람들이 안들어오겠죠?  이제 구매한 도메인으로 바꾸는 방법에 대해 알려드리겠습니다.

 

도메인 연결

도메인 연결 방법 순서는 다음과 같습니다.

1. 구매한 도메인에서 배포된 IP 연결 (배포된 주소에 들어가서 개발자 네트워크 탭에서 IP 뽑아도 되고 IP찾으시면 됩니다 알아서)

2. vercel에서 해당 프로젝트 클릭 -> settings -> domains -> add domains 클릭

3. 구매한 도메인 입력

4. 끝

도메인 연결 완료

 

https://sstockscouter.cloud/

AI 주가 분석 플랫폼 | StockAI - AI 주식 분석 플랫폼

 

제 사이트도 잘 도메인이 연결된 것을 확인할 수 있습니다.

 

Next.js 배포시 문제점 및 해결했던 내용

vercel 504 에러

자 배포는 잘 됐는데 기능이 잘 동작할수도 안할 수도 있습니다. 왜냐하면 vercel hobby 정책에서는 next.js api route 사용 시 기본 정책으로 10초 이상 걸리는 API는 리젝됩니다. 따라서 API 요청이 오래걸리는 경우는 어떻게 해야될까요?

사실 10초 이상걸려도 해줘 라는 설정을 하면 됩니다.

1. Next.js 프로젝트 최상단 vercel.json 생성 

2. 아래 코드 입력

{
  "functions": {
    "src/app/api/**/*.ts": {
      "maxDuration": 60
    }
  }
}

 

3. 재배포하면 끝

api route에서 maxDuration을 60초로 설정하여 10초 이상걸려도 잘 동작하는 것을 확인할 수 있습니다. 만약 ts가 아니라면 js로 바꾸시면 될거 같습니다. 

 

여러분도 꽁짜 클라우드 한번 써보세요. 테스트 배포용으로는 아주 좋습니다. 다들 화이팅