Cloud Front 도입과 access denied 오류

프로젝트에서  sns기반의 플랫폼 형식을 띠고 있다 보니 웹 페이지 안에서 많은 영상과 이미지 게시글들의 데이터를
가능한 한 빨리 로딩시키고 ,가져올지 방법에 대한 문제로 AWS에서 제공하는 Cloud Front를 도입하기로 하였다.

Cloud Front의 이점

Amazon CloudFront는. html,. css,. js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스입니다. CloudFront는 에지 로케이션이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공합니다. CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 에지 로케이션으로 요청이 라우팅 되므로 가능한 최고의 성능으로 콘텐츠가 제공됩니다.

• 콘텐츠가 이미 지연 시간이 가장 낮은 엣지 로케이션에 있는 경우 CloudFront가 콘텐츠를 즉시 제공합니다.
• 콘텐츠가 엣지 로케이션에 없는 경우 CloudFront는 콘텐츠의 최종 버전에 대한 소스로 지정된 오리진(Amazon S3 버킷, MediaPackage 채널, HTTP 서버(예: 웹 서버) 등)에서 콘텐츠를 검색합니다.

CloudFront는 AWS 백본 네트워크를 통해 콘텐츠를 가장 효과적으로 서비스할 수 있는 엣지로 각 사용자 요청을 라우팅 하여 콘텐츠 배포 속도를 높입니다. 일반적으로 CloudFront 에지가 최종 사용자에게 가장 빨리 제공합니다. AWS 네트워크를 사용하면 사용자의 요청이 반드시 통과해야 하는 네트워크의 수가 줄어들어 성능이 향상됩니다. 파일의 첫 바이트를 로드하는 데 걸리는 지연 시간이 줄어들고 데이터 전송 속도가 빨라집니다.

또한 파일(객체라고도 함)의 사본이 전 세계 여러 엣지 로케이션에 유지(또는 캐시)되므로 안정성과 가용성이 향상됩니다.
출처: https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Introduction.html

 

쉽게 정리하면

• AWS 네트워크를 사용하면 사용자의 요청이 반드시 통과해야 하는 네트워크의 수가 줄어들어 성능이 향상
• 파일의 첫 바이트를 로드하는 데 걸리는 지연 시간이 줄어들고 데이터 전송 속도가 빨라진다.
• 파일(객체)의 사본이 전 세계 여러 엣지 로케이션에 유지(또는 캐시)되므로 안정성과 가용성이 향상
• 보안성 향상
  • 오리진 서버에 대한 종단 간 연결의 보안이 보장됨(https)
  • 서명된 URL 및 쿠키 사용 옵션으로 자체 사용자 지정 오리진에서 프라이빗 콘텐츠를 제공하도록 할 수 있음

 

이렇게 많은 파일을을 로드시켜야 하는 나의 프로젝트에 딱 맞는 서비스 같았다.

밑에 블로그를 참고해서 도입을 할 수 있었다.

참고 블로그:

https://hell-of-company-builder.tistory.com/m/244

https://42place.innovationacademy.kr/archives/9784
도입하는 과정에서 배포된 cloud Front 사이트롤 접속하면 밑에와 같은 Access Denide 오류가 페이지에서 발생했다.

 

Access Denide 오류

해당 오류를 해결하려는 삽질 끝에 해결된 깃허브 내용을 찾아 생각보다 쉽게 해결할 수 있었다.

참고 깃허브;

https://github.com/Dailyscat/Issue-Archive/blob/master/1910%20react%EB%A5%BC%20s3%EC%97%90%EC%84%9C%20%EC%A0%95%EC%A0%81%20%EC%82%AC%EC%9D%B4%ED%8A%B8%20%EB%B0%B0%ED%8F%AC%20%EC%8B%9C%20cloud%20front%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC%20https%EB%A5%BC%20%EC%A0%81%EC%9A%A9%ED%95%A0%20%EB%95%8C%EC%9D%98%20access%20denied%20%EC%98%A4%EB%A5%98%20%ED%95%B4%EA%B2%B0.md

클라우드에서 생성한 버킷이름에 s3-website <= website 부분을 추가해 주니 문제가 해결되었다.

 

버킷이름.s3-website.ap-northeast-2.amazonaws.com

원본 도메인에 -website 추가