Inflearn brand logo image

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

asd님의 프로필 이미지
asd

작성한 질문수

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

React Build 문제

해결된 질문

작성

·

91

·

수정됨

0

선생님 안녕하세요! 질문을 자주 남겨서 죄송합니다.
방법을 찾으려고 애써봤지만 해결이 되지 않아 질문을 남기네요...

우선 페이지 별 meta 태그를 넣어주기 위해 vite.config.js 파일에서 index.html이 필요한 라우팅 경로를 모두 넣어줬습니다. 대략 53개의 경로가 나오더군요.(루트 페이지,16가지 MBTI 결과*3, intro 페이지 *3, 블로그 페이지)
이렇게 되니 빌드 시간 3분이 넘어가면서 빌드 중 다음과 같은 오류가 발생합니다.

error during build:
[Prerender Plugin] [plugin Prerender Plugin] Runtime.callFunctionOn timed out. Increase the 'protocolTimeout' setting in launch/connect calls for a higher timeout if needed.

 우선 index.html 생성을 원하는 페이지를 강의에서 보여주는 예시를 넣었을때는 아무 이상없이 잘 됩니다. 제 생각에는 생성해야 할 index.html 파일의 수가 많아서 발생하는 에러같습니다.

답변 1

0

코배투님의 프로필 이미지
코배투
지식공유자

안녕하세요.

언제든지 궁금한 점이 있다면 편하게 질문 주세요!

 

말씀 주신 바와 같이 Timeout 이슈는 Pupeeteer가 응답을 기다리는 시간이 초과되어서 발생하는 이슈인데요. 페이지가 많아질수록 늘어날 겁니다.

 

에러 메시지에 있는 Increase the 'protocolTimeout' setting in launch/connect calls for a higher timeout if needed. 가 힌트가 될 수 있는데요.

 

vite.config.js 파일에서 아래와 같이 protocolTimeout을 늘려주세요.

 

export default {
  plugins: [
    prerender({
      ...
      // 렌더러 설정 (이 부분에서 Puppeteer에 옵션을 전달합니다)
      rendererConfig: {
        // --- 여기가 핵심입니다 ---
        // puppeteer.launch() 함수에 직접 전달되는 옵션들입니다.

        // 프로토콜 타임아웃 늘리기 (단위: 밀리초)
        // 기본값은 30000 (30초)입니다.
        protocolTimeout: 60000, // 60초로 설정, 필요시 더 늘리세요

        // `protocolTimeout`만으로 해결되지 않으면 다른 타임아웃도 고려해볼 수 있습니다:
        // timeout: 60000, // Puppeteer 작업 전반에 대한 일반적인 시간 제한
      },
    }),
  ],
};

 

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

선생님!!!! 해결했습니다!! 결국엔 라우팅 경로 문제였습니다.
제가 존재하지도 않는 라우팅 경로를 배열에 써놔서 빌드가 안된거였어요 ㅠㅠ
근데 여기서 더 궁금한점이 있습니다. 앞으로 테스트 페이지를 더 많이 만들면 빌드시간은 결국에는 한없이 커지게 되는데 이는 어쩔 수 없는건가요??

코배투님의 프로필 이미지
코배투
지식공유자

아 잘 해결하셨다니 다행이네요!
안그래도 다른 방법을 찾아보고 있었는데 도저히 이상한 부분을 찾을 수가 없던 참이었는데~

 

아쉽게도 빌드시간이 늘어나는 부분은 어쩔 수 없는 부분입니다.

원래 백엔드 서버가 해야 하는 일(각 라우트마다 html 페이지를 만드는 일)을 우리는 빌드할 때 모든 페이지에 대해 미리 다 해두는 개념이기 때문이에요.

 

케이테스트 역시 작년까지 백엔드 없이 우리 강의에서와 같이 프론트로만 운영했는데요.

현재는 Next.js를 활용해 풀스택으로 운영 중입니다.

해당 강의는 다음 강의로 준비중에 있으니 기다려주세요!

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

아하 그렇군요!! 다음 강의 완전 기대됩니다ㅎㅎ
현재 강의도 너무 만족스러워서 나오면 바로 구매하겠습니다!
(참고로 다음 강의에 결재 프로세스 구현하는게 있으면하는 개인적인 바램이 있습니다 ㅎㅎ)
언제나 친절한 답변 감사드립니다!

asd님의 프로필 이미지
asd

작성한 질문수

질문하기