2019-06-02

CRA build 시 상대경로 적용하기

관련 공식문서

상호님 만세!

package.json에

"homepage": "http://floyd12.mooo.com/taptap-client"

를 추가해주면 이 경로를 기준으로 빌드된다.

또한, Router를 사용하는 페이지라면(SPA는 무조건 사용하겠지)

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">

이렇게 basename 속성을 주면 역시 이 경로를 기준으로 라우팅한다.

겪은 문제가 어떤 문제였는지 설명은 코드스테이츠 슬랙에 올린 질문글로 대체한다.

2주, 4주 프로젝트 했던걸 AWS에서 빼고 싶어서 라즈베리파이에 개인 웹서버를 만들고있습니다. nginx로 외부에서 웹페이지에 접속할 수 있게 설정이 되어있고, 그 경로 안에다 폴더를 만들어 각 프로젝트 웹페이지에 접근하도록 만들려고 합니다.

예를 들어, http://…com/project-2w 로 접속하면 2주 프로젝트 사이트 http://…com/project-4w 로 접속하면 4주 프로젝트 사이트가 나오도록..

문제는, S3에 리액트 빌드한 결과물을 올리듯이 그냥 넣으면 될 줄 알았는데 막상 올려놓고 접속해보니 index.html에서 불러오는 번들된 js 등 화면에 필요한 파일들 경로가 http://…com/project-2w 가 아닌 http://…com/를 기준으로 바뀌더라구요. 결국 빈 화면만 뜨고 나머지 파일들은 모두 404 뜨면서 못가져옵니다 ㅠㅠ 최상위 경로가 잘못 잡혀서..

이거 해결할 방법이 혹시 없을까요? 빌드 명령할 때 옵션을 준다던지, webpack 설정을 변경한다던지…