프론트엔드

리액트 깃허브 페이지에 배포시 주의할점

syleemomo 2023. 10. 17. 15:55
728x90

0. 소스코드 배포시 저장소 주소는 private 이 아니라 public 이어야 한다. 그렇지 않으면 제대로 동작하지 않는다.

1. hompage 주소(깃허브 페이지 주소)를 package.json 의 최상위 바깥에 설정한다. scripts 안이나 dependency 같은 내부에 위치하면 동작하지 않는다. homepage 주소를 읽어서 추후에 BrowserRouter 에 설정된 process.env.PUBLIC_URL 에 대체하는 원리다.

2. BrowserRouter 컴포넌트에 basename 을 설정해주어야 한다. 그래야 "/" 로 Router 경로 설정시 basename (homepage 주소)가 앞에 붙어서 절대경로로 파일들을 가져온다. 

3. .env 파일은 만들지 않아도 된다. 

4. 카카오 지도 사용시에는 카카오 지도가 서비스되는 도메인을 카카오 페이지에서 설정하는데 해당 도메인 주소를 localhost 에서 homepage 주소로 변경해주어야 한다. 또한, 소셜로그인 사용시에는 사용자가 로그인후 내 서버로 다시 돌아올수 있는 콜백주소를 카카오 페이지 소셜로그인 부분에 미리 설정해주어야 하는데 localhost 에서 homepage 주소로 변경해주어야 한다. 그렇지 않으면 401 권한에러가 발생할 수 있다. 

5. 이미지 경로 설정시 상대경로로 설정해도 된다. 다만, 리액트 라우터 사용시 화면전환할때 이미지 경로가 깨질수 있는데 이러한 것들을 해결하기 위해서는 만약 src 폴더 안에 imgs 폴더를 위치시키고, 상대경로로 이미지 파일경로를 설정하면 된다. 절대경로로 설정하는 경우에 깃허브 페이지에서 이미지 경로를 못읽고 404 에러가 뜨는 경우 이미지 경로 앞에 {propcess.env.PUBLIC_URL}를 붙여주면 된다. 

728x90