Vercel 배포 시 Function Region

들어가며

이번 사이드 프로젝트를 진행하며 Frontend 배포는 Vercel을 이용했습니다.

프레임워크를 Next.js를 사용했고 Vercel에 배포 시 가장 간단하게 배포할 수 있다는 장점이 있었기 때문입니다.

배포 후 당연히 Function Region을 변경했다고 생각을 했었는데, 프로덕션 환경에서의 프론트엔드가 너무 느렸습니다.

 

여러가지 확인해본 결과 프로젝트의 Vercel Function Region이 기본 값인 North America의 Washington, D.C로 설정이 되어있었습니다.

 

그럼 왜 Function Region을 변경해야 하는지,변경하는 법과 변경 전과 후 어떤 차이가 있는지 살펴보도록 하겠습니다.

 

ssalon-de 프로젝트 인프라 구성

ssalon-de 프로젝트의 서버는 AWS EC2에 배포된 상태입니다.

해당 VM은 AWS의 ap-norteast-2(아시아 태평양 서울) 리전에 위치하고 있습니다.

데이터베이스는 PaaS 서비스인 Supabase를 사용중에 있는데, 해당 DB 역시 AWS ap-norteast-2(아시아 태평양 서울) 에 위치하고 있습니다.

 

Function Region

Vercel에 배포된 Next.js 프로젝트는 Serverless Function으로 실행됩니다.

여기서 Serverless란 서버가 존재하지 않다는 것이 아닌 서버를 직접 관리하지 않아도 된다 (신경 쓰지 않는다) 입니다.

Serverless Function 이란 함수 단위로 제공되는 서버리스 서비스인데 각각의 요청을 함수 단위로 관리할 수 있게 됩니다.

 

Vercel에 배포된 프로젝트는 Vercel Function (Serverless Function)으로 실행이 되는데 Vercel Function이 위치할 리전(Region)은 AWS의 Region과 일치합니다.

 

다만 추가 설정을 하지 않는다면 North America의 Washington, D.C로 설정 되어 있습니다.

Vercel의 Hobby Plan은 Function Region을 하나만 선택할 수 있습니다. Edge Location을 통해 여러 리전에서 사용자에게 빠른 환경을 제공하고 싶다면 (CDN 사용) Pro 플랜을 이용하실 수 있습니다.

 

본론으로 돌아가 봅시다.

 

서버와 DB는 서울 리전에, Vercel Function(서버리스 함수)는 워싱턴 리전에 위치한 상황입니다.

한국에 위치한 사용자가 주소를 입력해 요청을 보내면 워싱턴에 위치한 서버리스 함수에 요청을 보냅니다.

서버리스 함수는 페이지를 만들기 위해 서울에 위치한 서버에 요청을 보내고, 서버에서는 DB에 데이터를 질의합니다.

그리고 데이터를 만든 후 워싱턴에 위치한 서버리스 함수에 응답합니다. 

워싱턴에 위치한 서버리스 함수는 응답 값으로 페이지를 구성해 한국에서 접속한 사용자에게 웹 리소스를 응답합니다.

 

 

물리적으로 거리가 있는 서버간의 요청은 당연히 지연(레이턴시: Latency)가 발생합니다.

위 상황을 해결하려면 어떤 솔루션을 취해야할까요?

가장 쉬운 방법은 프론트엔드 Vercel Function의 Region을 변경하는 것 입니다.

 

Function Region 변경하기

변경하는 방법은 간단합니다. 먼저 배포된 프로젝트에 접속한 후 상단 메뉴 중 Settings를 클릭합니다.

 

그리고 우측 메뉴 중 Functions를 클릭합니다.

그럼 다음의 화면을 확인할 수 있습니다. 그 중 Function Region을 변경할 예정입니다.

 

Function Region 중 Asia Pacific을 클릭합니다.

그리고 Seoul, South Korea (Northeast) - ap-northeast-2 - icn1 을 클릭합니다.

그 후 Save 버튼을 클릭합니다.

 

Function Region을 변경하면 우측 하단에 새로운 배포가 필요하든 알림 팝업이 등장합니다.

간단하게 Redeploy 버튼을 클릭하면 새로운 리전에 배포를 할 수 있습니다.

 

결과

그럼 변경 전과 변경 후를 확인해보며 결과를 비교해봅시다.

 

배포전 상황은 다음과 같습니다.

네트워크 요청 시간을 살펴보면 가장 오래 걸리는 요청은 최대 900ms 까지 소요가 됩니다.

평균 300ms의 요청 시간이 소요되며,실제 UI를 요청을 보낸 페이지가 랜더링이 될 때 까지 수 초의 시간을 기다려야 합니다.

 

그럼 변경 후 상황을 살펴보겠습니다.

 

변경 후 상황을 살펴봅시다. 단순히 UI만 살펴봐도 속도가 빨라졌다는 것이 체감될 정도입니다.

최대 900ms 소요되던 요청이 300ms 정도로 3배 빨라졌고, 평균 네트워크 요청 속도가 200ms 내외로 레이턴시(Latency)가 줄어들었습니다.

 

마치며

Vercel Function의 Region을 변경한 후 사용자로부터 플랫폼의 속도가 빨라졌다는 것이 체감된다는 피드백을 받았습니다.

가장 간단하게 배포된 인프라의 리전만 변경해줘도 사용자가 체감할 수 있는 변화를 만들어줄 수 있습니다.

Vercel을 이용해 프로젝트를 배포한다면 꼭 한번 체크해보는 것을 어떨까요?

 

읽어봐주셔서 감사합니다.