[에러 해결] 웹팩 - netlify 빌드 에러 문제 해결

데브코스 7주차 과제인 마이리얼트립 홈페이지 클론 과제를 netlify로 배포하려던 중 배포가 안되는 문제가 생겼다.

배포하는데 30분이 넘게 걸리고(맥북프로M1이 이럴리가...?), 그마저도 에러가되서 배포가 실패...

첫번째 문제 : 이미지를 모두 절대 경로로 바꾸기

각종 이미지와 svg 파일을 웹팩을 이용해서 파일로더 라이브러리로 함께 배포를 하려했는데, 파일로더 라이브러리에 문제가 생긴 것 같아서 이미지를 모두 절대경로로 바꾸었다.

→ 생각해보면 이것도 경로가 바뀌었기 때문에 생긴 문제

이 문제는 해결됐지만 여전히 배포에러...

두번째 문제 : output 삭제

[webpack-cli] [Error: ENOENT: no such file or directory, mkdir '/opt/build/repo/dist'] {
10:29:29 PM:   errno: -2,
10:29:29 PM:   code: 'ENOENT',
10:29:29 PM:   syscall: 'mkdir',
10:29:29 PM:   path: '/opt/build/repo/dist'
10:29:29 PM: }
10:29:29 PM: Execution timed out after 35m56.626379417s
10:29:29 PM: Error running command: Command did not finish within the time limit
10:29:29 PM: Failing build: Failed to build site
10:29:29 PM: Finished processing build request in 35m58.921704285s

에러 코드에서 dist.. 어쩌구 하는걸보니 경로가 잘못된 것 같다.

생각해보니 번들링된 파일은 그냥 개발환경에서 사용하려는 것이므로 필요가 없다.

그리고 netlify의 루트경로는 opt/build/repo/ 로 시작하는 것 같다. 즉 루트 경로가 조금 달라지는 것 같음. 따라서 이 부분이 문제일 것 같아서 번들링된 파일을 생성하는 output을 빼버렸다. (netlify가 경로를 찾지 못하거나 충돌이 날 것 같음)

이전 webpack.config.js

module.exports = {
  mode: "none",
  entry: "./src/index.js",
  output: {
    path: __dirname + "/dist",
    filename: "app.bundle.js",
  },
...

수정 후

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  ...

그리고 repo를 다시 업데이트 하니... 하자마자 배포가 성공했다 ㅜㅜ

 

배포한 상윤리얼트립 링크!

https://fascinating-tartufo-37dfd3.netlify.app/

상윤리얼트립 :: 나다운 진짜 여행