• 목록
  • 아래로
  • 위로
  • 1
  • Ruwaku
  • 조회 수 443

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

이니스프리님 이니스프리 포함 1명이 추천

추천인 1

댓글 1

joyfuI
리액트 공부하고 았는데 구글링하다가 스포어에 돌아왔네요ㅎㅎ
좋은 글 감사합니다.
comment menu
2021.03.30. 14:33

신고

"joyfuI님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 시스템 점검 작업 완료 안내 10 마스터 마스터 24.09.05.16:25 2168
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 마스터 23.01.14.02:23 9009
480 (펌) 앱코, 감성초월 레트로 키보드 K850 & K830 마지막 하루!! 1 image 하루살이 title: 황금 서버 (30일)하루살이 17.02.28.00:41 325
479 [할인정보] 판다 글로벌 프로텍션 2,700원 (1년 1PC) 5 이니스프리 이니스프리 17.03.11.23:30 414
478 [무료정보] 판다 인터넷 시큐리티 6개월 무료! 7 이니스프리 이니스프리 17.03.12.01:10 395
477 [할인정보] IPVanish 63% 할인 쿠폰 3 이니스프리 이니스프리 17.03.12.11:20 308
476 리필되는 커피점 TOP 6 vs 리필 안 되는 커피점 TOP 9 3 image 이니스프리 이니스프리 17.03.12.21:28 621
475 [할인정보] 콰트로치즈와퍼주니어 44% 할인 + 오리지널 또는 골드 치킨프라이 50% 할인 3 image 이니스프리 이니스프리 17.03.13.12:18 326
474 맥도날드 슈비버거 단품 1+1 쿠폰  2 title: 네오웨이브네오웨이브 17.03.16.13:14 385
473 [할인정보] 비트디펜더 48시간 스페셜 오퍼! 2 image 이니스프리 이니스프리 17.03.25.10:56 566
472 [할인정보] Photo Works Projects 3 무료 배포 (3일간) 1 이니스프리 이니스프리 17.04.05.00:17 401
471 텍스트 무료 로고 만들기 사이트 4 image 오후두시스토리 오후두시스토.. 17.04.05.16:56 1011
470 다시 데워 먹으면 안 되는 음식 5가지 2 오후두시스토리 오후두시스토.. 17.04.06.11:11 519
469 기억력 증진을 위한 생활습관 12가지 image 오후두시스토리 오후두시스토.. 17.04.06.11:12 402
468 이것 7가지 지키면 미세먼지 노출 줄일 수 있다! image 오후두시스토리 오후두시스토.. 17.04.06.11:12 380
467 유튜브 영상 다운로드 하는 요령 2 image 오후두시스토리 오후두시스토.. 17.04.08.09:55 773
466 9개 소프트웨어 무료 증정 이벤트 1 이니스프리 이니스프리 17.04.09.12:16 410
465 Nginx 에서 라이믹스 짧은 주소 사용하기 title: 은메달도다 17.04.15.19:52 839
464 [무료제공] 강력한 언인스톨러 Soft Organizer 3 이니스프리 이니스프리 17.04.20.21:56 551
463 개인 파일을 쉽게 호스팅 해보자!! [ OneDrive ] 11 image TVJ title: 열려라 맛스타의 자물쇠TVJ 17.04.29.12:24 715
462 www-drv 내 클라우드를 웹서버 처럼! 트래픽 아끼기 개꿀팁!! 18 TVJ title: 열려라 맛스타의 자물쇠TVJ 17.04.29.19:52 1526
461 무료 홈페이지 비교 9 image 맛수타 17.05.07.16:25 878