[React] 상대경로 설정 (for static files of build folders)

기본적으로 react project를 빌드할 때 파일의 경로가 절대경로로 지정되어 있다

<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>React App</title>
<script defer="defer" src="/static/js/main.4eb3a98f.js"></script>
<link href="/static/css/main.61912918.css" rel="stylesheet" />

빌드한 파일들을 nginx에 연결해서 사용하려 했는데 static 파일들의 경로를 못찾아서 이슈가 있었다
그래서 static 파일들을 상대경로로 인지할 수 있게 빌드를 해야했었다

상대경로를 사용하기 위해 package.json에 homepage key를 추가해야한다

{
  // ...
  "homepage": ".",
  // ...
}

package.json 수정 후 build/index.html 의 static 파일 경로는 아래와 같이 변경되는걸 확인할 수 있다

<link rel="apple-touch-icon" href="./logo192.png" />
<link rel="manifest" href="./manifest.json" />
<title>React App</title>
<script defer="defer" src="./static/js/main.5c0265c2.js"></script>
<link href="./static/css/main.fe2d8290.css" rel="stylesheet" />

ref

• https://github.com/facebook/create-react-app/blob/main/docusaurus/docs/deployment.md#building-for-relative-paths
• https://juein.tistory.com/47