React Build 문제
선생님 안녕하세요! 질문을 자주 남겨서 죄송합니다.
방법을 찾으려고 애써봤지만 해결이 되지 않아 질문을 남기네요...
우선 페이지 별 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 작업 전반에 대한 일반적인 시간 제한
},
}),
],
};
0
선생님!!!! 해결했습니다!! 결국엔 라우팅 경로 문제였습니다.
제가 존재하지도 않는 라우팅 경로를 배열에 써놔서 빌드가 안된거였어요 ㅠㅠ
근데 여기서 더 궁금한점이 있습니다. 앞으로 테스트 페이지를 더 많이 만들면 빌드시간은 결국에는 한없이 커지게 되는데 이는 어쩔 수 없는건가요??
0
아 잘 해결하셨다니 다행이네요!
안그래도 다른 방법을 찾아보고 있었는데 도저히 이상한 부분을 찾을 수가 없던 참이었는데~
아쉽게도 빌드시간이 늘어나는 부분은 어쩔 수 없는 부분입니다.
원래 백엔드 서버가 해야 하는 일(각 라우트마다 html 페이지를 만드는 일)을 우리는 빌드할 때 모든 페이지에 대해 미리 다 해두는 개념이기 때문이에요.
케이테스트 역시 작년까지 백엔드 없이 우리 강의에서와 같이 프론트로만 운영했는데요.
현재는 Next.js를 활용해 풀스택으로 운영 중입니다.
해당 강의는 다음 강의로 준비중에 있으니 기다려주세요!
0
아하 그렇군요!! 다음 강의 완전 기대됩니다ㅎㅎ
현재 강의도 너무 만족스러워서 나오면 바로 구매하겠습니다!
(참고로 다음 강의에 결재 프로세스 구현하는게 있으면하는 개인적인 바램이 있습니다 ㅎㅎ)
언제나 친절한 답변 감사드립니다!
ESFP 영어버전 받을 수 있을까요?
0
81
2
강의 9분 45초 질문입니다
0
88
4
이미지 생성 참조 툴 문의
0
78
2
사이트에 애드센스 연결하는 법
0
128
2
카카오 애드핏 글로벌
0
92
1
db 를 연결하려면 어떤걸 추천하시나요?
0
163
2
GA "수명주기" 탭 없음
0
113
2
cloudflare gitgub private repository 가져올 수 있을까요?
0
241
2
robots.txt 최신화 하는 방법을 아시나요?
0
137
1
메타태그쪽 보고 있습니다만 helmet 라이브러리가 뭔가 잘 작동 안하네요.
0
111
3
CloudFlare 설정 질문
0
377
2
SNS 공유버튼 그룹 만들기 6:30~7:30 질문있습니다.
0
144
3
PC 접속 X, 모바일 접속만 가능
0
145
2
이미지 리사이징 현상 막기
0
140
1
AWS 배포 후 사이트 접속이 원할하지 않은 문제
0
120
1
따라하다 보니 어느순간 화면이 하얗게 나오는건 왜그럴까요?
0
157
3
이용 약관 코드도 제공을 해 주시나요?
0
126
1
코드 힌트 방법
0
223
2
마지막 강의에서 다음 강의가 있다고 하셨는데 곧 올라오나요?
0
86
2
rem 단위를 쓰는 이유
0
235
2
리액트를 선택한 이유
0
130
2
구글 애드센스의 경우 한 개의 아이디로 여러 사이트에 등록이 가능한 것인지 궁금합니다.
0
221
2
이미지 제작에 관한 문의
0
113
2
Layout 을 추가하니, ThumbnailList가 2번 그려지는 현상이 있어요.
0
79
2





