리액트 빌드 후에 새로고침 (BrowserRouter 서버설정)
본문
안녕하세요!
포폴 만드려고 리액트 배운지 얼마 안된 신입입니다ㅠ
node를 통해서 리액트 프로젝트를 만들었고 개발을 어찌저찌 다 끝내고 배포를 했는데
새로고침시에는 서버를 찾을 수 없다는 에러화면이 뜨고,
Link를 이동시에는 흰 화면만 뜨더라구요.
pc에서 링크 확인했을때는 화면이 정상적으로 뜨고 모바일에서 링크 들어가면 위 문제가 생깁니다.
HashRouter 가 있긴한데 저는 BrowserRouter의 다른 기능들을 사용하고 있어서 변경할 수는 없습니다ㅠ
일이 너무 커지더라구요.
BrowserRouter 를 사용하려면 서버를 설정해야한다고 설명만 나와있고.. 저는 앵귤러나 아파치도 사용하고 있지 않습니다. webpack 파일도 없구요!
혹시 어떻게 서버를 설정해야하는지 알수 있을까요..?
https://hell-of-company-builder.tistory.com/m/275 여기에는 404.html 를 이용하라고 해서 해보긴 했는데 저는 gh-pages가 아니라서 되진 않더라구요.
참고로 저는 카페24에서 절약형 500원짜리 호스팅을 사서 파일질라 ftp 접속 후에 build 파일 넣어서 작업하고 있습니다!
답변 2
새로고침시 서버를 찾을 수 없다는 에러화면은 해당 경로에 파일이 없기 때문입니다.
카페24 호스팅의 월 500원짜리 서버는 apache 여서
.htaccess 를 사용하여 해당 경로의 파일이 없으면 /index.html 파일로 실행결과를 넘기면 됩니다.
최상단에 .htaccess 파일을 만든 후 아래 코드를 넣습니다.
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
cafe24 호스팅이라면 웹서버가 아파치이거나 ngnix로 설치 되어있을겁니다.
앵귤러는 react와 같은 spa고 아파치는 별도의 서버 프로그램입니다.
해당 제공업체에서 호스팅 서버 정보가 안내되어있을테니 해당 부분을 참고하세요
