HTTPS연결 시 404error발생

안녕하세요. 그님스의 프런트 김승주입니다.

 

AWS에 인증서를 받은 후 HTTPS로 연결도 잘 되고 이것저것 테스트를 하다가 네트워크에 404에러가 발생되었습니다. 분명 페이지는 잘 동작이 되는데 404라니??

네트워크에 404에러

 

알고보니  React의 SPA(Single Page Application)로 인하여 AWS측에서 요구하는 login파일이 없어서 발생했습니다.

SPA는 현재의 HTML파일인 index.html을 바탕으로 하나의 페이지에서 동적으로 다시 작성합니다. 즉, HTML, JS 등 필요한 코드를 하나의 페이지에 불러오거나, 동적으로 불러들여서 업데이트를 하는 방식입니다.

ReactSPA를 이용하면 HTML파일은 index.html하나 뿐입니다. 하지만 AWS S3, CloudFront에서는 별도의 HTML을 요구하는데 이로 인해 ERROR가 발생됩니다.

 

해결방안으로 CloudFront에서 추가적인 설정을 해주었습니다.

 

1. CloudFront에 들어가서 해당 ID에 들어갑니다.

2. 오류 페이지 ⇒ 사용자 정의 오류 응답 생성을 합니다.

3. 사용자 정의 오류 응답 생성을 합니다.

1. 정의하고 싶은 오류를 설정해 줍니다. 예를 들어 404를 설정하고 싶으면 404를 선택해줍니다.
2. 응답 사용자 정의를 예로 설정해줍니다
3. index.html파일의 위치(/index.thml)을 기입해줍니다.
4. index.html파일의 상태코드를 정해줍니다. 예를 들어 404에러를 200으로 하고 싶다면 200으로 설정을 합니다.
5. 설정을 다하면 생성 버튼을 누릅니다.

4. 설정 후 확인

 

설정 후 배포를 한 뒤 다시 확인을 했습니다.

이제 404는 보이지 않습니다!!

 

읽어주셔서 감사합니다.

저희 그님스는 잘못된 정보에 대한 지적과 조언의 댓글을 언제나 환영합니다!