[Next.js] Vercel 504: GATEWAY_TIMEOUT 에러해결

문제 발생

<AI 신년카드 만들기>라는 사이드 프로젝트를 하고 있는데 사이트를 Vercel에서 배포한 후 openAI 통신을 할 때 간헐적으로 504 Gateway Timeout에러가 발생하는 문제가 발생했다.

원인

여러가지 많은 자료를 찾아본 결과, Vercel은 플랫폼을 사용할 때 몇 가지 제한을 적용하는 걸 알았고 Serverless Functions의 실행 시간이 hobby plan인 경우 5초로 pro plan은 15초로 줄었다고 한다.
그래서 시간이 초과가 되면 에러가 발생한거 였고, 해결하기 위해서는 vercel을 pro로 업그레이드 하고 Serverless Functions시간을 늘려야 했다.

해결

pro로 업그레이드 하기 전에 할 수 있는 거를 먼저 고쳐봤다.

1. Vercel CDN 지역 변경

Serverless Functions는 기본적으로 (미국 워싱턴 DC) 지역에서 실행이 된다. iad1
지역을 한국으로 바꾸면 대기 시간도 줄이고 성능도 향상시시킬 수 있다. 실제로 조금 빨라졌다!
CDN 지역 리스트를 보면 여러 나라가 있는데 그 중에 다행히 Seoul, South Korea icn1가 있었다.

지역 설정 하는 방법을 보면서 코드에 적용시켰다.
최상단에 vercel.json파일을 생성해서

{
  "regions": ["icn1"],
}

이 코드를 넣으면 된다.
배포후 vercel에서 Deployment Summary에서 바뀐 지역을 확인할 수 있었다.

2. Pro 업그레이드 후 Serverless Functions시간 늘이기

pro 무료 업그레이드를 2주 동안 할 수 있어서 그걸로 이용했다.

vercel 블로그에서 Serverless Functions can now run up to 5 minutes라고 실행 시간을 길게 할 수 있다고 했다.
공식문서에 있는 Configuring Maximum Duration for Vercel Functions을 보면서 적용시켰다.

vercel.json파일 안에 위에서 만든 지역 위치 밑에 추가 했다.

{
  "regions": ["icn1"],
  "functions": {
    "app/api/**/*": {
      "maxDuration": 300
    }
  }
}

route.ts에 추가하는 코드도 있다.
app > api > generate > route.ts

export const maxDuration = 300; // 추가한 코드
export const dynamic = 'force-dynamic'; // 추가한 코드
 
export async function POST(req: NextRequest) {
...
}

마무리

이렇게 직접 시간을 세팅하니 이제 504에러가 발생하지 않았다.

참고

https://stackoverflow.com/questions/77503770/how-to-increase-timeout-limit-on-vercel-serverless-functions
https://stackoverflow.com/questions/68276674/vercel-serverless-function-has-timed-out-error
https://vercel.com/changelog/serverless-functions-can-now-run-up-to-5-minutes
https://vercel.com/docs/functions/configuring-functions/region
https://vercel.com/docs/edge-network/regions#region-list
https://vercel.com/docs/limits/overview
https://vercel.com/docs/functions/streaming/streaming-examples
https://vercel.com/docs/functions/configuring-functions/duration