nginx - react(cra) craco로 설정 후 청크 파일 경로 잘못된 오류

상황:

react 프로젝트 webpack으로 커스텀한 뒤

build 한 html 파일을 

nginx에 실어서 열었음

 

---

올바른 load 경로: http://localhost/static/js/[청크파일명]

 

그런데 아래 사진을 보면 '/board' 가 중간에 들어가 있다.

 

 

청크파일 잘못 Load된 경우

청크파일 올바르게 load 된 경우

 

---

나의 경우에는 craco.config.js (웹팩 오버라이딩 설정파일)에서 homepage 필드를 추가해서 생긴 문제다. 

 

...

  "devDependencies": {
    "@craco/craco": "^7.1.0",
    "husky": "^9.0.11",
    "prettier": "^3.3.0"
  },
  "homepage": "./", //<--------- 이것
  
  ...

 

homepage 속성은

build 때 설정해놓은 import 경로를 그대로 사용하기 위함이라고 한다. 

 

build 후

import 된 리소스들은 모두 

static 폴더로 들어간다.

 

그래서 빌드된 html 역시 static 폴더에서만 리소스를 찾는다.

 

---

homepage 필드 속성은

build 때 import 경로 그대로 사용할 때

다시 말해 특정경로에서 가져와야할 때

 

사용한다.

 

homepage 속성 지우고

다시 빌드하면 정상적으로 청크파일 load함.