리액트를 배포하는 방법은 2가지가 있다.
1. EC2에서 Nginx를 통해 배포하는 방법
2. S3에서 정적 사이트로 배포하는 방법
(각 방법에 해당하는 배포방법은 구글링하면 많이 나온다.)
리액트의 작동원리에 대해서 생각해보자.
리액트에서 링크를 클릭해서 페이지를 이동하는 경우
실제로 해당 path를 새로 request 하는것이 아닌
자바스크립트로 address를 변경된걸로 보이게하고 해당 리소스를 가져오는 방식이다.
즉
https://example.com
에서 링크를 클릭해서
https://example.com/path
로 이동하게 된다 하더라도 실제로 path에 해당하는 request를 보내는것이 아닌
주소창에 값을 바꾸고 해당 리소스를 가져오는 형식이다.
일반적인 a태그의 동작방법이랑은 다르다.
그럼 만약 주소창에
https://example.com/path를 입력하고 enter를 치면 어떻게 될까?
해당 path의 리소스로 바로 찾아가게 되는데
리액트 파일구조를 보면
root 폴더안에 바로 해당하는 path의 폴더가 있는 구조가 아니다.
그래서 404 에러를 마주하게 된다.
이걸 해결하는 방법이 2가지가 있는데
1. Nginx를 이용해서 배포한다.
Nginx에서 try_files라는 옵션이 있는데 여기 옵션에 나열된 순서대로 리소스를 가져오는 형식이다.
첫번째 리소스를 가져오는데 실패하면 다음 리소스를 가져오는 형식이다.
try_files 옵션에서 마지막에 /index.html을 추가하면
https://example.com/path를 요청하더라도 결국 /index.html을 가져오게 된다.
2. 해쉬라우터를 사용한다.
react-router-dom에는 여러가지 router가 있는데 그중에 가장 많이 사용하는 것이
Browser Router와 Hash Router이다.
두개의 차이점은 Brower Router는 일반적인 웹사이트 주소처럼
https://example.com/pathA/pathB 이렇게 주소값이 변경되는데
Hash Router는
https://example.com/#/pathA/pathB 이런식으로 주소값이 생성된다.
#은 브라우저에서 path로 인식되는것이 아니라 anchor로 사용된다.
위와 같은 주소에서 브라우저는 https://example.com로 request를 보내고
나머지 #/pathA/pathB는 리액트가 처리하게 된다는 뜻이다.
해쉬라우터를 사용하면 s3나 github page로 배포해도 괜찮다.
No comments:
Post a Comment