서브 디렉터리에서 리액트 앱 실행 문제 해결

빌드한 리액트 앱을 최상위 경로가 아닌 서브 디렉터리에 넣고 접속해보면 오류와 함께 아무것도 뜨지 않는다.

create-react-app을 사용하면 기본적으로 결과물들이 최상위 주소 기준으로 만들어져서 그렇다. 간단한 설정으로 해결할 수 있다.

package.json 파일에 아래 한 줄을 추가한다.

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

그리고 다시 빌드하면 상대 경로 기준으로 만들어져서 어느 디렉터리에서든 잘 실행된다.

그런데 react-router에서 <Link>로 주소를 이동할 때 무조건 최상위 경로 기준으로 이동해서 주소 이동 후 새로고침하면 엉뚱한 곳으로 접속되는 문제가 있었다. 해결법을 찾아봤더니 basename을 지정해서 라우팅할 때 특정 경로를 붙여줄 수 있었다.

하지만 basename은 상대 경로를 지원하지 않아서 결국엔 서브 디렉터리 명을 하드코딩 해줘야 한다. 경로 하드코딩 없이 어디서든 사용할 수 있게 만들고 싶었는데 방법을 찾지 못했다...

그래서 그나마 타협점으로 환경변수를 사용하기로 했다. PUBLIC_URL 환경변수는 위에서 추가한 homepage와 같은 역할을 한다. 따라서 앞에서 추가한 homepage는 다시 원래대로 지워도 된다.

    <BrowserRouter>
      <App />
    </BrowserRouter>

그리고 위 부분을 찾아 아래처럼 basename={process.env.PUBLIC_URL}을 추가한다.

    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <App />
    </BrowserRouter>

이제 빌드 스크립트를 수정하든지, 직접 환경변수를 지정하든지 해서 PUBLIC_URL 환경변수에 하위 경로를 넣고 빌드하면 리액트 실행 문제와 react-router 라우트 문제 모두 해결된다. PUBLIC_URL에 지정한 주소에서만 작동한다는 게 흠...