- 1
- Ruwaku
- 조회 수 334
React 배포 시 그냥 React build 후 웹호스팅에 올려도 정상 동작 합니다...
하지만 React의 경우 React-Router를 많이 사용합니다.
React-Router BrowserRouter의 URL은 가짜 주소라서 새로고침하면 404 오류를 뿜는다는거 알고 계실겁니다.
React-Router BrowserRouter가 적용된 앱을 배포하는 방법은
.htaccess 파일을 활용하는것 입니다.
사용자가 특정 디렉토리에 접근할 경우
해당 디렉토리에 .htaccess 파일이 있다면 그 파일을 읽어 시키는대로 합니다.
(루트 디렉토리에 올리면 모든 디렉토리에 적용이 되고, 원하는 디렉토리마다 각각 놓을 수도 있습니다)
원래는 apache나 nginx 설정을 통해 적용 가능하지만 우리는 그 곳에 접근할 수 없기에 htaccess를 활용합니다.
htaccess 옵션 중 우리가 살펴볼 옵션은
RewriteRule입니다.
<사용자가 입력한 URL을 해석하여 다른페이지로 보내는 등의 행동을 하는 옵션입니다>
이제 눈치가 빠르신 분들은 벌써 어떻게하는지 방법쯤은 감이 잡히시죠?
리액트 앱을 배포한 디렉토리에서 사용자가 입력한 URL의 파일이 존재하지 않는다면
index.html로 URL은 유지한 채 리다이렉트 하겠습니다
주의: 만약 사용자가 입력한 URL에 파일이 존재하는지 체크하지 않는다면
css, js 이런 파일들 마저 index.html로 리다이렉트 시키기 때문에 오류가 발생합니다.
#.htaccess의 주석! # ▼ RewriteEngine을 활성화 합니다 RewriteEngine On # ▼ 접속한 곳이 index.html이 아니라면 RewriteRule ^index\.html$ - [L] # ▼ 그와 동시에 접속한 곳에 파일이 없다면 RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l # ▼ URL은 유지한 채 index.html을 표시합니다 RewriteRule . ./index.html [L]
주석을 참고하시면 되겠습니다.
이렇게하면 /blabla 이런식으로 없는 파일명 URL로 접속해도
정상적으로 React Routing 가능합니다.
(404는 React에서 구현해야 함. 구글 검색 ㄱㄱ!!)
htaccess에 대한 자료가 너무 적은탓에 저처럼 삽질하시지 말고 도움 되시길 바랄게요
![이니스프리](/files/member_extra_info/profile_image/819/059/59819.png?t=1717193427)
좋은 글 감사합니다.