S3 - Cloud Front 적용

업무 하면서 항상 해야지 하는 일들이 있는데 차일피일 미루는 경우들이 있습니다. 물론 스프린트를 진행하면서 병행하기란 쉽지 않을 수 있다고 생각하지만, 결과적으로 해야 하는 일들이라고 생각합니다. 
그중 하나가 기존에 S3에 CDN을 적용하지 않은 것이고, 시간이 지남에 따라서 S3에 업로드되는 이미지들은 점점 증가될 것이며, 이는 프론트에서 이미지를 가져올 때 속도적인 측면에서 떨어질 수 있습니다.
오늘은 기존 서비스에 CDN을 적용하는 과정을 이야기하려고 합니다.

---

CDN이란?

CDN(Content Delivery Network)은 전 세계에 분산된 서버 네트워크(엣지 로케이션, Edge Location)에 콘텐츠를 미리 복사(캐싱, Caching)해두고, 사용자에게 가장 가까운 서버에서 콘텐츠를 전송하는 시스템입니다.

 

쉽게 말씀드리자면 현재 우리 서비스의 원본 파일이 서울에 있는 서버(S3 버킷)에 저장되어 있다고 가정해 봅시다.

• 한국 사용자: 서울 서버에서 직접 파일을 받으므로 속도가 빠릅니다.
• 미국 사용자: 서울까지의 먼 물리적 거리를 거쳐 파일을 받아야 하므로, 네트워크 지연이 발생해 로딩이 느리다고 느낄 수 있습니다.

이때 미국에 있는 CDN 엣지 로케이션에 파일 복사본을 두면, 미국 사용자는 더 이상 서울까지 올 필요 없이 가까운 미국 서버에서 파일을 즉시 내려받을 수 있습니다. 이것이 바로 CDN의 핵심 원리입니다.

 

장점

속도 향상: 사용자와 가까운 서버에서 콘텐츠를 제공하므로 로딩 시간이 단축됩니다. 특히 이미지, 동영상, CSS, JavaScript 파일 등 정적 콘텐츠의 전송 속도가 크게 개선됩니다.

서버 부하 분산: 원본 서버의 트래픽 부담을 줄여주므로 서버 안정성이 향상되고, 갑작스러운 트래픽 증가에도 더 잘 대응할 수 있습니다.

가용성 향상: 한 서버에 문제가 생겨도 다른 지역의 서버에서 서비스를 계속 제공할 수 있어 웹사이트의 안정성이 높아집니다.

주요 서비스

대표적인 CDN 서비스로는 Cloudflare, Amazon CloudFront, Google Cloud CDN, Microsoft Azure CDN 등이 있습니다.

 

적용 방법

1. AWS CloudFront에 접속합니다.

2. AWS CloudFront 배포 탭에서 배포생성을 클릭합니다.

3. Distribution options에 Distribution Name에 이름을 작성합니다.

 

4. 2단계에서 Origin Type을 S3로 지정합니다.

5. Origin에서 S3 Origin 주소를 입력합니다. ( path를 지정하고 싶으시면 지정하셔도 됩니다.)

6. 3단계 Enable security는 WAF 설정입니다. 비용이 발생되는 곳이나 보안적인 부분이 필요하신 분은 설정하시면 됩니다.(저는 하지 않았습니다.)

7. 4단계 설정값을 확인하시고 Create distribution 버튼을 눌러서 생성합니다.

8. 최종적으로 S3와 CloudFront가 연결이 된 것을 확인하실 수 있습니다.

9. 기존 이미지 업로드 코드에 S3 Origin 주소를 CloudFront에서 발급받은 Domain 주소로 변경하시면 됩니다.

---

 

S3 초기 설정이라면 문제 없으시겠지만, 저처럼 이후에 설정을 하셨다면 기존 S3 주소를 변경하는 작업을 진행해주셔야 합니다.
CDN을 설정한다고 해서 기존 S3주소로 이미지를 가져오지 못하는 것은 아닙니다. 그렇기 때문에 그냥 유지하셔도 되지만, 추후 발생할 수 있는 이미지 처리 속도를 위해서 작업을 같이 병행해주시는 것을 추천드립니다.

 

 

 

Ref.

https://nayoungs.tistory.com/entry/AWS-CDN%EA%B3%BC-Amazon-CloudFront-S3-%EC%97%B0%EB%8F%99

[AWS] CDN과 Amazon CloudFront + S3 연동

https://akku-dev.tistory.com/153

AWS S3와 CloudFront 연동 끝까지 가보기

https://velog.io/@ygreenb/AWS-S3-CloudFront%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-CDN-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

AWS S3, CloudFront를 이용한 CDN 구축하기