HttpRequest 30초 Timeout 500 오류 (feat: Nextjs , SpringBoot)

HttpRequest 30초 Timeout오류

 

최근 사이드 프로젝트를 진행하면서 외부 기관과의 API 연동을 시도한 적이 있다. 이 과정에서 API 호출에 1분 이상의 시간이 소요되었고, 30초가 지나면 500 오류가 발생하는 현상을 경험했다. 흥미롭게도 Spring Boot 서버에서는 오류가 발생하지 않고 정상 응답이 돌아왔다. 이러한 문제를 해결한 방법을 공유하려 한다.

프로젝트 구성

 

Next.js: 프론트엔드 (포트 3000)
Spring Boot: 백엔드 (포트 8080)
외부 기관: 데이터 제공

이 구조에서 프론트엔드에서 Spring Boot 서버로 요청을 보내면, 서버가 외부 기관의 데이터를 가져와 다시 프론트엔드로 리턴하는 방식으로 작동한다.

문제 발견

API 호출을 진행했을 때, 30초에서 31초 사이에 Postman에서 Internal Server Error가 발생하는 것을 확인했다. 이로 인해 30초 타임아웃이 걸린 부분을 찾아야 했고, 처음 의심한 것은 Next.js의 호출 부분이었다.

Next.js의 내부 코드에서 proxy-request.js 파일에 30초 타임아웃이 설정되어 있었고, 이곳에서 문제가 발생한 것으로 추정했다. 해당 파일은 다음 경로에 위치해 있다:

node_modules/next/dist/server/lib/router-utils/proxy-request.js

해결 방법

이 문제를 해결하기 위해 next.config.js 파일 안에 ProxyTimeout 값을 변경하는 방법을 선택했다. 이를 통해 Next.js의 타임아웃 설정을 조정하여 API 요청이 정상적으로 처리될 수 있도록 하려고 한다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    proxyTimeout: 600000
  }
};

module.exports = nextConfig;

이렇게 설정한 후, API 호출 시 더 이상 500 오류가 발생하지 않고, 정상적으로 데이터를 받아올 수 있었다.

Nextjs rewrites: https://nextjs-ko.org/docs/app/api-reference/next-config-js/rewrites