오랜만에 블로그 수정을 하려는데, 예전에 그대로 둔 에러가 있어서 해결하려고 한다. Next.js와 Vercel을 사용 중이다.
이미지 엑박 문제 504 에러
이미지 엑박이 생기는 경우가 많아져 확인해보니 504 에러가 발생했다.
Vercel 무료 플랜을 사용 중이라 성능 향상을 위해 CDN 지역 설정을 서울로 변경했다. 한국어 블로그이니까.
최상단에 vercel.json 파일을 생성하고, "regions": ["icn1"]을 추가했다. 이렇게 하면, 모든 새 프로젝트의 기본 기능 지역이 워싱턴 DC에서 서울로 변경된다.
주의할 점은, 이 방법은 서버리스 함수(serverless function) 실행 시에만 적용된다는 것이다. 빌드 시에는 다른 지역에서 생성되고 있었다. 확인해보니, 위 설정은 서버리스 런타임 시에만 적용되는 것이었다.
Edge function 런타임은 적용 방법이 다르지만, 기본적으로는 요청에 가장 가까운 지역에서 실행한다고 한다.
빌드 시 지역 설정 기능에 대한 요청은 아직 논의 중인 것으로 보인다.
Configurable build server region 🌍 · vercel/vercel · Discussion #10888 · GitHub
이 설정을 적용한 후, 이미지 엑박 문제와 504 에러가 해결되었다.