CDN을 사용해 이미지 최적화하기

🚀

들어가기 전에🔗

현재 포스팅의 이미지 파일들은 public 폴더에 .png 파일로 저장되어있다.

이를 참조하기 위해 <Image> 컴포넌트를 사용하여 이미지를 불러올 수 있다.

하지만 이미지가 많아질수록 프로젝트의 크기가 커지게 되고, 이미지 파일을 관리하기 어려워진다.

또한 사진이 많아질수록 페이지 로딩 속도가 느려지는 문제가 발생해 이를 최적화하기 위해 이미지 파일을 불러오는 방법을 찾아보았다.

✅

CDN이란?🔗

CDN
(
Content Delivery Network
)은 콘텐츠 전송 네트워크로, 전 세계에 분산된 서버에 콘텐츠를 저장하고 사용자가 해당 콘텐츠에 접근할 때 가장 가까운 서버에서 콘텐츠를 제공하는 기술이다.
이를 통해 콘텐츠 전송 속도를 높이고, 서버 부하를 줄일 수 있다.
위키백과↗

CDN 제공 업체는 여러 곳이 있다.

이 중 Cloudfront와 S3 버킷을 사용하여 CDN 환경을 구축해보려고 한다.

✅

Cloudfront, S3란?🔗

Amazon CloudFront

는 .html, .css, .js, 이미지 파일과 같은

정적 및 동적 웹 콘텐츠

를 사용자에게 빠르게 배포하는 웹 서비스다.

CloudFront는 엣지 위치라고 하는 전 세계 데이터 센터 네트워크를 통해 콘텐츠를 제공한다.

사용자가 CloudFront를 통해 제공하는 콘텐츠를 요청하면 지연 시간(시간 지연)이 가장 짧은 엣지 위치로 요청이 라우팅되므로 콘텐츠가 최상의 성능으로 전송된다.

Amazon S3

는 웹 서비스를 위한 객체 스토리지 서비스로, 웹 규모의 컴퓨팅 작업을 위한 간단한 웹 서비스 인터페이스를 제공한다.

🚀

CDN 환경 구축하기🔗

✅

1. S3 버킷 생성🔗

나는 현재 Route53으로 호스팅 중인 도메인이 있어 해당 계정으로 로그인하여 진행하였다.

AWS에 로그인한 후, S3 서비스로 이동해 버킷 생성 버튼을 클릭한다.

리전을 주의하자!
버킷을 생성 전 리전을 잘 선택해야 한다. 나는 아시아 태평양(서울) 리전을 선택하였다.
버킷 이름 생성 Rule↗ - 언더바 금지
나머지 설정은 기본 설정으로 진행한다.
버킷 만들기 버튼을 클릭하면 버킷이 생성된다.

✅

2. CloudFront 생성🔗

CloudFront 서비스로 이동해 배포 생성 버튼을 클릭한다.
Origin Domain에 S3 버킷의 엔드포인트 주소를 선택한다.
원본 엑세스(Origin Access)에서 원본 엑세스 제어 설정 선택 후 Create new OAC 버튼을 클릭한다.
기본 설정으로 Create 버튼을 클릭한다.
기본 캐시 동작 중 뷰어 프로토콜 정책은 사용자에 따라 선택한다.(필자는 HTTPS only 선택)
기본적으로 img와 script 태그는 CORS 체크를 하지 않기에 캐시 정책을 기본으로 두어도 되지만 만약을 위해 설정해주기로 하자.
- 원본 요청 정책을 CORS-S3Origin으로 설정한다.
- 응답 헤더 정책을 CORS-With-Preflight으로 설정한다.
웹 애플리케이션 방화벽(WAF)는 비활성화해준다.
과금 요소가 있는 부분이다.
기타 개인 설정을 마치고 배포 생성 버튼을 클릭한다.