• 목록
  • 아래로
  • 위로
  • 0
  • Ruwaku
  • 조회 수 60

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에 대한 자료가 너무 적은탓에 저처럼 삽질하시지 말고 도움 되시길 바랄게요

댓글 0

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 프록시 서버의 네트워크 시스템을 업그레이드 합니다. 2 updated 마스터 마스터 1일 전03:54 191
공지 메일 주소의 PTR 레코드가 변경됩니다. 1 마스터 마스터 2일 전03:49 203
공지 DB 시스템 업데이트 안내 1 마스터 마스터 2일 전14:31 206
공지 소셜로그인이 불가능 합니다. 3 마스터 마스터 21.01.02.14:14 262
공지 출석부 모듈에 오류가 있습니다. 6 마스터 마스터 20.07.13.14:14 3633
464 [Python] 전기차 충전소 조회 사이트 크롤링 이니스프리 이니스프리 21.01.10.15:10 42
[React] React-Router BrowserRouter를 사용한 앱을 SFU 호스팅에 배포하는 방법 Ruwaku 20.12.18.15:41 60
462 로지텍 G304 , G403 마우스 카일저소음 스위치(버튼) 교체!! image 자뻑보이 자뻑보이 20.12.02.20:23 107
461 [Python] 두 개의 리스트를 한꺼번에 for문으로 돌리기 1 이니스프리 이니스프리 20.11.23.20:30 71
460 [Python] 리스트의 순서를 유지하되 중복되는 요소를 제거하기 이니스프리 이니스프리 20.11.15.14:54 52
459 [Python] 네이버 블로그 크롤링할 때 PostList.nhn 관련 팁 (문자열에서 첫번째 행을 제거하기) 이니스프리 이니스프리 20.11.08.18:16 75
458 [Python] 문자열에서 파일명 또는 폴더명으로 시스템상 지원되는 글자를 제외하고 삭제하기 이니스프리 이니스프리 20.11.01.14:37 42
457 [Python] Pytube를 이용하여 유튜브 영상을 간단히 다운받는 법에 대한 설명 이니스프리 이니스프리 20.11.01.14:25 83
456 [Python] 특정 단어가 들어가는 폴더 또는 파일을 옮기기 이니스프리 이니스프리 20.11.01.14:14 85
455 [Python] 2개의 리스트를 딕셔너리로 변환하는 3가지 방법 이니스프리 이니스프리 20.10.25.15:34 135
454 [Python] HWP 파일 읽기 4 이니스프리 이니스프리 20.10.18.12:19 307
453 [Python] 디렉토리 내 0바이트 파일 찾기 이니스프리 이니스프리 20.10.11.11:19 53
452 [Python] 유튜브 영상을 PC에 다운받은 후 영상파일을 90도 rotation 하기 (youtube_dl + moviepy) 4 이니스프리 이니스프리 20.10.03.17:58 127
451 [Python] 폴더 및 하위 폴더 내의 파일에서 문자열을 일괄적으로 replace하는 스크립트 (ver 1.1) 이니스프리 이니스프리 20.10.02.11:58 29
450 [Amina] 그누보드 + 아미나 설치 방법 (처음 시작하는 분들을 위한 간단 매뉴얼) 이니스프리 이니스프리 20.10.01.16:48 103
449 JavaScript와 Canvas로 이미지의 배경값을 자동으로 산출하기 Seia Seia 20.09.12.06:37 57
448 React 그리고 Redux 쉽게 이해하기 image Seia Seia 20.09.12.06:31 64
447 [Python] 폴더의 모든 파일명을 랜덤하게 변경하기 이니스프리 이니스프리 20.08.30.15:06 185
446 [Selenium] 요소가 완전히 로드될 때까지 기다리기 이니스프리 이니스프리 20.08.23.20:22 42
445 [Selenium] 크롬 익스텐션 사용하기 1 이니스프리 이니스프리 20.08.23.19:35 70