[닷홈] 서브디렉토리 내 빌드파일을 업로드 할때 발생하는 404 에러

닷홈 서버에 서브디렉토리에 테스트 배포

리액트 프로젝트를 마친 후에, 테스트용으로 닷홈에서 먼저 호스팅해보았는데 바로 에러가 터졌습니다.

⚠️교차 출처 읽기 차단(CORB)으로 MIME 유형이 text/html인 교차 출처 응답(https://guide-page.dothome.co.kr/404.html)이 차단되었습니다. 자세한 내용은 https://www.chromestatus.com/feature/5629709824032768을 참고하세요.

로컬에서만 돌려봤던 프로젝트를 실제로 서버 환경에서 잘 돌아가는지 확인하려고, 평소 안 쓰던 호스팅 서버에 서브디렉토리로 배포해보려 했습니다.
'html' 폴더 내에 'test'라는 서브디렉토리를 만들고, 빌드 파일을 여기다 넣었습니다. 이렇게 해서 http://테스트서버/test 주소로 들어갔는데, 화면에는 404 페이지가 떠버렸습니다.
파일을 못 찾는 것 같은데 서브디렉토리의 경로 설정이 별도로 필요할 것 같은 느낌이 들었습니다.

문제는 Create React App에서의 빌드 경로

구글링을 좀 해보니, 서브디렉토리에 앱을 배포할 때 주의해야 할 게 있었습니다😅.
package.json에서 'homepage' 필드를 배포할 URL로 설정해야 정상적으로 작동한다 하더군요. 그래서 이렇게 바꿔봤습니다.

//package.json
{
  "name": "프로젝트 이름",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
   ...
  },
  ...
  "homepage": "http://테스트서버/test/"
}

'homepage' 필드의 중요성

'homepage' 필드는 리액트 앱이 빌드될 때 기본 URL 경로를 설정하는 데 쓰입니다. CRA로 프로젝트 만들 때 'homepage' 기본값은 "."인데, 이걸 그대로 두고 서브디렉토리에 배포하려고 하면 문제가 생깁니다. 브라우저는 html, css, 이미지 파일 등 필요한 자원을 루트 경로에서 찾으려고 하거든요. 그런데 자원들이 모두 서브디렉토리에 있으니까, 올바른 경로를 못 찾아서 404 에러가 발생하는 거였습니다.

마치며

처음 닷홈 서버에 배포하는 과정에서 마주한 에러라서 많이 당황했는데, 다행히 구글링으로 해결할 수 있었습니다.
이런 작은 설정 하나로 전체 배포 과정에 큰 영향을 미칠 수 있다는 걸 다시 한번 느꼈습니다🥲. 서브디렉토리에 리액트 앱을 배포할 예정이면, 'homepage' 필드를 적절히 설정해주세요.