API request error after deployment

blog_ag 프로젝트를 진행하며 생겼던 ReactQuill 관련 에러 및 해결을 기록한 글입니다.

blog_ag 프로젝트 코드 바로가기

Error - 504: GATEWAY_TIMEOUT

This Serverless Function has timed out.

Your connection is working correctly.

Vercel is working correctly.

504: GATEWAY_TIMEOUT
Code: FUNCTION_INVOCATION_TIMEOUT
ID: icn1::4rjgn-1681048460187-85ba86b2de9f

참고 링크 https://vercel.com/docs/error/application/FUNCTION_INVOCATION_TIMEOUT

최초 Vercel을 이용하여 프로젝트를 배포후 리스트 페이지 라우팅시 발생하는 api 요청 관련 이슈 입니다.

Resolution

작성한 코드를 디버깅하며 확인한 결과 코드에서 getServerSideProps에서 api를 요청하는 부분이 문제인 것을 확인하였다.

찾아보니 vercel에서 설정된 국가가 seoul이 아니라던가, vercel에서 지원하는 최대 요청 대기시간이 짧아서 발생한다고 한다.

국가를 seoul로 변경하였는데도 해결되지 않아 결국 배포 환경을 AWS로 변경하였다.

vercel 👉🏻 aws ec2로 배포환경 변경후 재 배포 실시

AWS EC2로 배포환경 변경 후, 활성화된 인스턴스의 IP주소를 Mongo DB의 Network Access 항목에 추가했더니 해결되었음
아마 vercel에서 지원하는 최대 요청 대기시간이 짧아서 생긴 문제였던것 같다.