CloudFront Customization
아직 모두 끝난 것이 아니다. 앱이 잘 작동하는 듯 하다가도, 페이지가 refresh 되는 경우 이상한 에러 페이지가 나타날 것이다. 이는 기본적으로 단일 페이지 앱인 React는 domain/index.html 파일을 기반으로 앱을 제공하기 때문이다. 즉 사실 domain/some_url과 같은 페이지도 index.html 파일을 먼저 로드한 상황에서 React Router가 URL parameter를 읽어 와 적절한 컴포넌트를 띄워 주는 것이다. 그러니 domain/some_url 페이지에서 새로고침을 시도하거나, 해당 URL로 직접 접근하려 하면 index.html 파일을 로드하지 못하기 때문에 앱이 먹통이 된다.
이를 위해서는 CloudFront의 Error Pages 탭에 Custom Error Response를 추가해 주어야 한다. 상기된 문제를 해결하려면, 새로운 커스텀 에러 리스폰스를 생성한 후 다음과 같이 설정하면 된다.
•
HTTP Error Code: 404 Not Found
•
Customize Error Response: yes
•
Response Page Path: /index.html
•
HTTP Response Code: 200
이제 정상 작동할 것이다!
추가 도메인
만약 앱에 두 가지 도메인(ex. example.com & www.example.com)을 동시에 붙이고 싶다면, S3를 통한 리디렉트가 가능하다. 이는 AWS support center의 다음 페이지를 참고하면 금방 할 수 있다.
여기서 React 앱 배포기를 마무리한다.
E.O.D.