저번 포스팅에서는 Next.js 프로젝트를 Vercel 에 배포하는 과정을 남겨봤습니다.
이번 포스팅에서는 Vercel 에 배포한 이후 미쳐 설정하지 못해서 겪었던 에러를 해결한 과정을 남겨보겠습니다.
인덱스 페이지에서 라우팅
인덱스 페이지에서 다른 페이지로 라우팅을 합니다.
아직 화면을 붙이지는 않았지만 해당 화면에서 사용해야할 데이터를 서버사이드로 처리하기 위해 getServerSideProps 라는 서버리스 함수를 호출합니다.
API 가 호출이 안되네?
로컬 환경에서는 API 엔드 포인트를 env 파일에 넣어서 API Base URL 을 따로 관리하고 있습니다.
환경 셋팅을 한지 좀 된 상태여서 API Base URL 을 보관하던 방법을 잊고 있던 상황에서 Vercel 에 배포를 했는데 로컬에서 성공하는 API 가 프로덕션에서는 콜 조차 못하는 상황이 발생했습니다.
이유를 찾아보니 요청보내는 URL 에 undefined 가 섞여 있습니다.
환경 변수를 Vercel 에 등록하지 않았기 때문입니다.
Project Settings > Environment Variables 에 env 파일에서 사용중인 환경 변수를 key, value 로 입력해주세요!
페이지 라우팅이 너무 오래 걸렸던 문제
소개 페이지에서 데이터를 활용중인 페이지로 라우팅을 합니다.
페이지 라우팅을 했는데, 페이지가 뜨는데까지 2초 이상의 시간이 소요가 됩니다.
기다리는 측에서는 너무 오래 걸린다고 생각이 들었습니다.
처음에는 API 환경 문제인가 생각했지만, 클라이언트에서 API 콜을 할 땐 너무나 빠르게 응답이 왔습니다.
결국 서버리스 함수를 사용하는 페이지에서만 속도가 이렇게 느리니 서버리스 함수가 문제겠구나 생각을 했고, 이유를 찾아봤습니다.
결론은 서버리스 함수의 리전이 문제였습니다.
현재 접속중인 지역은 서울 혹은 대한민국 어딘가 입니다.
그런데 서버리스 함수가 저장되어 실행되는 리전이 워싱턴으로 설정되어 있었던 겁니다!
배포중인 정적인 리소스들은 CDN 에 캐싱되어 각 엣지 로케이션에서 처리됩니다. 하지만 서버리스 함수들은 설정한 리전에 보관되어 있다가 요청이 들어오면 실행이 됩니다. 요청이 오랫동안 들어오지 않은 함수들은 휴동되기 때문에 오랜만에 들어오는 요청인 경우 첫 요청에서 시간이 조금 더 걸릴 수 있습니다.
