안녕하세요! 질문이 있습니다.

Question

좋은 강의 감사드립니다. 제 질문은  클라우드프론트를 생성하고 도메인을 확인하여 우리가 배포하고자 하는 파일인 Index3.html의 이미지 태그에 도메인을 추가하였는데 이 의미가 이미지를 좀더 빠르게 불러오기 위해 하는것이 맞는건가요??  그리고 만약에 html파일 뿐만 아니라 여러 js, css파일등 빌드된 파일들(React)이 있다고 하면 각 파일들에 모두 적용시켜야 하나요? 만약 그래야 한다면 어떻게 적용을 시켜야 할까요??

노마드 콘텐츠 랩 · Answer

안녕하세요. 답변드리겠습니다. AWS 의 CDN 서비스인 CloudFront 에 Cache 를 할 대상을 'Origin' 이라고 부릅니다. 따라서 js, css 같은 특정 Contents Type 을 선별해서 하기보다 Cache 하고자 하는 폴더나 디렉토리를 'Origin' 으로 선택하여 Cache 하게 됩니다. 만일 특정 js, css 같은 Contents Type 을 Cache 하고자 하신 다면 특정 폴더에 모아두고 CloudFront 에 Cache 하시는 것을 권장드립니다. 감사합니다.

now · Answer

상세한 답변 감사합니다!  그렇다면 js나 css를 캐시하려면 따로 추가적인 설정은 안해주어도 되나요?

노마드 콘텐츠 랩 · Answer

질문주신  내용은 만일 CloudFront 를 사용한다면 어떤 Contents 까지 Cache 할것인가? 라고 이해했습니다. AWS에 CDN 서비스인 CloudFront 에는 Static Contents 를 Cache 하는 것이 일반적입니다. 따라서 js, css 등 변화가 없는 Contents는 CloudFront 에 Cache 를 많이 합니다. 그리고  빌드되는 파일들(React) 나 php 같은 Dynamic 파일도 CloudFront에 Cache 할 수 있으나 파일 변화가 많은 Dynamic Contents는 고려를 해야 합니다. 예를 들어 DB 쿼리가 많은 Dynamic Contents 를 CloudFront 로 Cache 한다면 잦은 변경된 Contents 들이 CloudFront 로 Cache 되는 비용이 증가될 수 있습니다. 아래 흐름을 확인해 주세요. 최종 사용자가 콘텐츠를 요청 1. 요청이 최적의 엣지 로케이션으로 라우팅됨 CloudFront 엣지 로케이션 2. 캐시되지 않은 콘텐츠가 오리진으로부터 검색됨 콘텐츠가 있는 S3 버킷 또는 고객 오리진 4. 데이터가 최종 사용자에게 전송됨 3. 오리진 콘텐츠가 캐싱을 위해 CloudFront 엣지 로케이션으로 전송됨 감사합니다.

최종 사용자가 콘텐츠를 요청	1. 요청이 최적의 엣지 로케이션으로 라우팅됨	CloudFront 엣지 로케이션	2. 캐시되지 않은 콘텐츠가 오리진으로부터 검색됨	콘텐츠가 있는 S3 버킷 또는 고객 오리진
	4. 데이터가 최종 사용자에게 전송됨		3. 오리진 콘텐츠가 캐싱을 위해 CloudFront 엣지 로케이션으로 전송됨