Proxyman으로 Next.js 서버 측 HTTP 요청 캡처

1. 문제점

서버 측 NextJS에서 fetch()를 사용해 HTTP/HTTPS 요청을 보낼 때는 네트워크를 디버깅하기가 정말 어렵습니다. 지금까지의 우회 방법은 console.log()를 사용해 터미널 앱에 요청과 응답을 출력하는 것이었습니다.

따라서 요청이 수백 개인 대규모 코드베이스를 디버깅할 때는 골치가 아픕니다.

이 글에서 다루는 내용

Proxyman으로 NextJS 15 서버 측의 HTTP/HTTPS 요청을 캡처하는 방법

2. 해결 방법

Proxyman은 미리 구성된 터미널 앱을 여는 Automatic Setup 기능을 제공합니다. 이 터미널에서 NextJS 서버를 시작하면, Proxyman이 NextJS 프로젝트의 모든 HTTP/HTTPS 요청을 자동으로 캡처합니다.

장점:

프록시를 설정할 필요가 없습니다
Proxyman 인증서를 신뢰하도록 설정할 필요가 없습니다
별도 설정 없이 바로 작동합니다
Reverse Proxy 도구를 사용하는 것보다 설정하기 쉽습니다

진행 순서는 다음과 같습니다:

모든 요청이 서버에 도달하도록 하려면 cache: 'no-store'를 사용해 fetch()가 저장된 결과를 재사용하지 않도록 지정합니다.

export default async function MyPage() {
    const res = await fetch('https://httpbin.org/anything', { cache: 'no-store' })
    return <div>My Page{res.text()}</div>
}

=> 캐시 동작은 Next.js 버전과 라우트가 사전에 빌드되는지, 요청마다 렌더링되는지에 따라 달라집니다. 개발 환경의 핫 리로드도 Server Component의 fetch 결과를 재사용할 수 있습니다. => { cache: 'no-store' }를 사용하면 Next.js가 요청마다 원격 서버에서 데이터를 가져오므로, Proxyman에서 호출을 확인할 때 유용합니다.

Proxyman -> Setup -> Automatic Setup -> Open new Terminal을 엽니다.

이 터미널에서 npm run dev 명령으로 NextJS를 시작합니다.

완료되었습니다. Proxyman이 fetch()에서 보내는 모든 HTTP/HTTPS 요청을 캡처하고 가로챕니다.

3. 다음 단계

자신이 선호하는 터미널 앱을 사용하고 싶다면 Manual Setup을 사용할 수 있습니다. 설정 방법은 다음 문서를 참고하시기 바랍니다: https://proxyman.com/docs/automatic-setup/manual-setup
Automatic/Manual Setup 도구는 NodeJS, Python, Ruby와 함께 작동합니다.

Next.js 명령은 Proxyman이 연 터미널에서 실행하시기 바랍니다. 설정은 해당 터미널 세션에만 적용됩니다. 그래도 호출이 나타나지 않으면 핫 리로드 대신 전체 페이지 이동을 사용하고, 코드 경로가 서버에서 실행되는지 확인합니다. 브라우저에서 실행되는 fetch 호출은 브라우저 설정을 따릅니다.

Noah Tran

2024년 6월 10일