강의

멘토링

커뮤니티

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

gogo님의 프로필 이미지
gogo

작성한 질문수

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

9.3) 배포하기

vercel 배포를 실패하였습니다.

해결된 질문

작성

·

48

·

수정됨

0

Error occurred prerendering page "/book/1". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Review fetch failed: Unauthorized
    at p (.next/server/chunks/146.js:1:3768) {
  digest: '73929900'
}
Export encountered an error on /book/[id]/page: /book/1, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null
Error: Command "npm run build" exited with 1

상황설명

  1. 에러가 발생하여 env를 추가 하였습니다.

  2. 동일한 에러가 발생하여 배포한 서버로 접속하니 인덱스 페이지 접근은 잘 됐지만 api접근이 불가능하였습니다.

  3. AI 돌려보니 백단 코드 수정이 필요하다해서 백단 코드 수정 후 브라우저로 api에 접근하니 데이터를 정상적으로 가져왔습니다.

  4. 확인 후 프론트 환경변수도 다시한번 변경 해줬습니다.

  5. 하지만 프론트 서버에서는 저 에러가 빌드 로그로 출력되더라구요

뭐가 문제인지 감이안잡히네요 ㅎ;;;

답변 3

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

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

본 강의에서는 Vercel Auth와 관련된 기능을 사용하지 않아 해당 설정의 유무와 관계없이 빌드가 잘 이루어져야 하는데 혹시 추가하신 기능이 있으실까요?!

0

gogo님의 프로필 이미지
gogo
질문자

API 서버 Setting에서 Vercel Authentication를 disabled 하니까 정상작동하네요 ㅎ;;

0

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

Vercel 배포 시 발생한 프리렌더링 및 인증 오류에 대해 도움을 드리겠습니다. 제공하신 오류 메시지를 보았을 때, 프론트엔드에서 API 클라이언트와의 통신 중 ‘Unauthorized’ 오류가 발생하는 것으로 보입니다. 이 문제를 해결하기 위해 몇 가지 체크포인트를 제시합니다:

문제 원인 분석 및 해결 방안

  1. API 인증 확인

    • 백엔드 API가 인증을 요구하는 경우, 프론트엔드에서 API 호출 시 인증 토큰이 올바르게 전송되고 있는지 확인하세요. 환경 변수로 인증 토큰을 설정하고, Vercel 환경에서도 동일하게 설정되었는지 점검합니다.
  2. 환경 변수 설정

    • 환경 변수에서 API URL과 인증 정보가 올바르게 설정되어 있는지 확인하세요. Vercel의 ‘Project Settings’ 내 ‘Environment Variables’ 설정을 통해 NEXT_PUBLIC_API_SERVER_URL과 인증 정보가 정확한지 다시 점검합니다.
  3. 네트워크 요청 확인

    • 프리렌더링 시점에서 발생하는 네트워크 요청이 실패하는 경우, 실제 요청이 어떤 URL로 가는지, 그리고 요청 헤더가 올바른지 확인해야 합니다. 개발 환경에서 브라우저 네트워크 탭을 통해 검사해 보는 것도 좋은 방법입니다.
  4. 백엔드 서버의 CORS 설정 검토

    • 백엔드 서버의 CORS 설정이 올바르게 되어 있는지 확인하세요. 프론트엔드에서 API 요청이 올바르게 이루어지려면 프론트엔드 도메인이 허용되어야 합니다.
  5. 프리렌더링 설정 점검

    • Next.js의 getStaticPropsgetServerSideProps에서 비동기 요청에 대한 오류 처리가 올바르게 되어 있는지 확인하세요. 요청이 실패할 경우에 대체 로직을 추가할 필요가 있습니다.

이와 관련된 문제를 해결하는 데 참고할 수 있는 기존의 유사 질문들을 소개합니다:

제안드린 내용을 바탕으로 문제를 해결할 수 있기를 바라며, 추가적인 질문이나 환경에 대한 정보가 더 필요하시면 이어서 질문해 주세요. 곧 지식공유자께서도 답변해 주실 것입니다.

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

gogo님의 프로필 이미지
gogo

작성한 질문수

질문하기