배포 환경에서 fetch 오류

한 입 크기로 잘라먹는 Next.js(v15)

작성

131

실제 https로 배포된 API를 fetch를 활용하여 SSR을 구현하고있습니다.

문제는 local에서는 yarn build -> yarn start 하고 테스트를 진행하면 fetch가 정상적으로 작동합니다.

하지만 AWS Amplify를 활용하여 Next JS를 배포하고 배포한 사이트에서 fetch(pending 이후에 catch로 빠짐)가 작동하지않습니다.
API에 문제가 있나해서 다른 API를 CSR로 테스트를 해보면 정상적으로 200이 됩니다.
원인이 뭘까요?

react typescript next.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

음 .. 글쎄요 문제의 원인이 너무 여러가지가 될 수 있는 상황이라 정확히 진단하기 어렵네요 ㅠㅠ

지금으로써는 프로덕션 환경에서 왜 Fetch가 실패하는지 로그를 체크해보셔야 문제의 실마리를 찾을 수 있을 것 같습니다.

brh1243

질문자

[cause]: Error: unable to verify the first certificate

at TLSSocket.onConnectSecure (node:_tls_wrap:1677:34)

at TLSSocket.emit (node:events:518:28)

at TLSSocket._finishInit (node:_tls_wrap:1076:8)

at ssl.onhandshakedone (node:_tls_wrap:862:12)

at TLSWrap.callbackTrampoline (node:internal/async_hooks:130:17) {

code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE'

fetch에서 이러한 에러가 발생합니다. 클라이언트 컴포넌트에서 사용할때는 정상적으로 호출이 되지만 서버컴포넌트 fetch에서 사용하게되면 위와 같은 에러가 발생합니다

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. brh1243님.

AWS Amplify를 사용하여 Next.js 애플리케이션을 배포한 후 fetch가 정상적으로 작동하지 않는 문제를 겪고 계시는군요. 이 상황에서 문제를 해결하는 데 도움이 될 몇 가지 점검 사항과 방안을 안내드립니다.

문제의 원인 및 해결 방안

CORS(Cross-Origin Resource Sharing) 문제:
- AWS Amplify에서 배포된 도메인과 API의 도메인이 다를 경우, CORS 정책에 의해 요청이 차단될 수 있습니다. API 서버에서 요청을 허용하도록 CORS 설정을 올바르게 구성했는지 확인해보세요.
환경 변수 설정:
- 배포 환경과 로컬 환경에서 API URL이 다를 수 있습니다. AWS 환경에 따라 올바르게 환경 변수가 설정되어 있는지 process.env를 통해 확인해보세요.
HTTPS 관련 문제:
- 배포된 환경이 HTTPS를 사용하는 경우, API가 HTTPS로 요청할 수 있도록 설정되어 있는지 확인합니다. HTTP로 설정되어 있을 경우 보안 정책에 의해 요청이 차단될 수 있습니다.
네트워크 제한:
- 서버에서 특정 IP나 도메인으로의 요청만 허용하고 있는지 확인하세요. AWS 인프라의 IP가 허용되도록 API 서버의 방화벽이나 네트워크 설정을 점검하세요.
API Rate Limit:
- API 제공자 측에서 rate limit이 걸려 있을 수 있습니다. 이 경우, 제한 범위를 초과한 요청은 차단되므로 API 사용량 제한을 확인해보세요.

추가 조치

로그 출력: AWS Amplify의 logging 기능을 사용해 서버에서 발생한 오류나 요청 상태를 확인하세요. 이를 통해 문제의 원인을 더 정확히 파악할 수 있습니다.
네트워크 패킷 캡처: AWS의 CloudFront나 네트워크 모니터링 툴을 통해 요청이 어떻게 처리되고 있는지를 분석할 수 있습니다.

이와 관련해 유사한 문제를 다루는 질문과 답변을 참고하실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변