React환경에서 S3에 배포 후 새로고침 에러

에러

React 환경에서 작성된 코드를 S3에 정적 웹페이지 배포를 하고 배포된 페이지에서 새로고침을 하게되면 발생하는 에러이다.

 

원인

React에서 작성된 Route의 path를 배포된 환경에서는 사용할 수 없기 때문이다. 

 

시도

• Cloud Front사용
  • Cloud Front를 사용하면 특정 에러 발생시 새로운 주소로 리다이렉션이 가능해진다.

새로고침시 주소가 올바르게 서버 주소로 요청을 보내는게 확인됐지만 Cloud Front로 배포할 경우 배포주소 시작이 https가 된다. 이 말은 보안 때문에 http에 요청을 보내고 응답을 받을 수 없다는 말이다.

index.html에 아래의 코드를 넣으라는 방법도 해봤지만 빌드하고 배포하는 순간 페이지가 검게 변하는 현상이 생겼다.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

출처:https://velog.io/@shin6949/HTTPS%EC%97%90%EC%84%9C-HTTP-%EC%9A%94%EC%B2%AD-%EB%B8%94%EB%9D%BD-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

해결

• https://github.com/bluelion2/Project-issue-repo/issues/22

[AWS] 페이지 이동 후 새로고침시 에러 발생 · Issue #22 · bluelion2/Project-issue-repo

위의 이슈 중 error가 발생했을때 어느페이지로 리다이렉션 할건지 정하는 부분에 index.html을 적으면 해결된다는 이슈가 있어서 적용해 봤다.

이 경우 새로고침을 해도 404에러 페이지가 나타나지 않지만 데이터를 요청하는 주소를 S3 배포 주소로 보내고 있었다.

당연히 S3로 요청을 보냈으니 데이터는 받아올 수 없었다.

이 현상이 요청을 보내는 주소가 없을 경우 발생하는 현상으로 기억하고 있다. 저번에 작성한 포스트 axios defult 설정(https://mylearningcoding.tistory.com/59)이 적용이 안된다고 생각해 index.tsx에 있던 axios defult 설정을 App.tsx로 가져와서 적용했다.

 

axios.defaults.baseURL = process.env.REACT_APP_BASE_URL;
axios.defaults.headers.common['Authorization'] =
  localStorage.getItem('accessToken');
axios.defaults.headers.common['Refresh'] = localStorage.getItem('refreshToken');

• 전에는 서버에서 전달받은 토큰을 사용했지만 로그인이 구현되어 로컬스토리지에 저장되어 있는 토큰을 사용
• 이후 잘 작동하는 것을 확인.